制作类似csdn网站的导航栏

最新推荐文章于 2024-04-08 20:26:16 发布

codroid

最新推荐文章于 2024-04-08 20:26:16 发布

阅读量1.1k

点赞数 1

文章标签： HTML CSS 导航

本文链接：https://blog.csdn.net/codroid/article/details/9882593

版权

首先写html代码，如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="navigation">
      <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><a href="#">导航6</a></li>
        <li><a href="#">导航7</a></li>
        <li><a href="#">导航8</a></li>
        <li><a href="#">导航9</a></li>
        <li><a href="#">导航0</a></li>
      </ul>
    </div>
</body>
</html>

然后编写其css样式，如下：

.navigation{
	width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
ul{
	list-style: none;
}
li{
	float: left;
}
a{
    display:block;
    height: 42px;
    width:50px;
    line-height: 42px;
    padding: 0 10px;
    color: white;
    background-color: #c00;
    text-decoration: none;
}
a:HOVER {
	background-color: #900;
}

下面是效果图：