学习笔记 css水平导航

最新推荐文章于 2025-05-07 11:15:37 发布

原创最新推荐文章于 2025-05-07 11:15:37 发布 · 1.5w 阅读

3 ·

CC 4.0 BY-SA版权

栽树同时被 3 个专栏收录

89 篇文章

订阅专栏

学习笔记

37 篇文章

订阅专栏

CSS

32 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现水平导航栏的布局和样式。通过设置ul和li元素的浮动属性，以及对a标签的样式调整，实现了响应式且美观的水平导航效果。文章包含了完整的HTML和CSS代码示例。

学习笔记 css水平导航

<!DOCTYPE html>
<html>
	<head>
	  <style>
		ul {
			margin: 0px;
			padding: 0px;
			list-style: none;
			width: 580px;
			float: left;
			background: url(mainNavBg.gif) repeat-x;
		}
		ul li {
			float: left;
		}
		ul a {
			display: block;
			padding: 0px 24px;
			color: #fff;
			text-decoration: none;
			background: url(mainNavBorder.gif) repeat-y left top;
		}
		li:hover a {
			color: blue;
		}

		.first a {
			background: none;
		}
	  </style>
	</head>
	<body>
		<ul>
			<li class="first"><a href="">11111</a></li>
			<li><a href="">2222222222</a></li>
			<li><a href="">333</a></li>
			<li><a href="">4444444444444</a></li>
			<li><a href="">55555</a></li>
		</ul>
	</body>
</html>