您的位置：首页 > 其它

简易实现导航条

2016-01-24 21:47 316 查看
仿各大网站实现的导航条：

鼠标上移，字体、颜色、背景都变化；鼠标移除，恢复默认

需要注意：

1、设置块状元素的浮动（float）布局

2、内联元素是无法设置高度和宽度的，块状元素可以

HTML代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>导航条</title>
<link rel="stylesheet" type="text/css" href="navigation.css">
</head>
<body>
<div class="nav">
<ul class="">
<li><a href="">我的主页</a></li>
<li><a href="">新闻</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">体育</a></li>
<li><a href="">网上购物</a></li>
<li><a href="">度假休闲</a></li>
</ul>
</div>
</body>
</html>


CSS代码：

body,div{
padding: 0px;
margin: 0px;
}

.nav{
width: 560px;
height: 35px;
background-color: #cccccc;
margin: 0px auto;
margin-top: 30px;
}
.nav ul{
width: 560px;
height: 35px;
list-style: none;
}
.nav ul li{
float: left;
/*width: 100px;*/
line-height: 35px;
text-align: center;
margin-right: 1px;
/*padding: 0 20px;*/
}
a{
font-size: 20px;
text-decoration: none;
height: 35px;
display: block;
float: left;
padding: 0 10px;
}
a:hover{
text-decoration: underline;
font-weight: bold;
color: #ffffff;
background-color: darkorange;
}


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航