新手求救,,DIV+CSS导航条制作!

tom95588 2013-12-08 12:27:11
大家好,小弟再做一个导航条,遇到如下问题

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



我用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;}



请问如何才能实现导航条像目标网站那样 ,请高手指点,非常感谢!!!!





...全文
246 点赞 收藏 5
写回复
5 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
Tammeny 2013-12-09
letter-spacing
回复
前端老小白 2013-12-08
额,不谢不谢...
回复
tom95588 2013-12-08
引用 1 楼 g_yaoyao 的回复:

    .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来控制“选项”之间的间距。 我也是菜鸟,共同探讨学习吧,呵呵。
非常感谢楼上的大哥,问题已经解决,非常感谢
回复
KK3K2005 2013-12-08
从目标图片你应该可以看出 菜单的宽度不等 菜单的间距相同 那么证明 宽度是auto让内容来撑 间距?padding 和 margin都可以设置 但是padding是不会重合的 margin是会重叠的 从上图看出应该是采用padding 因为左面的间距比里面的间距小貌似是一半的样子
回复
前端老小白 2013-12-08

    .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来控制“选项”之间的间距。 我也是菜鸟,共同探讨学习吧,呵呵。
回复
相关推荐
发帖
CSS
创建于2007-09-28

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2013-12-08 12:27
社区公告
暂无公告