css+div（一）用 dl 列表实现导航卡片

最终成果：

1.html部分

<div>
<dl>
	<dt><a href="#a">军事新闻</a><a href="#b">财经资讯</a><a href="#c">娱乐资讯</a></dt>	
	<dd>
		<ul id="a">
			<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><a href="#">more....</a></li>
		</ul>
		<ul id="b">
			<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><a href="#">more....</a></li>
		</ul>
		<ul id="c">
			<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><a href="#">more....</a></li>
		</ul>
	</dd>
</dl>
</div>

2.css部分

2.1规划页面

dl{ /* 定义列表样式*/
	position: absolute;
	width: 460px;
	height: 170px;
	border: 10px solid #EEEDED;
}
dt{ /* 定义 dt 标签（菜单）的样式*/
	position: absolute;
	right: 1px;
}
dd{/* 定义 dd 标签（菜单内容）的样式*/
	margin: 0;
	width: 460px;
	height: 170px;
	overflow: hidden;
}

通过absolute定位，将导航菜单 dt 放至 dl 列表的右侧，
设置overflow: hidden隐藏超出指定高度和宽度的内容。

2.2设置菜单项的链接

dt a{
	display: block;
	margin: 1px;
	width: 80px;
	height: 56px;
	text-align: center;
	font: 700 12px/55px "宋体";
	color: #FFFF00;
	text-decoration: none;
	background: #666600;
}
dt a:hover{/* 鼠标悬停时菜单项的颜色*/
	background-color: orange;
}

设置display: block 令 <a> 标签为块元素，宽度为 dl 卡片的 1/6 。
a:hover 设置鼠标悬停时菜单项的颜色

2.3设置 ul 列表和 li 列表项

ul{
	margin: 0;
	padding: 0;
	width: 460px;
	height: 170px;
	list-style-type: none;
	background-color: gainsboro;
}
li{
	width: 405px;
	height: 27px;
	padding-left: 20px;
	font: 12px/27px "宋体";
}

将<ul>的宽高设置于 dl 相同，这样才能保证每个内容项刚好填满 dl ，另两个内容项的内容则刚好隐藏起来。
font: 12px/27px “宋体”，表示字体大小为12px， 行间距为27px。