属性书写顺序

1. 布局定位属性：display 、 position 、 float 、 clear 、 visibility 、 overflow
2. 自身属性：width 、 height 、 margin 、 padding 、 border 、 background
3. 文本属性：color 、 font 、 text-decoration 、 text-align 、 vertical-align 、 white-space 、 break-word
4. 其他属性：content 、 cursor 、 border-radius 、 box-shadow 、 text-shadow 、 background:linear-gradient

页面布局整体思路

1. 必需确定页面的版心，可视区测量可知
2. 分析页面中的行模块，以及每个行模块中的列模块
3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置
4. 制作HTML结构。先有结构，后有样式。
5. 理清楚布局结构

导航栏

实际开发中，不会直接使用链接 a 标签 ， 而是使用 li 标签包含链接标签

1. li+a 语义更清晰，一看这就是有条理的列表内容
2. 提升ESO权重

CSS初始化

/* 去除常见标签默认的margin和padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
    margin: 0;
    padding: 0;
}

/* 网页统一字体大小、行高、字体系列相关属性 */
body {
    font: 16px/1.5 "Helvetica Neue",Helvetica,Arial,"Microoft Yahei","Hiragino Sans GB","WenQuanYi Micro Hei",sans-seri;
}
/* 去除列表默认样式 */
ul,
ol {
    list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
    font-style: normal;
}
/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
    text-decoration: none;
    color: #333;
}
/* 去除input默认样式 */
input {
    border: none;
    outline: none;
    color: #333;
}
/* 左浮动 */
.fl {
    float: left;
}
/* 右浮动 */
.fr {
    float: right;
}
/* 双伪元素清除浮动 */
.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}