In the process of learning CSS, it is best to study the good XHTML structure and CSS of others.
<! 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/> <pead> <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 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: 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/> </pead> <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"> & nbsp; </div> <br/> </body> <br/> </ptml> <br/>
Code Conversion from cssdriver
Source: http://www.lemongtree.com/Archives/Modern_Bricks_Menu.aspx
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
