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

html使用Frameset快速方便制作导航栏

2015-10-16 17:56 211 查看

制作导航栏的方法有很多啦，今天来介绍个方便快捷的方法分享给大家！

就是w3cschool里面的framest。貌似很多大网站都在用呢；废话不多说了，直接开始

步骤1：新建一个工程目录，里面创建6个html文件分别是

menu.html:主页面:

page1.html，page2.html，page3.html，page4.html，page5.html；

这里随便选一个用来制作导航栏，这里我选的是page4.html；

关键代码如下，1：编辑主页面

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>

.....

</head>
<frameset rows="30,*" framespacing="0" style="margin-top: 20px">
<frame class="frame" src="page4.html" scrolling="no" frameborder="0" style="margin: 0;" >
<frame class="frame" src="page1.html" name="show" frameborder="0" noresize="noresize" scrol	ling="no">
</frameset>
</html>

2.制作导航菜单page4.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding: 0;}
table{
height: 32px;width: 390px;
background: #F6F6F6;
}
td{
width: 32px;height: 32px;
/*border:1px solid #000;*/
text-align: center;
}
table span{
display: inline-block;/*将span转成块级元素*/
width: 97px;height: 32px;
line-height: 32px;
border-radius: 3px;
}
.chanSpan{
background: #C40839;
color: #FFF;
}
</style>
<script>
window.onload = function () {
/** 设置标签被点击时切换样式 */
var aSpan = document.getElementsByTagName("span");
for(var i=0;i<aSpan.length;i++){
aSpan[i].id = i;
aSpan[i].onclick = function(){
for(var j=0;j<aSpan.length;j++){
aSpan[j].className = "";
}
aSpan[this.id].className = "chanSpan";
}
}
}
</script>
</head>
<body>
<table id="tab1" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td><a href="page1.html" target="show"><span class="chanSpan">推荐</span></a></td>
<td><a href="page2.html" target="show"><span class="spans" >导航</span></a></td>
<td><a href="page3.html" target="show"><span class="spans" >视频</span></a></td>
<td><a href="page5.html" target="show"><span class="spans" >购物</span></a></td>
</tr>
</table>
</body>
</html>

3.大功告成，往其他的html中随便添点东西就可以看到效果啦

是不是很简单呢？

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

标签： html 导航代码

相关文章推荐

新的分享

章节导航