[小结] Css常用小套路(大小写、a标签、清除浮动、ul菜单)

一、文本相关

• 大小写转换
  文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。实例：

p.uppercase { text-transform: uppercase; } /*单词的所有字母转换成大写*/
p.lowercase { text-transform: lowercase; } /*单词的所有字母转换成小写*/
p.capitalize { text-transform: capitalize; } /*单词的首字母转换成大写*/

• a 标签相应状态样式
  a:link —— 定义正常链接的样式；
  a:visited —— 定义已访问过链接的样式；
  a:hover —— 定义鼠标悬浮在链接上时的样式；
  a:active —— 定义鼠标点击链接时的样式。
  示例（设置顺序）：

/* 顺序记忆：love(爱:l&v) && hate(恨:h&a) */
a:link {
  color: #FF0000;
  text-decoration: none;
 }
a:visited {
  color: #ccc;
  text-decoration: none;
}

a:hover {
  color: yellow;
  text-decoration: underline;
}
a:active {
  color: green;
  text-decoration: none;
}

• ui 菜单
  使用 ul > li 标签创建类似导航效果

	<div id="nav">
        <ul>
            <li><a href="http://www.cnblogs.com/Orange-C/p/4042459.html">首页</a></li>
            <li><a href="http://www.cnblogs.com/Orange-C/p/4042459.html">个人介绍</a></li>
            <li><a href="http://www.cnblogs.com/Orange-C/p/4042459.html">作品展示</a></li>
            <li><a href="http://www.cnblogs.com/Orange-C/p/4042459.html">联系我们</a></li>
        </ul>
    </div>  

	#nav{
    	width:400px;·/* 控制导航总宽度 */ 
    }
     
     /* 取消列表样式，内外补间为零 */
     #nav ul{
         list-style:none;
         margin:0;
         padding:0;
     }
     
     /* 横排：控制导航高度 ，使用float 指定每个li的宽度和高度 */
     #nav li{
         float:left;
         width:100px;
         height:30px;
         line-height:30px;  /* 文字垂直居中 指定行高为li高度 自动垂直居中 */     
     }
     
     /* 将a标签区块化就可以指定高度 */
     #nav a{
         display:block;
         height:100%;
         text-decoration:none;   /* 取消a标签下划线 */
         text-align:center;      /* 文字水平居中显示 */
         background-color:#000;
         color:#fff;
     }
     
     /* 鼠标放上效果 */
     #nav a:hover{
         background-color:#eee;
         color:#000;
     }

---

二、布局相关

• 清除浮动
  方法1（推荐）—— 在父级div定义 伪类:after 和 设置 zoom 属性。

  原理：E8以上和非IE浏览器才支持 :after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题。
  优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
  缺点：代码较多

  方法2 —— 浮动项结尾处加空div标签 clear:both

  优点：简单，代码少，浏览器支持好，不容易出现怪问题；
  缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空 div，很不友好；
  建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法。

  方法3 —— 父级div定义 overflow:hidden

  原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
  优点：简单，代码少，浏览器支持好
  缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
  建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

  方法4 —— 给父级div定义高度 height

  优点：代码简单，易掌握理解；
  缺点：只适用于固定高度的布局，缺失灵活性；
  建议：不推荐使用。

  参考： 传送门
  示例：

<!-- HTML代码 -->
<!-- 方法1 -->
<div class="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>

<style type="text/css">
	/* 清除浮动代码 */
	.clearfloat:after {
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0;
	}
	.clearfloat { zoom:1 }
</style>

--------------------------------------
<!-- 方法2 -->
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>
<div class="div2">
    div2
</div>

<style type="text/css">
	/* 清除浮动代码 */
	.clearfloat { clear:both }
</style>

--------------------------------------
<!-- 方法3 -->
<div class="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>

<style type="text/css">
	/* 清除浮动代码 */
	.clearfloat:after {
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0;
	}
	.clearfloat { zoom:1 }
</style>