首页 > 其他分享 >HTML布局

HTML布局

时间:2022-12-13 13:58:36浏览次数:53  
标签:background color 布局 padding HTML London 5px

使用 <div> 元素的 HTML 布局

注释:<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。

这个例子使用了四个 <div> 元素来创建多列布局:

<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright W3School.com.cn
</div>

</body>

CSS:

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

 

 

标签:background,color,布局,padding,HTML,London,5px
From: https://www.cnblogs.com/JohnsonQ/p/16978543.html

相关文章

  • HTML 文件路径
      HTML文件路径文件路径描述了网站文件夹结构中某个文件的位置。文件路径会在链接外部文件时被用到:网页图像样式表JavaScript绝对文件路径绝对文件路径是......
  • HTML Js
    HTML<noscript>标签HTML <noscript> 标签定义了替代内容,这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户:<script>document.getElementById("demo")......
  • HTML有序、无序、定义列表的使用
    一、无序列表1.基本语法<ul><li></li></ul>2.标签(1)声明无序列表<ul>...</ul>(2)无序列表项<li>...</li>3.无序列表特征1.没有顺序,每个li独......
  • HTML 内联框架
    iframe用于在网页内显示网页。   添加iframe的语法<iframesrc="URL"></iframe>URL 指向隔离页面的位置。Iframe-设置高度和宽度height和width属......
  • html+css+js简易笔记
    html基本结构<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="view......
  • HTML id 属性
    HTML id 属性用于为HTML元素指定唯一的id。一个HTML文档中不能存在多个有相同id的元素。使用id属性id 属性指定HTML元素的唯一ID。 id 属性的值在HTML......
  • 使用v-html指令的禁忌和解决xss注入攻击
    1.由于v-html会执行所有的html代码,因此会执行所有可能带危险的html代码  2.在使用v-html时为了防止XSS攻击,可以安装npminstallxss插件,但是我们在渲染富文本编辑的......
  • day3-2022.12.12-flex布局初识
    一、完成以下布局。二、代码如下:<template><div><divclass="title">MYFirstFlexLearn</div><divclass="box"><divclass="item">......
  • 【ArkUI】对于Flex布局与基础组件&&声明式UI-组件封装&&父子组件相互绑定的运用【Open
    一.Flex布局与基础组件Flex是FlexibleBox的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。1.先规定弹性布局的大小,设置为百......
  • 卡片式网页设计排版布局案例讲解及技巧分享
    卡片就是交互信息的承载体,通常以矩形的方式呈现。就像信用卡或者棒球卡,网页卡片以一个浓缩的形式提供了快速并且相关的信息。所有的卡片特点就是交互性。不仅仅是他们提供了......