列表html案例 

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

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

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

			ul {
				list-style: none;
			}

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

			.wrap {
				width: 1200px;
				margin: 30px auto;
			}

			.wrap .k_top {
				/* font-size: 22px;
				font-weight: bold;
				line-height: 40px; */
				font: bold 22px/40px "微软雅黑";
				border-bottom: 2px solid #c1c1c1;
				color: red;
			}

			.wrap .k_ul {
				margin-top: 20px;
				font-size: 15px;
			}

			.wrap ul {
				float: left;
				margin-right: 60px;
			}

			.wrap ul i {
				display: inline-block;
				width: 4px;
				height: 4px;
				background-color: #d3d3d3;
				vertical-align: middle;
			}

			.wrap ul li {
				line-height: 30px;
				width: 350px;
			}

			.wrap ul .bt {
				font-size: 18px;
				margin-bottom: 10px;
			}

			.wrap ul li span {
				float: right;
				font-size: 14px;
				color: #999999;
			}
			.wrap .mr{
				margin-right: 0;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="k_top">
				<h2>考试题库</h2>
			</div>
			<div class="k_ul clearfix">
				<ul class="zt">
					<li class="bt">真题</li>
					<li>
						<i></i>
						<a href="javascript:;">
							16公共基础知识:历史-占田制占田制
							<span>08-04</span>
						</a>
					</li>
					<li>
						<i></i>
						<a href="javascript:;">
							16公共基础知识:历史-占田制历史历史
							<span>08-04</span>
						</a>
					</li>
					<li>
						<i></i>
						<a href="javascript:;">
							16公共基础知识:历史-占田制历史
							<span>08-04</span>
						</a>
					</li>
					<li>
						<i></i>
						<a href="javascript:;">
							16公共基础知识:历史-占田制
							<span>08-04</span>
						</a>
					</li>
					<li>
						<i></i>
						<a href="javascript:;">
							16公共基础知识:历史-占田制
							<span>08-04</span>
						</a>
					</li>
				</ul>

				<ul class="mn">
					<li class="bt">模拟题</li>
					<li>
						<i></i>
						<a href="javascript:;">
							16公共基础知识:历史-占田制
							<span>08-04</span>
						</a>
					</li>
					<li>
						<i></i>
						<a href="javascript:;">
							16公共基础知识:历史-占田制
							<span>08-04</span>
						</a>
					</li>
					<li>
						<i></i>
						<a href="javascript:;">
							16公共基础知识:历史-占田制历史
							<span>08-04</span>
						</a>
					</li>
					<li>
						<i></i>
						<a href="javascript:;">
							16公共基础知识:历史-占田制
							<span>08-04</span>
						</a>
					</li>
					<li>
						<i></i>
						<a href="javascript:;">
							16公共基础知识:历史-占田制
							<span>08-04</span>
						</a>
					</li>
				</ul>

				<ul class="mr">
					<li class="bt">每日一练</li>
					<li>
						<i></i>
						<a href="javascript:;">
							16公共基础知识:历史-占田制历史
							<span>08-04</span>
						</a>
					</li>
					<li>
						<i></i>
						<a href="javascript:;">
							16公共基础知识:历史-占田制
							<span>08-04</span>
						</a>
					</li>
					<li>
						<i></i>
						<a href="javascript:;">
							16公共基础知识:历史-占田制
							<span>08-04</span>
						</a>
					</li>
					<li>
						<i></i>
						<a href="javascript:;">
							16公共基础知识:历史-占田制
							<span>08-04</span>
						</a>
					</li>
					<li>
						<i></i>
						<a href="javascript:;">
							16公共基础知识:历史-占田制
							<span>08-04</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

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