css 一些应用实例
基本抄自http://www.w3school.com.cn/css/css_align.asp 。。把这些知识消化吸收然后以自己的话来解释一下
■ 对齐
● 用margin属性进行居中对齐：
.center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; }
这样做可以让center类的元素进行居中对齐。如果width被设置成100%，那么自然是没有效果的。
● 用position属性左右对齐
.right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }
这个很好懂，就是用绝对定位把某个元素固定地对齐其父元素的右侧。
● 用float属性左右对齐
和绝对定位类似的，float也可以左右对齐，而且其可以支持多个元素一起float之后自动地共同整合显示在页面上。而绝对定位会互相覆盖。
■ 分类显示
css可以让不同地元素有不同的显示，比如之前提到过好几次的行内元素和块级元素的互相转换，display属性的作用从本质上来说就是一个分类显示。
除了熟悉的display之外，还有以下这些属性也可以让页面分类显示：
cursor cursor属性设置光标的类型。最常用的就是设置某个元素的hover伪类的cursor属性了。比如span:hover{cursor:pointer}就可以使当光标移动到这个span上方的时候变成一只手的光标。cursor的取值有很多http://www.w3school.com.cn/cssref/pr_class_cursor.asp。常用的有pointer（手指）,wait（转菊花）, move（十字箭头，用于移动），text（I字编辑光标）等等。
visibility 设置某个元素是否可见，可选值有hidden和visible。注意，visibility是hidden并不意味着这个元素不占用文档的空间，这部分空间还是被它所占用但是人看不到了
■ 导航栏
自定义一个导航栏用到了以下几个css的点：列表项图标省去，列表项向左浮动，超链接转换块级元素，超链接不同状态（伪类）的不通背景设置。示例如下：
<!DOCTYPE html> <html> <head> <style> ul{ list-style-type:none; margin:0; padding:0; overflow:hidden; } li{ float:left; } a:link,a:visited{ display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#bebebe; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active{ background-color:#cc0000; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html>
效果：
■ 图片库
http://www.w3school.com.cn/css/css_image_gallery.asp
这个图片库比较全地用了对齐，浮动，边距调整等操作，可以看看源码学习参考一下
■ 更多css参考
http://www.w3school.com.cn/cssref/index.asp