网页布局思路

为了提高网页制作的效率，布局时通常有以下的整体思路：

1.必须确定页面的版心（可视区），通过测量可得知;

2.分析页面中的行模块，以及每个行模块中的列模块--页面布局第一准则;

3.一行中的列模块经常浮动布局, 先确定每个列的大小,之后确定列的位置--页面布局第二准则;

4.制作 HTML 结构。我们还是遵循先有结构，后有样式的原则,结构永远最重要;

5.所以, 先理清楚布局结构,再写代码尤为重要. 这需要我们多写多积累.

项目结构搭建

根目录：网站的第一级文件夹

我们本次采取结构与样式相分离思想：

1.图片文件夹: images

2.样式文件夹: css

3.首页 : index.html

4.样式文件夹(css文件夹)下新建一个index.css文件,在通过link标签引入

## css基础样式初始化 * { margin: 0; padding: 0; /* 自减盒子模型 */ box-sizing: border-box; }

ul { /* 清除默认圆点 */ list-style: none; }

a { /* 取消下划线 */ text-decoration: none; }

input, button { /去掉input的轮廓线/ outline: none; border: 0; }

/* 左浮动 */ .fl { float: left; }

/* 右浮动 */ .fr { float: right; }

/* .clearfix::before 作用: 解决外边距塌陷问题,清除浮动 */ .clearfix::before, .clearfix::after { content: ''; display: table; }

    /* 真正清除浮动的标签 */

.clearfix::after { content: ''; display: table; clear: both; }