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