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

来源：互联网发布：网络零售交易额指什么编辑：程序博客网时间：2024/06/08 06:27

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

就是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" scrolling="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中随便添点东西就可以看到效果啦

是不是很简单呢？

0 0