一、文本相关
- 大小写转换
文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母,或每个单词的首字母大写。实例:
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>