欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

新手,div+css导航条制作

更新时间: 2014-01-05 00:52:36 责任编辑: Author_N1

 

新手求救,,DIV+CSS导航条制作!
大家好,小弟再做一个导航条,遇到如下问题

目标网站的网页导航是这样的:



我用DIV+CSS 布局过后,样式是这样的,从下图可以看出导航的文字间距明显比目标网站的大很多。




如果把width调小一点却又放不下,如图



下面是HTML部分
    <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>  


下面是CSS部分

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>
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:52:36
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/873/
本文WWW.DOC100.NET DOC100.NET版权所有。