好看的导航栏

最新推荐文章于 2022-03-11 16:05:43 发布

优雅的男子

最新推荐文章于 2022-03-11 16:05:43 发布

阅读量1.1k

点赞数

分类专栏：网页前端

本文链接：https://blog.csdn.net/hunhunpanda/article/details/19838119

版权

网页前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用css的float属性，使ul的li漂浮成为水平导航栏，具体实现如下：

<!DOCTYPE html>
<html>
<head>
<style>
ul{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
}
li{
  float:left;
}
a:link,a:visited{
	display:block;
	width:120px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:green;
	text-align:center;
	padding:4px;
	text-decoration:none;
	text-transform:capitalize;
}
a:hover,a:active{
    background-color:blue;
}

</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

具体效果如下：