很多网页的导航条都会有小三角形, 其实实现这个功能也挺简单.
拿菜鸟教程首页导航做个例子
首先写一个大的 div_nav, 而 "首页"" 菜鸟笔记 ""菜鸟工具"" 参考手册 " 等则作为 div 包含在 div_nav 中. div_nav 背景色设置为对应的颜色.
背景色的设置代码如下:
- .blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{
- color:#fff;
- background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;
- }
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频)
即:
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current
上图代码的注解为:
id 为 menu 中的 ul 的 li. 也就是导航栏里的每一个元素. 鼠标放上去后会出来的效果.
在后面又加了 ul 说明弹出的是一个 ul 元素
整个这里面的 CSS 就是规定这个 ul 元素里的样式.
说白了就是鼠标划过导航栏的效果
比如说我们给 html 中一个标签元素的鼠标滑过的状态来设置字体颜色:
a:hover{color:red;}
a:hover 代表鼠标划过
a:current 应该就是代表获取焦点.
而小三角形也很好设置
- .blue #slatenav
- {
- position:relative;
- display:block;
- height:42px;
- font-size:11px;
- font-weight:bold;
- background:transparent url(images/blueslate_background.gif)repeat-x top left;
- font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;
- }
通过 background 来设置 "首页" 等小 div 的背景图片.
而上文设置过鼠标滑过标签的效果, 因此当鼠标滑到别的标签是, 也会显示小三角形的背景.
鼠标滑过其他标签的时候:
好了, 这样一个带小三角形的导航就做好了, 至于其他的细节问题, 可以自己慢慢调整.
注: 代码中声明了文档的命名空间.
单独写 < HTML > 标签没有声明文档的命名空间, 而加上 xmlns="http://www.w3.org/1999/xhtml" 的话, 声明了文档的命名空间. 声明了命名空间, 浏览器在解析你的 HTML 文档的标签时, 就会按照这个规范进行. 一般使用时, 不会感觉得出这二者有多大的区别.
特殊情况在于一些标签的解释上, 比如 xhtml 的命名规范, 要求标签都必须严格闭合, 单标签的要在末尾加上 "/", 如果你使用了 xhtml 的命名规范, 而在标签的书写上不按照规范来的话, 有可能发生无法解析该标签的情况. 所以, 好的书写习惯是建议都加上结束标签.
附上源码:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <meta name="keywords" content=" " />
- <meta name="description" content=" " />
- <title>
- 横版导航
- </title>
- <link rel="stylesheet" href="style.css" type="text/css" />
- </head>
- <body style="text-align:center">
- <p>
- </p>
- <div class="blue">
- <div id="slatenav">
- <ul>
- <li>
- <a href="http://sc.chinaz.com/" title="css menus" class="current">
- 首页
- </a>
- </li>
- <li>
- <a href="http://sc.chinaz.com/" title="css menus">
- 菜鸟笔记
- </a>
- </li>
- <li>
- <a href="http://sc.chinaz.com/" title="css menus">
- 菜鸟工具
- </a>
- </li>
- <li>
- <a href="http://sc.chinaz.com/" title="css menus">
- 参考手册
- </a>
- </li>
- <li>
- <a href="http://sc.chinaz.com/" title="css menus">
- 用户笔记
- </a>
- </li>
- <li>
- <a href="http://sc.chinaz.com/" title="css menus">
- 测验 / 考试
- </a>
- </li>
- <li>
- <a href="http://sc.chinaz.com/" title="css menus">
- 本地书签
- </a>
- </li>
- <li>
- <a href="http://sc.chinaz.com/" title="css menus">
- 登录
- </a>
- </li>
- </ul>
- </div>
- </div>
- </body>
- </HTML>
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 HTML+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/24d319edbf3c