i 标签显示斜体文本效果。与em类似。必须成对使用
终于搞懂了CSS实现三角形图标的原理)
li中包含文字时，设置文字的颜色，在CSS中直接在li里设置是成功不了的，应该在a标签中设置，个人理解就是这是a标签的特殊属性，当你设置了li的,a标签的属性依然会覆盖。
vertical:middle;
上面的属性可以用于设置垂直居中
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>分页</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
}
.content{
width: 800px;
margin: 100px;
color: #333;
font-size: 20px;
}
li{
display: inline;
}
ul ul{
display: inline;
}
.sum,.current{
padding-right: 20px;
}
.firstPage,.prePage,.nextPage,.lastPage{
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
}
.firstPage,.prePage{
border-top: 10px solid transparent;
border-right: 10px solid gray;
border-bottom: 10px solid transparent;
margin-right: 10px;
}
.firstPage:hover,.prePage:hover{
border-top: 10px solid transparent;
border-right: 10px solid red;
border-bottom: 10px solid transparent;
}
.nextPage,.lastPage{
border-top: 10px solid transparent;
border-left: 10px solid gray;
border-bottom: 10px solid transparent;
margin-left: 10px;
}
.nextPage:hover,.lastPage:hover{
border-top: 10px solid transparent;
border-left: 10px solid red;
border-bottom: 10px solid transparent;
}
ul ul>li{
display: inline-block;
text-align: center;
width: 25px;
border: 1px dotted pink;
}
ul ul>li:hover{
background: red;
cursor: pointer;
font-weight: bold;
}
ul ul>li a:hover{
color: white;
}
.now{
background: red
}
.line{
display: inline-block;
width: 2px;
height: 20px;
background: gray;
vertical-align: middle;
}
</style>
</head>
<body>
<ul class="content">
<li class="sum">总页数：<i>9</i></li>
<li class="current">当前页:<i>3</i></li>
<li class="line"></li>
<li><a href="#"><span class="firstPage"></span></a></li>
<li><a href="#"><span class="prePage"></span></a></li>
<li class="list">
<ul>
<li><a href="#">1</a></li>
<li class="now"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
</ul>
</li>
<li><a href="#"><span class="nextPage"></span></a></li>
<li><a href="#"><span class="lastPage"></span></a></li>
<li class="line"></li>
</ul>
</body>
</html>
