《精通CSS：高级Web标准解决方案》学习过程--III

第五章：锚链接样式

俗话说人靠衣裳马靠鞍，默认的锚链接样式几乎没有人会觉得赞，因此需要对其进行梳妆打扮一番

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属性)  这些不但有利于设置合理的结构，更有利于屏幕阅读器等设配的解析。