HTML 制作简单的导航栏

最新推荐文章于 2024-07-26 14:14:21 发布

wangbinXMU

最新推荐文章于 2024-07-26 14:14:21 发布

阅读量3.2k

点赞数 1

分类专栏：前端 DOM HTML5 CSS

本文链接：https://blog.csdn.net/wangbinXMU/article/details/79080700

版权

前端 DOM 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML5

4 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

一个简单的导航栏

<style>
ul li {
    
	list-style:none; /*去掉li显示的前面的圆点*/
	width: 120px;
	text-align: center;
	float: left;  /*浮动在左边，并且所有li块排成一行*/
}
a {
	border-radius:4px;
        color:#000;
        text-decoration:none; /*去掉a标签默认的下划线*/
	display: block;   /*让a保持和li同高宽*/
}
a:hover{
	background:green;
}

</style>
</head>
<body>
	<ul>
		<li class="active"><a href="index.html">首页</a></li>
		<li><a href="information.html">旅游资讯</a></li>
		<li><a href="###">机票订购</a></li>
		<li><a href="###">风景欣赏</a></li>
		<li><a href="###">公司简介</a></li>
	</ul>
</body>

当然由于内部 li 元素的浮动带来的ul的高度坍塌问题，可采用清除浮动的方式解决，可参考我的另一篇博客。