标签：
没有这次的练习之前，在没有js情况下，我的认知中觉得css实现动画交互效果会很难，且效果也牵强，
就如点击弹出或显示内容都不可能现实的到，但通过这次练习，大大的改观了我对css的认识，在以前不
注重的伪类选择器中，原来大有作用在，且实现出的效果比js简单，如以下的:target伪类和:checked伪类。
target伪类
先来一个例子效果：
内容 1...
内容 2...
从中可以感受到target伪类的神奇效果。
Target经过多方面的资料查询，只要被a标签锚点选中就可以激活，然后激活的元素会被赋予激活后的属性，
但如果激活别的元素那么之前激活的就会被取消激活，就是说只能有一个元素获取激活属性。
这个伪类可以实现到Tab切换，而这个Tab切换在网页的使用率很高，还有也能实现到背景的切换。
Tab切换代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .tabmenu { position:absolute; top:100%; margin:0; } .tabmenu li{ display:inline-block; } .tabmenu li a { display:block; padding:5px 10px; margin:0 10px 0 0; border:1px solid #91a7b4; border-radius:0 0 5px 5px; background:#e3f1f8; color:#333; text-decoration:none; } .tablist { position:relative ;margin:50px auto; min-height:200px; } .tab_content { position: absolute; width:600px; height:170px; padding:15px; border:1px solid #91a7b4; border-radius:3px; box-shadow:0 2px 3px rgba(0,0,0,0.1); font-size:1.2em; line-height:1.5em; color:#666; background:#fff; } #tab1:target, #tab2:target, #tab3:target { z-index: 1; } </style> </head> <body> <div class="tablist"> <ul class="tabmenu"> <li><a href="#tab1">tab1</a></li> <li><a href="#tab2">tab2</a></li> <li><a href="#tab3">tab3</a></li> </ul> <div id="tab1" class="tab_content">tab1</div> <div id="tab2" class="tab_content">tab2tab2</div> <div id="tab3" class="tab_content">tab3tab3tab3</div> </div> </body> </html>
效果例子：
:checked伪类
:checked伪类的使用，这个伪类是匹配用户界面上处于选中状态的元素。(用于input type为radio与checkbox时)
而从它使用的元素类型可以看出它是使用在选择按钮这类的元素上，那么是在选中的状态才激发，那么是不是
可以想到使用在点击方面的效果，而在一个页面上无处不在的点击效果，所以它的使用范围更加广，而且这次
练习的项目的很多效果都要点击才能出效果，所以有了这个效果百分之99%的效果都可以实现到，还有css最难
实现的轮播图它也能做，那么下面来个常用的下拉菜单：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checked</title> <style> body{ font-family: "微软雅黑"; } .nav{ position: relative; background: #ccc; width: 140px; height: 205px; } #checkbox{ opacity: 0; position: absolute; top: 0; left: 0; } .list{ position: absolute; top: 28px; left: 10px; list-style: none; margin: 0; padding:0; } .list>li{ border-left: 8px solid #9ab; border-right: 8px solid #9ab; font-size: 12px; height: 20px; line-height: 20px; margin: 8px 0; color: #888; width: 100px; text-align: center; background: #fff; } #checkbox ~ .list{ opacity: 0; transition: all 0.3s; } #checkbox:checked ~ .list{ opacity: 1; } label{ cursor: pointer; background: #fff; width:100px; height: 20px; font-size: 14px; line-height: 20px; border-left: 8px solid #9ab; border-right: 8px solid #9ab; text-align: center; display: inline-block; position: absolute; top: 8px; left: 10px; } label:before{ width: 100%; position: absolute; top: 0; left: 0; z-index: 2; content: "我是隐藏"; } label:after{ width: 100%; position: absolute; top: 0; left: 0; z-index: 1; content: ""; } #checkbox:checked~label:after{ z-index: 3; content: "我是显示"; } #checkbox:checked~label:before{ content: ""; } </style> </head> <body> <div class="nav"> <input type="checkbox" id="checkbox"> <label for="checkbox"></label> <ul class="list"> <li>我是1</li> <li>我是2</li> <li>我是3</li> <li>我是4</li> <li>我是5</li> <li>我是6</li> </ul> </div> </body> </html>
点击效果例子：
checked
这个下拉菜单使用到:after和:before实现文字的切换，这样看起来更有感觉。
最后是之前没弄懂的兄弟选择器：
兄弟选择符 (E~F)是选中所有F兄弟元素，但它是选中E标签以下的所有F标签的兄弟选择器。
最后提一下兼容性问题：因为这是CSS3新特性，所以不兼容老版本的浏览器，例如IE678。。。
我的布局上的技术总结：
行内元素
我这里的行内元素是包含了display：inline和inline-block
因为inline-block包含了行内元素的特性
行内元素都有一个默认的vertical-align:baseline，而行内块级元素会受到
vertical-align:baseline的影响下面多出一点空白间隙。（如果出现下面空白就是这个问题，不过这个有时候是不会出现）
Vertical-align和line-height是有关联的，vertical-align的百分数是相对于line-height的，
如：line-height:50px;
Vertical-align:10%; 那么相对数字就是50*0.1=5
所以行内元素是有很多小问题的。
而解决的方法是转换层块级元素或设置vertical-align:为bottom的值或别的，不是默认的那个baseline就行，
或者改变（line-height这个暂时不懂）。
使用vertical-align垂直居中：
inline-block代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>inline-block</title> <style> body{ margin: 0; } .wrap{ height: 100px; width: 100px; } .b{ height: 100%; width: 1px; vertical-align: middle; display: inline-block; background: red; } .a{ font-size: 14px; background: skyblue; display: inline-block; vertical-align: middle; width: 99px; } /* 只有当两个内联块级元素在同行时才起作用，所以不要把另一个元素挤下去 */ </style> </head> <body> <div class="wrap"> <div class="a"> <img src="vote01.jpg" width="50" alt=""> </div><div class="b"></div> </div> </body> </html>
它实现的原理是在盒子放两个inline-block盒子然后把定位居中的盒子设置vertical-align: middle;
还有把它的宽度改成0，那样它就可以不占位置，这种事取巧的方式，这个很笼统的介绍一下。
总结完毕！
标签：
原文地址：http://www.cnblogs.com/zhangzhicheng/p/5797578.html
