img src="image/3.jpg" alt="" width="1023" height="400">
</div>
<div class="paging">
<div class="previous"><</div>
<div class="next">></div>
</div>
<ul class="button">
<li class="on"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
14. CSS元素类型
1> 块级元素(display:block)
- 例如：h p ul ol dl li(list-item) form div body html
- 前后元素都会换行，可以设置宽高度
- margin：auto进行居中
- 当使用了脱离正常文档流的样式（float、absolute、fixed）， 元素作为块级元素显示时无法以正常方式（margin:auto）居中
2> 内联元素、行内元素(display:inline）
- a b u i strong span
- 都在一行，前后元素不会换行
- 无法设置宽高度和上下外边距
3> 内联块、行内快(display:inline-block)
- input
- 在一行的元素但是拥有了块的特质（除了占一行）
15. 文字线框样式
vertical-align:bottom/top/baseline/middle; /*不修改默认基线*/
16. overflow溢出样式
overflow: hidden\scroll(滚动)\auto(超出滚动，不超默认)\visible(默认的)
17. 透明样式
1>
opacity：0-1; /* IE 9+ */
2>
filter：alpha(opacity=1-100); /* IE 8~9 */
3>
background:rgba(0-255, 0-255, 0-255 0-1); /*三原色 red green blue alpha*/
background：#21D24C；/*十六进制数值，两个值一个颜色*/
18. 阴影样式
1> 盒子阴影
box-shadow: *px *px *px *px #000000; /* 内阴影， X方向，Y方向，模糊值，阴影大小，阴影颜色 */
2> 文字阴影
text-shadow：inset *px *px *px *px #000000; /* X方向，Y方向，模糊值，阴影大小，阴影颜色 */
19. CSS3 选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS3 select</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.list1 li:first-child {
background: orange; /*第一个*/
}
.list1 li:first-child + li {
background: pink; /*第一个的下一个*/
}
.list1 li:last-child {
background: red;
}
.list1 li:nth-child(3) {
background: black; /* 正数*/
}
.list1 li:ntc-last-child(3){
background: blue; /*倒数*/
}
.list2 li:last-child:not(:first-child) {
background: #F200E1; /*判断 除了第一个元素*/
}
.box div.box1{
background: yellow
}
</style>
</head>
<body>
<ul class="list1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<ul class="list2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="box">
<div class="box1">99</div>
<div class="box1">99</div>
<div class="box1">99</div>
<div class="box2">88</div>
<p class="box1">111</p>
<span class="box1">234</span>
</div>
</body>
</html>
20. 锚伪类（主针对a标签）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<