zoukankan      html  css  js  c++  java
  • 用JS实现任意导航栏的调用

    首先设计一个关于导航的层叠样式表如:
    body{font-size:12px;font-family:Arial,Helvetica,'宋体',sans-serif;color:#333;background:#fff;margin:0;}
    a:link{color:#0041D9;text-decoration:none;outline:none;}
    a:visited{color:#0041D9;text-decoration:none;outline:none;}
    a:hover{color:#f60;text-decoration:underline;outline:none;}
    a:active{color:#0041D9;text-decoration:none;outline:none;}
    #header{position:relative;100%;}
    div.bar{position:relative;height:42px;background:url(mainmenu.bg14_6x42.gif) repeat-x;}
    #header div.tabbar{900px;}
    #header .tabbar div.tabs{left:266px;position:absolute;top:41px;font-size:14px;font-weight:bold;}
    #header .tabbar .tabs a{float:left;80px;height:24px;line-height:24px;padding-top:7px;text-align:center;color:#000;font-weight:lighter;font-size:14px;background:transparent;}
    #header .tabbar .tabs a:hover{background:#fff url(nav_hover_80x31.gif) no-repeat;text-decoration:none;margin-left:-1px;padding-left:1px;}
    #header .tabbar .tabs a.actived{background:#fff url(nav_80x31.gif) no-repeat;font-weight:bold;color:#fff;margin-left:-1px;padding-left:1px;}
    #header .tabbar .tabs a.actived:hover{background:#fff url(nav_80x31.gif) no-repeat;font-weight:bold;color:#fff;text-decoration:underline;}
    #header .tabbar .bg{position:absolute;left:266px;top:41px;560px;height:31px;z-index:-1;}
    #header .tabbar .bg .nw{float:left;80px;height:31px;background:transparent url(navleft2_80x31.gif) no-repeat;}
    #header .tabbar .bg .cen{float:left;80px;height:31px;background:transparent url(navlcenter_80x31.gif) no-repeat;}
    #header .tabbar .bg .ne{float:left;80px;height:31px;background:transparent url(navright_80x31.gif) no-repeat;}
    #header .tabbar .float_icon{background:transparent url(new01_18x19.gif) no-repeat;font-size:0;height:19px;line-height:0;position:absolute;right:403px;text-indent:-999px;top:-4px;18px;}
    #header{z-index:20;min-970px;}
    #header div.banner{position:relative;height:72px;z-index:10;}
    div.bar{height:7px;background:url(mainmenu.bg11_6x7.gif) repeat-x;}
    然后设计一个导航JS
    document.writeln("<a href=1.htm>导航一</a>")
    document.writeln("<a href=1.htm>导航一</a>")
    document.writeln("<a href=1.htm>导航一</a>")
    document.writeln("<a href=1.htm>导航一</a>")
    将上面代码保存成一个.js文件,
    然后在HTML网页要显示导航的位置调用,
    <script src=xxx.js></script>
  • 相关阅读:
    201805140815_《缓存操作函数封装》
    201802071223_《更换两个二进制》
    201801301359——《注意Javascript这种形式》
    201708310807_《算法-Javascript实现最大公约数》
    重拾java openjdk1.8 语法小试
    代码轮子之很简单但是挺管用的基于C# Task的模拟并发的代码
    docker1.12 安装pxc(Percona XtraDB Cluster )测试
    .net orm比较之dapper和Entity Framework6的简单测试比较
    StackExchange.Redis使用和封装小试
    docker1.12 安装redis3官方集群 攻略
  • 原文地址:https://www.cnblogs.com/huapox/p/3509826.html
Copyright © 2011-2022 走看看