html布局都有那些?实例讲解html网页布局。

作者:IT技术 | 时间:2018-10-27

早期的网页布局多以table为主,现在的网页多以div+css的方式来实现各种布局,下面通过实例我们看一下html 怎么去布局网页。

网站大多数情况下以多列多模块来显示内容,例如下面的网页布局:

html网页布局都有那些?实例讲解html网页布局。

由上图可以看出,页面分为上(网站导航)、中、下(版权声明)三个部分,这些版块就像一个个的盒子,这些"盒子"中放置着各种内容,页面就是由这些"盒子"拼凑起来

盒子模型的相关属性

margin(外边距/边界)

border(边框)

padding(内边距/填充 )

水平居中

水平居中包含两种情况:
块级元素的水平居中:margin:0px auto;
文字内容的水平居中:text-align: center;

垂直居中
常见的单行文字的垂直居中可设置文字所在行的height与行高样式属性一致,比如:

div{
width: 400px;
height: 400px;
line-height: 400px;/*行高与div高度一致*/
}


网页布局CSS + DIV代码分析

HTML结构代码:

<div id="Container">
<div id="header">顶部(header)</div>
<div id="main">主体部分(main)</div>
<div id="footer">底部(footer)</div>
</div>

CSS样式代码:

/*主面板样式*/
#container {
width:980px;
margin:0px auto;/*主面板DIV居中*/
}
/*顶部面板样式*/
#header {
width:100%;
height:150px;
border:1px #F00 solid;
}
/*中间部分面板样式*/
#main {
width:100%;
height:400px;
border:1px #F00 solid;
}
/*底部面板样式*/
#footer {
width:100%;
height:100px;
border:1px #F00 solid;
}

浮动属性

float: 浮动方向(left、right、none);
left为左浮动、right为右浮动、none是默认值表示不浮动,设置元素的浮动,该元素将脱离文档流,向左或向右移动直到它的外边距碰到父元素的边框或另一个浮动元素的边框为止浮动示例,没有使用浮动的3个DIV:

HTML结构代码:
<div id="first">第1块div</div>
<div id="second">第2块div</div>
<div id="third">第3块div</div>

CSS样式代码:
#first, #second, #third{
width:100px;
height:50px;
border:1px #333 solid;
margin:5px;
}


执行效果如图:

html网页布局都有那些?实例讲解html网页布局。

样式中加入 float:left;
执行效果如图:

html网页布局都有那些?实例讲解html网页布局。