第五章：锚链接样式
俗话说人靠衣裳马靠鞍，默认的锚链接样式几乎没有人会觉得赞，因此需要对其进行梳妆打扮一番
1.锚链接的四中样式；
伪链接的设置顺序它 link visited hover active 否则会出现设置不起作用的问题。这四种伪类也可以用到其他的标签上 例如 tr:hover{background:yellow} input:focus{background: yellow}不过对版本的浏览器（IE7及以下）不支持
Tips: 1。可记忆为love hate 貌似是一堆反义词。嘿嘿。2。 为保证我们现实效果的一直 hover和focus伪类设置为一致；
2. 区分不同的链接
.通过结合属性选择和正则表达式 把不同的链接予以区分 。链接会有多种多样，有其他站点 、pdf等文件下载等。根据不同属性。设置不同样式
a[href="http:']{
background:url(需要设置的对应图片);
}
3 链接不同状态的效果
.可以采用背景图片的形式，最好把几张图片合并为一张，这样会减少对服务器的请求次数，改善用户体验。
第六章：导航和列表样式
网站中几乎到处都是列表，而导航对于一个站点的重要性也是不言而喻的，那么如何做出好看的样式那？且往下看。
1.列表标签的Tips；
不要使用list-style-image 属性，使用 background，不同的浏览器对于前面的属性解析差别较大，而且也不容易控制这个图片的位置。
结合前面学习内容的样式
ol{
margin-top: 100px;
list-style: none;
margin: 0;
padding: 0;
margin-top: 10px;
}
ol li{
float:left;
margin-left: 10px;
font-size: 30px;
padding: 5px 12px;
border: 1px solid #000;
}
ol li[rel='pre'] ,ol li[rel='nex']{
border:none;
}
ol li[rel='pre']:before{
content:'\00AB';
padding-right: 15px;
}
ol li[rel='nex']:after{
content: '\00BB';
padding-left: 15px;
}
<ol>
<li rel='pre'>pre</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li rel='nex'>next</li>
</ol>
2 锚的显示要设置为block，这样我们的整个区域都可点，提高用户体验！
2.如何设置横导航的样式；
在这里写这个问题，有点感觉重复前几章的味道，但是大家就当温故而知新吧。
设置横导航，估计大家都觉得soeasy!。但是在设置浮动时候 其实父标签<ul>里面其实什么都没有，因此在织梦里面看，其实<li>标签是溢出在父标签外的，那么怎么办？方法有3
1 在父标签里面设置overflow:hidden;最为有效 ，推荐
2.在父标签里增加无意义标签<li></li> 设置属性 clear:both;
3.让父标签也浮动，然后设置对他进行清理；
3.远距离翻转；
这个标题有点操蛋，因为我都不太明白什么意思，不过书中是这么叫的 。大家可以这么理解 ：翻转就是有反应的意思。
也就是你在操作是触发a 距离a比较远的b也样式或动作的变化。这个把二个标签封在一个大的标签中，然后分别定位就可以了。
第七章：数据表单样式
无论是表现大量数据还是在与用户的交互中，数据表单都意义非凡，那么设计简洁易懂的表单就是非常重要。
1.表格标签的Tips；
采用表格特有的元素，如表头 caption thead tbody tfoot summery(类似于image里面的alt属性) 这些不但有利于设置合理的结构，更有利于屏幕阅读器等设配的解析。