本示例为精简导航栏代码。
技术点概要及扩展:
1.关于<a>标签的属性link、visited、focus、hover、active区别。
:link代表为访问链接的样式:visited 链接访问后的样式:focus 获取焦点时的样式:hover 光标经过某一元素时的样式
:active 链接点击被激活后的样式注意: : link 与 :visited 在样式文件中的顺序可以随便放置。
而focus, hover,active这几个,如果你设置的顺序不同,会直接影响样式的显示效果,原因是结合每个属性的意思,其动作有先后之分,顺序颠倒会导致样式被覆盖。
:focus -> :hover -> :activ
2.关于css样式中“>”、"+"符号的含义。
①A>B,表示选择A元素的所有子元素B,只选择一代不能隔代。
A B,表示选择A元素的所有后代元素B。
另外,没有<的用法。
②+: A+B,表示紧随A的B元素。
3.菜单框架都是<ul><li></li></ul>的组合,样式细节解释可参照:
主页面index.html代码如下:
样式 style.css代码如下:<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> <div class="example"> <ul id="nav"> <li><a href="javascript:void(0);">Home</a></li> <li><a class="fly" href="#">page1</a> <ul class="dd"> <li><a href="#">page1-1</a></li> <li><a class="fly" href="#">page1-2</a> <ul> <li><a href="#">page1-1-1</a></li> <li><a href="#">page1-1-2</a></li> </ul> </li> <li><a href="#">page1-3</a></li> <li><a href="#">page1-4</a></li> <li><a href="#">page1-5</a></li> <li><a href="#">page1-6</a></li> </ul> </li> <li><a class="fly" href="#">page2</a> <ul class="dd"> <li><a class="fly" href="#">page2-1</a> <ul> <li><a href="#">page2-1-1</a></li> <li><a href="#">page2-1-2</a></li> <li><a class="fly" href="#">page2-1-3</a> <ul> <li><a href="#">page2-1-3-1</a></li> <li><a href="#">page2-1-3-2</a></li> <li><a href="#">page2-1-3-3</a></li> </ul> </li> <li><a href="#">Ajax</a></li> </ul> </li> <li><a class="fly" href="#">page2-2</a> <ul> <li><a href="#">page2-2-1</a></li> <li><a href="#">page2-2-2</a></li> <li><a href="#">page2-2-3</a></li> </ul> </li> </ul> </li> <li><a href="#">page3</a></li> <li><a href="#">page4</a></li> </ul> </div>
/* demo page styles */ body { background:#eee; margin:0; padding:0; } .example { background:#fff url(../images/tech.jpg); width:770px; height:570px; border:1px #000 solid; margin:20px auto; padding:15px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } /* menu styles */ #nav,#nav ul { background-image:url(../images/tr75.png); list-style:none; margin:0; padding:0; } #nav { height:41px; padding-left:5px; padding-top:5px; position:relative; z-index:2; } #nav ul { left:-9999px; position:absolute; top:37px; width:auto; } #nav ul ul { left:-9999px; position:absolute; top:0; width:auto; } #nav li { float:left; margin-right:5px; position:relative; } #nav li a { background:#c1c1bf; color:#000; display:block; float:left; font-size:16px; padding:8px 10px; text-decoration:none; } #nav > li > a { -moz-border-radius:6px; -webkit-border-radius:6px; -o-border-radius:6px; border-radius:6px; overflow:hidden; } #nav li a.fly { background:#c1c1bf url(../images/arrow.gif) no-repeat right center; padding-right:15px; } #nav ul li { margin:0; } #nav ul li a { width:120px; } #nav ul li a.fly { padding-right:10px; } /*hover styles*/ #nav li:hover > a { background-color:#858180; color:#fff; } /*focus styles*/ #nav li a:focus { outline-width:0; } /*popups*/ #nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover { left:0; } #nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover { left:140px; }