您的位置：首页 > Web前端 > JavaScript

CSS JavaScript DOM写的仿谷瀑网搜索导航

2016-06-17 14:33 453 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.wrap{
margin:0 auto;
border:1px solid #FFF;
}
.menu {
width: 80%;
height: 40px;
margin: 0 auto;
margin-top: 50px;
border-top:1px solid #F1F1F1;
}
.menuin {
padding: 0;
margin: 0;
float: left;
}
.menu3 {
float: right;
}
.menuin ul {
padding: 0;
margin: 0;
list-style: none;
}
.menu ul li a {
text-decoration: none;
color: #000;
font-weight: bold;
font-size: 14px;
}
.menu ul li a:hover {
color: RGB(178,0,0);
}

.menuin ul li {
float: left;
text-align: center;
width: 100px;
line-height: 40px;
border-top:3px solid #FFF;
}
.menu3{
background-color:#F2F2F2;
line-height:40px;
}
.menu3 a{
text-decoration:none;
font:Arial, Helvetica, sans-serif;
font-size:12px;
padding:0 9px;
color:#999999;
border-right:1px solid #999999;
}
.menu3 a:hover{
color:#b20000;
}
.banner_list5{
width:80%;
height:137px;
margin:0 auto;
background-image:url(cxz.bmp);
background-repeat:no-repeat;
}
.cl{
clear:both;
}
</style>
<script>
var m=document.getElementsByTagName("li");
function moveOver(cnt)
{
m[cnt].style.borderTop="3px solid #000000";
}
function moveOut(cnt)
{
m[cnt].style.borderTop="";
}
</script>
</head>

<body>
<div class="werap">
<div class="menu">
<div class="menuin">
<ul>
<li><a href=# onMouseOver="moveOver(0)" onMouseOut="moveOut(0)">首页</a></li>
<li><a href=# onMouseOver="moveOver(1)" onMouseOut="moveOut(1)">环宝通</a></li>
<li><a href=# onMouseOver="moveOver(2)" onMouseOut="moveOut(2)">建站服务</a></li>
<li><a href=# onMouseOver="moveOver(3)" onMouseOut="moveOut(3)">广告服务</a></li>
<li><a href=# onMouseOver="moveOver(4)" onMouseOut="moveOut(4)">应用市场</a></li>
<li><a href=# onMouseOver="moveOver(5)" onMouseOut="moveOut(5)">联系我们</a></li>
</ul>
</div>
<div class="menu3"> <a href=#>加入谷瀑供应商</a> <a href=#>加入谷瀑采购商</a> </div>
</div>
<div class="cl"></div>
<div class="banner_list5"></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航