首先写一下html结构:
<div id="nav">
<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>
</ul>
</div> |
然后简单的 写一下样式:
body{font-family: "微软雅黑";}
.active{
background: -webkit-linear-gradient(top,red,yellow);
}
ul{float: left;width: 500px;height: 30px;background: red;line-height: 30px;}
li{list-style: none;float: left;}
a{text-align: center;line-height: 30px;display: block;color: #fff;width: 70px;text-decoration: none;}
a:hover{background: green;} |
最后怎样才能高亮显示当前导航呢,js语句如下;
<script type="text/javascript">
var myNav=document.getElementById("nav").getElementsByTagName("a");
var currenturl = document.location.href;
for(var i=0;i<myNav.length;i++){
var aurl=myNav.getAttribute("href");
if(currenturl.indexOf(aurl)!=-1){
myNav.className="active";
myNav[0].className="";
}
}
</script> |
织梦教程网络上有很多,但没有一个像自由织梦(www.freedede.cn)这样教程比较齐全的,现在好了,学习开发使用织梦dedecms系
统不用东奔西跑了,直接来自由织梦就好了,提供织梦cms详细的使用教程和织梦建站教程,包括dedecsm的安装、模板开发教程、安
全配置等,DedeCMS从入门到精通建站就是如此轻松。 |
|