导航条样式代码
參考博文:這里寫鏈接內(nèi)容
<!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>轉(zhuǎn)載于:https://www.cnblogs.com/zhong-fucheng/p/7202905.html
總結(jié)
- 上一篇： 基金定投的好处与坏处 了解这几点就可以
- 下一篇： 销卡成功后发现银行自动给开通信用卡 遇到