您的位置：首页 > Web前端 > CSS

前端学习笔记--HTML/CSS--网页布局

2016-12-28 00:00 1051 查看

[转]来自于慕课网学习整理。

网页布局

一、一列布局：

完成代码编辑器中的任务1，要求main和footer在浏览器中水平居中。如下图所示：

Css代码:

body{ margin:0; padding:0; font-size:5px}
div{ text-align:center; font-weight:bold}
.main,.footer{ width:200px; margin:0 auto;}
.head{ width:100%; height:20px; background:#ccc}
.main{ height:100px; background:#FCC}
.footer{ height:20px; background:#9CF}

ps:用到固定宽度居中方法

Html代码：

<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>

二、二列布局：

完成本次实战练习，快来检验你的实战成果吧！任务最终效果如下：

Css代码:

body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:960px; height:600px; margin:0 auto}
.left{ width:300px; height:600px; background:#ccc; float:left}/*左浮动样式*/
.right{ width:660px; height:600px; background:#FCC; float:right}/*右浮动样式*/

HTML代码：

<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>

三、三列布局：

完成本次实战练习，快来检验你的实战成果吧！最终效果如下图所示：

CSS代码：

body{ margin:0; padding:0; font-size:10px; font-weight:bold}
div{ line-height:15px}
.left{ width:50px; height:100px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:100px; margin:0,80px,0,50px;background:#9CF}
.right{ height:100px; width:80px; position:absolute; top:0; right:0; background:#FCC;}

HTML代码：

<body>
<div class="left">left</div>
<div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。。</div>
<div class="right">right</div>
</body>

四、布局中用到的float属性：

1.float属性：

float:left; float:right; float:none

特点：元素会左移，或右移，直至触碰到容器为止。

当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。

当元素设置浮动属性之后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素。

2.清除浮动的常用方法

方法一：clear:both; clear:left; clear:right

方法二：同事设置width:100%(或固定宽度)+overflow:hidden;

ps:

（1）对于父元素的影响,父元素清除浮动就是：width:100%;overflow:hidden;

父块没有设置指定的高宽，当子块设置为浮动后，原本包裹子块的父块的高度塌陷消失，这时给父块设置overflow:hidden就能清楚浮动造成的影响，使父块重新包裹子块。
（2）对于自己临近的元素影响，清除浮动就是：clear：both;

五、布局中用到的position属性

1.相对定位：position:relative

特点：

（1）相对于自身原有位置进行偏移

（2）仍处于标准文档流中

（3）随即拥有便宜属性和z-index属性

2.绝对定位：position:absolute

特点：

（1）建立了以包含块为基准的定位

（2）完全脱离了标准文档流

（3）随即拥有便宜属性和z-index属性

如果未设置偏移量，

特点：无论是否存在已定位祖先元素，都保持在元素初始位置

脱离了标准本文档流

如果设置偏移量，

偏移参照基准：

无已定位祖先元素，会以<html>（根元素）为便宜参照基准

有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准

六、横向两列布局：

固定宽度列的高度>自适应宽度的列的高度（用绝对定位方式），因为绝对定位不会占据位置，若是固定宽度列高度<自适应宽度的列的高度，无法支撑整个父元素。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 网页布局 html CSS

相关文章推荐

新的分享

章节导航