css练习004--导航条

来源：互联网发布：区间估计原理知乎编辑：程序博客网时间：2024/06/02 02:52
<html><head><style type="text/css">*{margin:0;padding:0;}a{text-decoration:none;}body{font-family: "Lucida Grande", Helvetica, Arial, sans-serif;font-size:14px;width:1200px;text-align:center;margin:0 auto;}ul{width:900px;margin-top:100px;cursor:pointer;}ul li{float:left;margin:1px;padding:5px 0px;list-style-type:none;}ul li dt{text-align:center;padding:4px 50px;border-bottom:1px solid #000;border-radius:6px 6px 0 0;}#medos dt{background-color:#B2AB9B;}#menus dt{background-color:#949E7C;}#layouts dt{background-color:#D4D8BD;}#mozilla dt{background-color:#E2DFA8;}ul li dd{padding:5px 0;display:none;background-color:#47a;color:white;text-align:left;}ul li dd span{display:inline-block;width:0px;heigth:0px;border:5px solid transparent;border-left-color:white;line-height: 0px;margin:0 5px;}ul li dd.last{height:13px;background-color:#fc3;border-top:1px solid #000;border-radius:0 0 6px 6px;box-shadow:0 3px 0 #da1;}ul li dd.last:hover{background-color:#fc3;}ul li:hover dd{display:block;}ul li dd:hover{background-color:#369;color:#69c;z-index:999;}ul li dd:hover span{visibility:hidden;}p{clear:both;line-height:3em;font-size:12px;color:#993;}.alt{width:151px;position:absolute;z-index:100px;}#menus .alt{width:150px;}#layouts .alt{width:165px;}#mozilla .alt{width:161px;}</style></head><body><ul><li id="medos"><dt>DEMOS</dt><div class="alt"><dd><span></span><a title="one one one" hre="#">one one one</a></dd><dd><span></span><a title="one one one" hre="#">two two two</a></dd><dd><span></span><a title="one one one" hre="#">three three three</a></dd><dd><span></span><a title="one one one" hre="#">four four four</a></dd><dd><span></span><a title="one one one" hre="#">five five five</a></dd><dd class="last"></dd></div></li><li id="menus"><dt>MENUS</dt><div class="alt"><dd><span></span><a title="one one one" hre="#">one one one</a></dd><dd><span></span><a title="one one one" hre="#">two two two</a></dd><dd><span></span><a title="one one one" hre="#">three three three</a></dd><dd><span></span><a title="one one one" hre="#">four four four</a></dd><dd><span></span><a title="one one one" hre="#">five five five</a></dd><dd class="last"></dd></div></li><li id ="layouts"><dt>LAYOUTS</dt><div class="alt"><dd><span></span><a hre="#">one one one</a></dd><dd><span></span><a hre="#">two two two</a></dd><dd><span></span><a hre="#">three three three</a></dd><dd><span></span><a hre="#">four four four</a></dd><dd><span></span><a hre="#">five five five</a></dd><dd class="last"></dd></div></li><li id="mozilla"><dt>MOZILLA</dt><div class="alt"><dd><span></span><a hre="#">one one one</a></dd><dd><span></span><a hre="#">two two two</a></dd><dd><span></span><a hre="#">three three three</a></dd><dd class="last"></dd></div></li></ul><p>edit by:wei<br/>2016/2/26</p></body></html><html><head><style type="text/css">*{margin:0;padding:0;}a{text-decoration:none;}body{font-family: "Lucida Grande", Helvetica, Arial, sans-serif;font-size:14px;width:1200px;text-align:center;margin:0 auto;}ul{width:900px;margin-top:100px;cursor:pointer;}ul li{float:left;margin:1px;padding:5px 0px;list-style-type:none;}ul li dt{text-align:center;padding:4px 50px;border-bottom:1px solid #000;border-radius:6px 6px 0 0;}#medos dt{background-color:#B2AB9B;}#menus dt{background-color:#949E7C;}#layouts dt{background-color:#D4D8BD;}#mozilla dt{background-color:#E2DFA8;}ul li dd{padding:5px 0;display:none;background-color:#47a;color:white;text-align:left;}ul li dd span{display:inline-block;width:0px;heigth:0px;border:5px solid transparent;border-left-color:white;line-height: 0px;margin:0 5px;}ul li dd.last{height:13px;background-color:#fc3;border-top:1px solid #000;border-radius:0 0 6px 6px;box-shadow:0 3px 0 #da1;}ul li dd.last:hover{background-color:#fc3;}ul li:hover dd{display:block;}ul li dd:hover{background-color:#369;color:#69c;z-index:999;}ul li dd:hover span{visibility:hidden;}p{clear:both;line-height:3em;font-size:12px;color:#993;}.alt{width:151px;position:absolute;z-index:100px;}#menus .alt{width:150px;}#layouts .alt{width:165px;}#mozilla .alt{width:161px;}</style></head><body><ul><li id="medos"><dt>DEMOS</dt><div class="alt"><dd><span></span><a title="one one one" hre="#">one one one</a></dd><dd><span></span><a title="one one one" hre="#">two two two</a></dd><dd><span></span><a title="one one one" hre="#">three three three</a></dd><dd><span></span><a title="one one one" hre="#">four four four</a></dd><dd><span></span><a title="one one one" hre="#">five five five</a></dd><dd class="last"></dd></div></li><li id="menus"><dt>MENUS</dt><div class="alt"><dd><span></span><a title="one one one" hre="#">one one one</a></dd><dd><span></span><a title="one one one" hre="#">two two two</a></dd><dd><span></span><a title="one one one" hre="#">three three three</a></dd><dd><span></span><a title="one one one" hre="#">four four four</a></dd><dd><span></span><a title="one one one" hre="#">five five five</a></dd><dd class="last"></dd></div></li><li id ="layouts"><dt>LAYOUTS</dt><div class="alt"><dd><span></span><a hre="#">one one one</a></dd><dd><span></span><a hre="#">two two two</a></dd><dd><span></span><a hre="#">three three three</a></dd><dd><span></span><a hre="#">four four four</a></dd><dd><span></span><a hre="#">five five five</a></dd><dd class="last"></dd></div></li><li id="mozilla"><dt>MOZILLA</dt><div class="alt"><dd><span></span><a hre="#">one one one</a></dd><dd><span></span><a hre="#">two two two</a></dd><dd><span></span><a hre="#">three three three</a></dd><dd class="last"></dd></div></li></ul><p>edit by:wei<br/>2016/2/26</p></body></html>
效果展示：http://codepen.io/huangwei/pen/bpYOaX
0 0