请问这种导航栏效果用html css怎么做？
3个回答
展开全部
我给你写了一段非常简单的代码 你粘到自己的代码书写工具预览一下看一下是不是你要的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{ margin:0; padding:0;}
ul,h1,h2,h3,h4,h5,h6,p,li{margin:0;padding:0;list-style:none;}
.nav{ width:1000px; height:40px; float:left; background:#09F;}
.nav ul li{ width:60px; height:40px; float:left;}
.nav ul li a{ width:60px; height:40px; line-height:40px; text-align:center; float:left; color:#FFF; display:block;}
.nav ul li a:hover{ background:#900;}
</style>
</head>
<body>
<div class="nav">
<ul>
<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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{ margin:0; padding:0;}
ul,h1,h2,h3,h4,h5,h6,p,li{margin:0;padding:0;list-style:none;}
.nav{ width:1000px; height:40px; float:left; background:#09F;}
.nav ul li{ width:60px; height:40px; float:left;}
.nav ul li a{ width:60px; height:40px; line-height:40px; text-align:center; float:left; color:#FFF; display:block;}
.nav ul li a:hover{ background:#900;}
</style>
</head>
<body>
<div class="nav">
<ul>
<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>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
增加hover事件，设置区域的background-color为白色就行了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
