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

最新推荐文章于 2024-04-14 12:10:13 发布

qq_20332471

最新推荐文章于 2024-04-14 12:10:13 发布

阅读量1.4k

点赞数

分类专栏： html 文章标签： html 导航代码

本文链接：https://blog.csdn.net/qq_20332471/article/details/49181709

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

是不是很简单呢？

qq_20332471

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html使用Frameset快速方便制作导航栏

制作导航栏的方法有很多啦，今天来介绍个方便快捷的方法分享给大家！就是w3cschool里面的framest。貌似很多大网站都在用呢；废话不多说了，直接开始步骤1：新建一个工程目录，里面创建6个html文件分别是menu.html:主页面:page1.html，page2.html，page3.html，page4.html，page5.html；这里随便选一个用来制作
复制链接

扫一扫