學習css的過程中,研究別人的良好的xhtml結構及css是最好的學習方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title> new document </title><br /><meta name="generator" content="editplus" /><br /><meta name="author" content="" /><br /><meta name="keywords" content="" /><br /><meta name="description" content="" /><br /><style type="text/css"><br />/*Credits: Dynamic Drive CSS Library */<br />/*URL: http://www.dynamicdrive.com/style/ */<br />#modernbricksmenu{<br />padding: 0;<br />width: 100%;<br />background: transparent;<br />voice-family: "\"}\"";<br />voice-family: inherit;<br />}<br />#modernbricksmenu ul{<br />font: bold 11px Arial;<br />margin:0;<br />margin-left: 40px; /*margin between first menu item and left browser edge*/<br />padding: 0;<br />list-style: none;<br />}<br />#modernbricksmenu li{<br />display: inline;<br />margin: 0 2px 0 0;<br />padding: 0;<br />text-transform:uppercase;<br />}<br />#modernbricksmenu a{<br />float: left;<br />display: block;<br />color: white;<br />margin: 0 1px 0 0; /*Margin between each menu item*/<br />padding: 5px 10px;<br />text-decoration: none;<br />letter-spacing: 1px;<br />background-color: black; /*Default menu color*/<br />border-bottom: 1px solid white;<br />}<br />#modernbricksmenu a:hover{<br />background-color: gray; /*Menu hover bgcolor*/<br />}<br />#modernbricksmenu #current a{ /*currently selected tab*/<br />background-color: #D25A0B; /*Brown color theme*/<br />border-color: #D25A0B; /*Brown color theme*/<br />}<br />#modernbricksmenuline{<br />clear: both;<br />padding: 0;<br />width: 100%;<br />height: 5px;<br />line-height: 5px;<br />background: #D25A0B; /*Brown color theme*/<br />}<br /></style><br /></head><br /><body><br /><div id="modernbricksmenu"><br /><ul><br /><li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home">Home</a></li><br /><li><a href="http://www.dynamicdrive.com/new.htm" title="New">New</a></li><br /><li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">Revised</a></li><br /><li><a href="http://tools.dynamicdrive.com" title="Tools">Tools</a></li><br /><li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">Forums</a></li><br /></ul><br /></div><br /><div id="modernbricksmenuline"> </div><br /></body><br /></html><br />
代碼轉自CssDriver
文章來源:http://www.lemongtree.com/Archives/Modern_Bricks_Menu.aspx