简明现代魔法 -> 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>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们