最近会收集一些网站页面的导航菜单。因为最近联系网页的布局，感觉css比jQuery难，哈哈。可能因人而异吧。之前把css的全部属性看了几遍，但是也仅限于看了几遍在自己刚开始写网站的页面的时候，居然不会用，呵呵。于是去互联网上下载了一写模板，前期先熟读人家的代码，然后自己改动着看一些，呵呵。最后自己实现他。感觉收获很大，对于css，本人建议，大家还是动手吧，因为这些属性，看了用处不大。
好了，不扯了。
1):效果如下
实现代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head> <link href="style.css" type="text/css" rel="stylesheet" media="screen,projection" /> <title>Home</title> </head> <body> <div id="layout"> <div id="header"> <h1 id="logo"><a href="#" title="Company">mint<span class="light">idea</span><span class="leaf"> </span></a></h1> <hr /> <div id="nav"> <ul> <li> <a href="#">Home <br /> <span>Main page</span></a> </li> <li> <a href="#">Who <br /> <span>Our team</span></a> </li> <li> <a href="#">What <br /> <span>Our services</span></a> </li> <li> <a href="#">Portfolio <br /> <span>Our woks</span></a> </li> <li> <a href="#">Prices <br /> <span>How much it costs</span></a> </li> <li> <a href="#">Contact <br /> <span>Write us!</span></a> </li> </ul> <hr /> </div> <hr /> <br /> <hr /> </div> </div> </body> </html>
css代码：
body {
background: #192d40 url(images/bg.jpg) repeat-x; /*实现渐变效果*/
line-height: 1.2em;
900px;
height: 750px;
color: #e8eaeb;
}
a {
color: #e5e5e5;
}
#logo {
780px;
height: 80px;
text-align: left;
color: #cccccc;
position: relative;
margin: 0;
line-height: 100px;
}
#logo a {
text-decoration: none;
}
.light {
color: #2b4866;
}
.leaf {
position: absolute;
background: url(images/leaf.gif) 45px 5px no-repeat;
120px;
height: 80px;
left: 0;
top: 10px;
}
h1 {
margin: 15px 0 10px 0;
font-weight: bold;
}
#nav {
position: relative;
z-index: 2;
border: 1px solid #1a2735;
border-right: none;
border-left: none;
padding: 7px 0;
}
#nav li {
list-style-type: none;
display: inline;
padding: 0;
margin: 0;
}
#nav ul li a {
text-decoration: none;
font-size: 19px;
font-weight: bold;
float: left;
display: block;
padding: 7px 25px 7px 7px;
line-height: 18px;
}
#nav ul li span {
font-size: 11px;
font-weight: normal;
color: #67707a;
}
