导航条样式代码【代码库】

tags: 代码库

参考博文:这里写链接内容

<!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>
复制代码

如果您觉得这篇文章帮助到了您，可以给作者一点鼓励

导航条样式代码【代码库】相关推荐

css修改导航条样式
css修改导航条样式近期由于工作需要要修改table表格导航条样式. 本人特整理出相关代码,以及最后效果,供各位小伙伴参考. 具体代码如下: .xp-table-content ::-webkit- ...
自定义chrome浏览器导航条样式
设置滚动条样式 /* 设置滚动条的样式 */ ::-webkit-scrollbar {width: 3px;height: 3px; }/* 滚动槽 */ ::-webkit-scrollbar-t ...
css+div导航条样式
用双竖线做的效果 <head> <meta http-equiv="Content-Type" content="text/html; charset= ...
Bootstrap导航条学习使用(一)
本文实例为大家分享了Bootstrap导航条的具体代码,供大家参考,具体内容如下 navbar: 导航条的基础样式 nav navbar-nav :导航条里菜单的的固定样式组合的class navba ...
Bootstrap(五) 导航条、分页导航
本文转自:http://www.imooc.com/learn/141 导航条基础导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Boo ...
用JavaScript实现一个简单动态导航条
虽说是js实现,但是其中是引入了jq,将它们封装成jq对象,所以js中的代码只有两行,代码看起来多是因为写的样式多. 实现的主要功能为:当鼠标放到导航栏上面的链接时,链接下方的链接元素也会显示出来,当 ...
flask系列---模板的继承及Bootstrap实现导航条（四）
在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在网页上方的导航条,并在所有的页面中继承这个导航条.导航 ...
RiProV2定制导航条
这篇教大家如何制作一个RiPro-V2导航条广告- 昨天夏柔在Ri会员群看到这个网站的导航条样式,索性直接扒下来给大家用用- 所以夏柔希望大家能多多关注我哦- 持续更新各种美化废话不多说,步入正题! ...
毛玻璃效果 php,CSS3教程之制作倾斜导航条和毛玻璃效果
这篇文章主要介绍了使用CSS3制作倾斜导航条和毛玻璃效果,需要的朋友可以参考下导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相 ...

导航条样式代码【代码库】

导航条样式代码【代码库】相关推荐

最新文章

热门文章