列表导航栏HTML/CSS

HTML部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>文档</title>
</head>

<body>
<div id="menu">
    <ul>
        <li><a href="#">菜单项1</a></li><li><a href="#">菜单项2</a></li><li><a href="#">菜单项3</a></li><li><a href="#">菜单项4</a></li><li><a href="#">菜单项5</a></li><li class="last"><a href="#">菜单项6</a></li>
    </ul>
</div>
</body>
</html>

css部分

/* CSS Document */
body {
	font-size: 13px;
	font-family: "微软雅黑";
	text-align: center;
}

#menu {
	width: 500px;
	margin: 10px auto;
}

#menu ul {
	margin: 0px;
	padding: 0px;
	background-color: #eee;
	list-style: none;
	line-height: 36px;
	text-align: center;
}

#menu ul li {
	display: inline;
	padding: 0 12px;
	border-right: dashed 1px #ccc;
}

#menu ul li.last {
	border-right: 0px;
}

a:link, a:visited {
	color: #000;
	text-decoration: none;
}
a:hover {
	color: #f00;
}
posted @   耿集  阅读(58)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示