2007-07

css选项卡菜单之二

Jason at 20:08

学习css的过程中，研究别人的良好的xhtml结构及css是最好的学习方法

<!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> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ #modernbricksmenu{ padding: 0; width: 100%; background: transparent; voice-family: "\"}\""; voice-family: inherit; } #modernbricksmenu ul{ font: bold 11px Arial; margin:0; margin-left: 40px; /*margin between first menu item and left browser edge*/ padding: 0; list-style: none; } #modernbricksmenu li{ display: inline; margin: 0 2px 0 0; padding: 0; text-transform:uppercase; } #modernbricksmenu a{ float: left; display: block; color: white; margin: 0 1px 0 0; /*Margin between each menu item*/ padding: 5px 10px; text-decoration: none; letter-spacing: 1px; background-color: black; /*Default menu color*/ border-bottom: 1px solid white; } #modernbricksmenu a:hover{ background-color: gray; /*Menu hover bgcolor*/ } #modernbricksmenu #current a{ /*currently selected tab*/ background-color: #D25A0B; /*Brown color theme*/ border-color: #D25A0B; /*Brown color theme*/ } #modernbricksmenuline{ clear: both; padding: 0; width: 100%; height: 5px; line-height: 5px; background: #D25A0B; /*Brown color theme*/ } </style> </head> <body> <div id="modernbricksmenu"> <ul> <li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home">Home</a></li> <li><a href="http://www.dynamicdrive.com/new.htm" title="New">New</a></li> <li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">Revised</a></li> <li><a href="http://tools.dynamicdrive.com" title="Tools">Tools</a></li> <li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">Forums</a></li> </ul> </div> <div id="modernbricksmenuline"> </div> </body> </html>

代码转自CssDriver