简明现代魔法 -> CSS层叠样式表 -> 简单的CSS导航菜单制作

简单的CSS导航菜单制作

2009-10-27

<ul>主要用来描述列表型内容，每一个列表数据用<li></li>来描述。

导航其实也是一种列表，用ul元素比div元素要轻巧。

效果演示

• 首页
• 新闻
• 杂志
• 活动
• 展会
• 人才
• 视频
• 黄页

CSS代码

#nav li{
	float:left; /*定义块状对象浮动方式*/
	list-style-type:none; /*去掉<li>标签前的小黑点*/
	font-family:Verdana, 宋体;
	font-size:14px;
	}
#nav li a{
	color:#000000; /*文字颜色*/
	text-decoration:none; /*去掉链接的下划线*/
	display:block; /*以块状对象呈现*/
	width:75px; /*块的宽度*/
	height:22px; /*块的高度*/
	background-color:#ececec; /*背景颜色*/
	text-align:center; /*文字居中*/
	margin-left:2px; /*li块之间相隔2px*/
	}
#nav li a:hover{
	background-color:#bbbbbb;
	}

列表元素默认是从上到下的方式排列，但是我们需要它们横向排列。只要将li元素的display方式改为block，然后将浮动float设为left即可实现。

display:block;使得a链接对象由行间对象变成块对象，从而具有宽度、高度等属性。

HTML代码

<ul id="nav">
    	<li>首页</li>
        <li>新闻</li>
        <li>杂志</li>
        <li>活动</li>
        <li>展会</li>
        <li>人才</li>
        <li>视频</li>
        <li>黄页</li>
</ul>