制作类似csdn网站的导航栏

来源：互联网发布：天猫魔盒上的直播软件编辑：程序博客网时间：2024/05/14 13:26

首先写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;}

下面是效果图：