HTML5项目实战（一）——PC端固定布局全页面——day eight

代码及图片

一、分离CSS

把css重复的部分移植到新的页面而减少代码冗余，单独创建一个 CSS，以便后续的页面重复调用。

多观察页面，总结出相同的样式，注意取名，方便调用。

二、html页面切换

不同的html页面通过链接实现跳转，常用class="active"，设置当前页面导航栏样式。

三、通过添加背景渐变过渡，避免文字与背景颜色融合看不清

background: linear-gradient(to bottom right, rgba(0,0,0,0.7), rgba(0,0,0,0.0)) no-repeat center, url(../img/headline.jpg) no-repeat center ; 

四、a标签通常不单独设置样式，一般都将超链接归类到 UL 里。若单独使用：

1.从语义不明确，如果外部包含 UL 可以理解为标签列表；

2.从 CSS 布局排版上，UL 作为一个整体，更容易统一排版；

3.从 SEO 角度考虑，大量 a 标签有可能会被判定堆积关键字嫌疑，从而导致网站降权， 用 UL 包含判断则让搜索引擎判定为有条例的列表，对搜索引擎更加友好。

五、CSS代码简洁

如子元素都有text-align: center; 等相同样式，可将其写在父元素样式里，个别不同的子元素可单独设置样式。

六、HTML代码简洁

如：把除了标题和其他图片有关的简要信息都归于 <figcaption>可以达到更好的排版效果。 

七、输入框间距设置

用p标签包含，再设置行高来控制jian。

<div class="form left"> 
<p> 
<label for="from_city">出发城市</label> 
<input type="text" name="from_city" id="from_city" placeholder="城市名"> 
</p> 
<p> 
<label for="to_city">返回城市</label> 
<input type="text" name="to_city" id="to_city" placeholder="城市名"> 
</p> 
</div> 

八、设置表格间隔样式

table tr:nth-child(2n) { background-color: #fafafa; } 偶数行背景颜色加深。

九、注意设置样式的先后顺序，优先级权重（比如前面写了a标签样式，后面直接用a里面一个class名设置样式是不行的，必须a.class名，不然上面的a权重更大），避免样式覆盖。

十、统一页面字体

font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;