<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*
				jpg 大图片不透明背景 有损压缩 容量相对最小  webp（格式与jpg相同，容量更小 但不支持所有浏览器）
				png 大图片透明背景 小图片色彩丰富 图标  无损压缩 容量小
				gif 小图片色彩丰富 动图
				svg 色彩单一 显示效果好
			*/
			.box{
				height: 2.625rem;
				width: 37.625rem;
				margin: 0 auto;
				text-align: center;
				border: 1px solid black;
				line-height: 40px;
			}
			.box li{
				display: inline-block;
				height: 1.625rem;
				text-align: center;
			}
			.box li a{
				display: inline-block;
				text-decoration: none;
				font: 0.75rem "arial black";
				color: #000000;
				height: 1.625rem;
				background-color: gold;
				padding: 0 5px;
				line-height: 1.625rem;
			}
			
			.menu{
				height: 40px;
				width: 958px;
				border: 1px solid #000000;
				margin: 50px auto;
				list-style: none;
				text-align: center;
				line-height: 40px;
			}
			.menu li{
				display: inline-block;
			}
			
			.menu li a{
				display: block;
				text-decoration: none;
				font-size: 14px;
				font: "microsoft yahei";
				color: #333;
			}
			
			.menu li span{
				margin: 0 20px;
			}
			
			
			
			.box2{
				padding: 0px;
				margin: 0 auto;
				height: 40px;
				width: 958px;
				border: 1px solid black;
				background-color: #55a8ea;
			}
			.box2 li{
				line-height: 40px;
			}
			#new ,.box2 li{
				text-align: center;
			}
			.box2 li,.box2 li a{
				display: inline-block;
			}
			.box2 li a{
				width: 6.25rem;
				text-decoration: none;
				color: white;
				font-size: 14px;
				font-family: "microsoft yahei";
			}
			
			.box2 li:hover{
				background-color: #00619f;
			}
			
			#new{
				width: 25px;
				height: 15px;
				line-height: 15px;
				position: relative;
				font-size: 6px;
				top: -25px;
				left: -173px;
				border-radius: 5px;
				color: white;
				background-color: darkorange;
			}
		</style>
	</head>
	<body>
		<ul class="box">
			<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><span>....</span></li>
			<li><a href="">10</a></li>
			<li><a href="">11</a></li>
			<li><a href="">12</a></li>
			<li><a href="">13</a></li>
			<li><a href="">14</a></li>
			<li><a href="">下一页</a></li>
		</ul>
		
		<ul class="menu">
			<li><a href="#">首页</a></li>
			<li><span>|</span></li>
			<li><a href="#">首页</a></li>
			<li><span>|</span></li>
			<li><a href="#">首页</a></li>
			<li><span>|</span></li>
			<li><a href="#">首页</a></li>
			<li><span>|</span></li>
			<li><a href="#">首页</a></li>
			<li><span>|</span></li>
			<li><a href="#">首页</a></li>
			<li><span>|</span></li>
			<li><a href="#">首页</a></li>
		</ul>
		
		<ul class="box2">
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li id="new">
				new
			</li>
		</ul>
	</body>
</html>

 

更多推荐

HTML导航条和翻页栏