CSS 练习 翻页效果

例子一：翻页样式

制作思路:

1. 创建结构：ul.pagenation>(li>a{$})*11，按tab键快速建立。再逐个修改内容。
2. 去掉ul原本样式:list-style: none;,设定外面盒子的样式

.pagenation{
			list-style: none;
			padding: 0;
			width: 600px;
			height: 40px;
			border: 1px solid black;
			margin: 50px auto 0;
			text-align: center;

4. 为了让页码横向排列：转化为内联块样式，并在父级设定：text-align: center;使其居中。
5. 设置页码外面的盒子，也就是li的样式：高度，左右间距，转化为内联块元素。使得内联块垂直居中使用margin而不要用line-height。

.pagenation li{
			/* width: ; */
			height:26px;
			margin: 7px 5px 0;
			display: inline-block;

7. 设置页码的格式：字体/去掉下划线/转化为内联块/设置高度和line-height，padding,background

.pagenation li a{
			text-decoration: none;
			font-size: 12px;
			font-family: 'Microsoft Yahei';
			color: black;
			display: inline-block;
			height: 26px;
			line-height: 26px;
			padding: 0 10px;
			background-color: gold;