HTML 的静态网页分页样式

HTML 的静态网页分页样式

page.css代码如下:

#page-normal{
	color:#ff9655;
	text-align:center;
	font-size:0px;
}

#page-normal a{
	border:1px solid #ff9600;
	padding:5px 7px;
	color:#ff9655;
	text-decoration:none;
	font-size:15px;
	margin-right:10px;
}

#page-normal a:hover{
	border:1px solid #ff9600;
	padding:5px 7px;
	background-color:#ffbe94;
}

#page-prev{
	border:1px solid #ff9600;
	color:#ff9600;
	padding:5px 7px;
	font-size:15px;
	margin-right:10px;
	}
	
#page-prev i{
	margin-right:5px;
	}

#page-next i{
	margin-left:5px;
	}

#page-current{
	border:1px solid #ff9600;
	padding:5px 7px;
	background-color:#ffbe94;
	font-size:15px;
	margin-right:10px;
}

#page-ellipsis{
	font-size:15px;
	margin-right:10px;
}

main.html代码如下:

<head><link href="../css/page.css" rel="stylesheet" type="text/css"></head>
<body>
<div id="page-normal">
<span id="page-prev"><i></i>上一页</span>
<span id="page-current">1</span>
<a herf="#">2</a>
<a herf="#">3</a>
<a herf="#">4</a>
<a herf="#">5</a>
<a herf="#">6</a>
<a herf="#">7</a>
<span id="page-ellipsis">...</span>
<a herf="#">148</a>
<a herf="#">149</a>
<a herf="#">150</a>
<a id="page-next" href="#">下一页<i></i></a>
</div>
</body>
展开阅读全文

没有更多推荐了,返回首页