导航条样式代码

来源：互联网发布：java怎么输出所有汉字编辑：程序博客网时间：2024/04/30 09:45
参考博文:这里写链接内容
<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Bootstrap 101 Template</title>    <link href="css/bootstrap.min.css" rel="stylesheet">    <style>        a{            text-decoration: none;            cursor: pointer;        }        nav{            position: fixed;            top: 0;            left: 0;            z-index: 9000;            width: 100%;            height: 50px;            background-color: #ddd;        }        nav>div{            color: #9e9e9e;            background-color: #ffffff;            width: 218px;            left: 0;            position: absolute;            top: 0;            height: 50px;            cursor: pointer;        }        nav>div div{            position:absolute;            height: 50px;            pointer-events: none;            width: 100%;            padding-left: 20px;            box-sizing: border-box;            transform: translateZ(25px);        }        nav>div div:last-child{            background-color: #000000;            color: #ffffff;            transform: rotateX(90deg) translateZ(25px);        }        nav>div div h1{            font-family: "TrumpGothicEastBold", Arial, Helvetica, sans-serif;            font-size: 16px;            line-height: 30px;            text-transform: uppercase;            letter-spacing: 1px;        }        nav>div div span{            display: block;            width: 16px;            height: 3px;            margin-left: -1px;            margin-top: 4px;            background-color: #c7c7c7;        }        nav>div div:last-child span{            background-color: #e74c4c;        }        nav>div a{            color:#9e9e9e;            position: absolute;            height: 50px;            width: 100%;            box-sizing: border-box;            transition:transform .2s;            transform-style: preserve-3d;        }        nav>div:hover a{            transform: rotateX(-90deg);        }    </style></head><body><nav>    <div>        <a href="tool.html">            <div>                <h1>TOOL</h1>                <span></span>            </div>            <div>                <h1>TOOL</h1>                <span></span>            </div>        </a>    </div>    <div>        <a href="work.html">            <div>                <h1>WORK</h1>                <span></span>            </div>            <div>                <h1>WORK</h1>                <span></span>            </div>        </a>    </div>    <div>        <a href="360.html">            <div>                <h1>VR/360</h1>                <span></span>            </div>            <div>                <h1>VR/360</h1>                <span></span>            </div>        </a>    </div>    <div>        <a href="directors.html">            <div>                <h1>DIRECTORS</h1>                <span></span>            </div>            <div>                <h1>DIRECTORS</h1>                <span></span>            </div>        </a>    </div>    <div>        <a href="awards.html">            <div>                <h1>AWARDS</h1>                <span></span>            </div>            <div>                <h1>AWARDS</h1>                <span></span>            </div>        </a>    </div>    <div>        <a href="about.html">            <div>                <h1>ABOUT</h1>                <span></span>            </div>            <div>                <h1>ABOUT</h1>                <span></span>            </div>        </a>    </div>    <div>        <a href="contact.html">            <div>                <h1>CONTACT</h1>                <span></span>            </div>            <div>                <h1>CONTACT</h1>                <span></span>            </div>        </a>    </div></nav><script src="js/jquery-1.8.2.js"></script><script src="js/bootstrap.min.js"></script><script type="text/javascript">    $("nav>div").css("left", function (i) {                return i * 220;            }    );    $("nav>div").click(function () {        var href = $(this).children().eq(0).attr("href");        $(window).attr("location", href);    });</script></body></html>
阅读全文
1 0