选项卡html案例 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>骆驼书</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.clearfix::after {
				content: "";
				display: block;
				clear: both;
			}

			.clearfix {
				*zoom: 1;
			}

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				font-size: 100%;
				font-weight: normal;
			}
			i{
				font-style: normal;
			}

			ul {
				list-style: none;
			}

			a {
				text-decoration: none;
				color: #000000;
			}

			.wrap {
				width: 1000px;
				margin: 30px auto;
			}
			.wrap .header{
				border-bottom: 2px solid #00afd1;
			}
			.wrap .header h2{
				font:bold 23px/40px "微软雅黑";
				color: #00afd1;
				display: inline-block;
			}
			.wrap .header span{
				font-size: 15px;
				color: #999999;
				margin-left: 20px;
			}
			.wrap .nav ul{
				float: left;
			}
			.wrap .nav .nav-left ul li{
				float: left;
				margin: 13px 30px 13px 0;
			}
			.wrap .nav .nav-left ul a{
				display: inline-block;
				padding: 4px;
			}
			.wrap .nav .nav-left ul li:hover{
				color: #fff;
				background-color: #00afd1;
				border-radius: 3px;
			}
			.wrap .nav-left span{
				float: right;
				margin-top: 13px;
			}
			.wrap .nav-left span i{
				margin-left: 5px;
			}
			.wrap .nav ul li{
				float: left;
				margin: 0 32px 0 0;
			}
			.wrap .nav ul .rig{
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="header">
				<h2>骆驼书</h2>
				<span>读骆驼书，行万里路</span>
			</div>
			<div class="nav">
				<div class="nav-left clearfix">
					<ul>
						<li><a href="javascript:;">专题</a></li>
						<li><a href="javascript:;">亚洲</a></li>
						<li><a href="javascript:;">欧洲</a></li>
						<li><a href="javascript:;">北美洲</a></li>
						<li><a href="javascript:;">太平洋</a></li>
					</ul>
					<span><a href="javascript:;">更多<i>&gt;</i></a></span>
				</div>
				<ul>
					<li><img src="images/conTabPic_03.jpg"></li>
					<li><img src="images/conTabPic_05.jpg"></li>
					<li><img src="images/conTabPic_07.jpg"></li>
					<li class="rig"><img src="images/conTabPic_09.jpg"></li>
				</ul>
			</div>
		</div>
	</body>
</html>

posted @ 2020-02-16 13:32  JackieDYH  阅读(2)  评论(0)  编辑  收藏  举报  来源