第二章 css选择器和良好的结构体( 三 ) _css选择器

父级div定义高度
真正的需求中布局太死板，后续问题很多
1星
结尾处加空div标签 clear:both
html结构中增加了无意义的div ，结构冗杂
2星
父级div定义伪类:after 和 zoom
无发现，较完美的手段，兼容性好
5星
父级div定义 :
所有的子元素都不能超出父元素范围定位，不然会消失，这种情况下表现不好
4星
父级div定义 :auto
内部元素超过父元素时会出现滚动条
3星
父级div 也一起浮动
产生新的浮动
2星
父级div定义 :table
会产生各种问题，用这种古老的东西
0星
结尾处加 br标签 clear:both
类似第二种， br现在已经很少用了
0星
第四章链接应用样式
多变的链接操作
一、链接的样式 1. 链接的颜色 css提供了：link、：、：hover、：focus、：，五种伪类去实现对链接颜色的控制。顺序：
a:link-> a:visited-> a:hover->a:focus->a:active
2.链接的样式个性化链接可以通过伪类和背景图片满足代码：
a:hover {color:#666;text-decoration:none;background:url(img/a.jpg) repeat-x left bottom;}
已访问样式的设置
方法：利用：原因：如果不设置已访问样式，用户会不知道自己点过哪些网站，造成大量的回溯操作。跳转到页面指定位置处
可以通过给a标签的href属性设置#id ，就可以跳转到id所在的元素位置。问题：如果网页过于复杂，用户无法第一时间找到跳转后想看到的地方。解决方案：使用：代码如下：
这是标题跳转至内容 1 跳转至内容 2 请点击上面的链接， :target 选择器会突出显示当前活动的 HTML 锚。内容 1... 内容 2... 注释： Internet Explorer 8 以及更早的版本不支持 :target 选择器。
凸显不同的链接
其实就是根据链接的网站主体的业务方向，给链接一个背景图片用以识别。
1.首先利用属性选择器给所有的外部链接添加一个识别图片a[href^="http:"]{background:url(img/a,jpg) no repeat right bottom;padding-right:10px;}2.但是这样会选中使用绝对路径的内部链接（自己站点的链接），所以再做下面操作把内部链接的多余识别图像删除掉a[href^="http://www.yvming.com"],a[href^="http://yvming.com"]{background:url(img/a,jpg) no repeat right bottom;padding-right:0px;}
二、hover和其他 hover可以和其他元素的配合实现翻转效果
css精灵图
定义：将多张图片复合在一张图片上的技术。好处：可以减少http请求次数，同时相对的请求总大小反而还会减少。使用：配合背景图定位使用。
css工具提醒

文章插图
实现：不借助，通过hover控制或者等属性和定位流实现。优势：用css实现简单方便，不需要来往于和dom之间，对性能有一定的帮助。第五章列表和导航
导航及css映射的的制作思路
一、导航条 1. 制作我的导航原理：通过ul、li标签和hover就可以实现部分导航需求。步骤：