61,112
社区成员
发帖
与我相关
我的任务
分享
<div class="maindiv">
<div class="head">
<div class="menu">
<ul>
<li>home</li>
<li>SPECIALS</li>
<li>ALL PRODUCTS</li>
<li>CONTACT US</li>
<li>ABOUT</li>
<li>BACK TO TUTORIAL</li>
</ul>
</div>
<div></div>
<div></div>
</div>
</div>
</body>
body{ background:url(../images/body-bg.jpg) fixed}
.maindiv{ width:1000px;
height:1200px;
margin:0 auto}
.head{ width:1000px;
height:210px;
margin:25px auto 0px}
.menu{ width:1000px;
height:30px;
background:#060;
color:#FFF;
text-align:left}
.menu ul { width:1000px;
height:30px;}
.menu ul li{font-size:11px;
line-height:35px;
text-transform:uppercase;
text-align:left;
width:100px;
font-weight:bolder;
float:left;
list-style:none;}
.maindiv {
width: 1000px;
height: 1200px;
margin: 0 auto
}
.head {
width: 1000px;
height: 210px;
margin: 25px auto 0px
}
.menu {
width: 1000px;
height: 30px;
background: #060;
color: #FFF;
text-align: left
}
.menu ul {
width: 1000px;
/*height: 30px;*/
padding-left:0;
overflow:hidden;
}
.menu ul li {
font-size: 11px;
line-height: 30px;
text-transform: uppercase;
text-align: left;
/*width: 100px;*/
font-weight: bolder;
float: left;
list-style: none;
}
.menu ul li a{
text-decoration:none;
color:#ffffff;
padding: 10px 15px;
}
.homeSpecail{
padding-left:0;
background-color:#333333;
}
<body>
<div class="maindiv">
<div class="head">
<div class="menu">
<ul>
<li class="homeSpecail">
<a href="#">home</a>
</li>
<li>
<a href="#">SPECIALS</a>
</li>
<li>
<a href="#">ALL PRODUCTS</a>
</li>
<li>
<a href="#">CONTACT US</a>
</li>
<li>
<a href="#">ABOUT</a>
</li>
<li>
<a href="#">BACK TO TUTORIAL</a>
</li>
</ul>
</div>
<div></div>
<div></div>
</div>
</div>
</body>
这里的导航中的“选项”一般都是链接,所以你可以在html中将导航“选项”用a标签包起来,然后通过a标签的padding来控制“选项”之间的间距。
我也是菜鸟,共同探讨学习吧,呵呵。