前言：在搭建项目时需有良好的命名和文件分类规范，在布局时使用语义化标签，这样才能于己于旁人更快的熟悉项目结构。
1.创建项目及命名。
建立文件夹名以xxx-pc(项目端名称)-client(客户)，xxx一般以项目名的开头字母组合起来或者代表性英文名称来命名，如：游乐园pc端项目，取名为yly-pc-client；酒店管理移动端项目，取名为hotelManagement-mobile-client。
2.创建子文件夹。
a,创建CSS、images、uploads等文件夹：
CSS：存放所有.css文件。
images：存放网站固定使用的图片素材，如网站logo、样式修饰图片等。
uploads：存放网站易更换的图片素材，如商品宣传图、商品图片等。
...
b,将index.html、ico图标等放在根目录。
3.在文件内创建对应文件及规范
a,在CSS文件夹内创建2个.css通用文件
base.css:用来存放所有页面通用的基本样式，如:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
a{
text-decoration:none;
}
ul
,ol{
list-style:none;
}
双伪元素清除浮动
clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
...
等样式。
common.css:该网站中多个网页相同模块的重复样式，如：头部、底部。
4.页面布局步骤思路
a,确认版心
确认好版心的样式后将其放在commom.css文件中。
版心一般取名:container、wrapper、w等。
b,页面整体外区域布局
--头部部分用header标签，内部嵌一个类名为版心名称的div，如:
--躯干部分根据业务需求进行相应的取类名，内嵌版心盒子。
--轮播图部分类名取banner。
--导航栏部分类名取nav。
--底部部分用footer标签，同样也嵌一个版心盒子。
c,页面板块内部布局
##一行显示多个最好用浮动float处理，也可以用子绝父相定位处理，尽量别用行内块，因为相邻行内块之间存在间隙问题（可以通过设置vertical-align属性解决）。
##垂直（上下）布局的块级盒子只需要设置其中一个盒子的上或下边距即可。
##相互嵌套的块级盒子可以在父盒子设置内边距或子盒子设置外边距的方式调整子盒子位置，不过后者需注意外边距塌陷问题。
##如果盒子内的文字是容易变化的，就别给盒子设置宽度，让内容撑开盒子。
