HTML简单页面页码的设计

<!DOCTYPE HTML>
<html>
<head>
	< >HTML页码设置</ >
	<  http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\"/>
	<style type=\"text/css\">
		.page-nav{
			height: 60px;
			width:100%;
			line-height: 60px;
			text-align: center;
			overflow: hidden;			
		}
		.page-nav>ul{
			overflow: hidden;
			margin: 0 30%;
			width:80%;	
		}
		.page-nav>ul>li{
			float: left;
			list-style-type: none;
			margin-right:20px;
		}
	</style>
</head>

<body>
	<div class=\'page-nav\'>
		<ul>
			<li><a href=\"#\">首页</a></li>
			<li><a href=\"#\">上一页</a></li>
			<li><a href=\"#\">1</a></li>
			<li><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=\"#\">下一页</a></li>
			<li><a href=\"#\">末页</a></li>
		</ul>
	</div>
</body>
</html>

在分页时要注意的主要是列表的css属性，如何才能让列表在同一列，如何才能隐藏ul列表的小黑点等等

1.li中的元素水平排列,关键属性是float: left;
2.取消 .il 和 .ul 前面的黑点：list-style: none;

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章