float实现横向导航

最新推荐文章于 2020-06-15 19:08:30 发布

makarov5

最新推荐文章于 2020-06-15 19:08:30 发布

阅读量480

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML+CSS 文章标签：导航 css 横向导航

本文链接：https://blog.youkuaiyun.com/makarov5/article/details/51232738

HTML+CSS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用CSS进行列表样式设计的例子。通过简单的HTML结构结合CSS属性如float, display, 和 hover 效果，实现了列表项的水平布局及鼠标悬停时的背景变化。此样式适用于导航栏或菜单设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<style>
ul {
	float:left;//整个列表向左浮动
	width:100%;
	margin:0;
	padding:0;
	}
a {
	text-decoration:none;
	color:#fff;
	font-size:20px;
	text-align:center;
	line-height:1.5em;
	background-color:#999;
	border-right:solid #FFF 1px;
	float:left;
	width:5em;
	}
li {
	display:inline;//行内显示
	}
a:hover {
	background-color:#CCC;//鼠标指向改变背景
</style>
</head>
<body>
<ul>
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
</ul>
</body>
</html>