在CSS中完成水平导航栏 [英] horizontal navigation bar done in CSS

问题描述

  * {
 border：0px; 
 margin：0px; 
 padding：0px; 
} 
 body {
 background-color：#FFC; 
} 
 #wrapper {
 width：70％; 
保证金：0％汽车; 
} 
 
 #header {
 background-color：＃C1D1FD; 
填充：3％; 
} 
 
 #nav {
 
 clear：both; 
 padding：auto; 
 position：inherit; 
背景颜色：＃F0D5AA; 
 width：auto; 
 
} 
 #nav ul {
 list-style-type：none; 
 
} 
 
 #nav a {
 display：block; 
 float：left; 
填充：0％; 
 width：20％; 
背景颜色：＃F60; 
 border-bottom：1px #fff solid; 
 
} 
 
 #content {
填充：7％; 
保证金余额：20％; 
 background-color：#fff; 
 
} 
 
 #footer {
 background-color：＃C1D1FD; 
填充：2％; 
 text-align：center; 
} 
  

HTML代码：

 < form id =form1runat =server> 
< div id =wrapper> 
< div id =header> 
< h1>欢迎来到我们的网站< / h1> 
 
< div id =nav> 
< ul> 
< li>< a href =＃>主页< / a>< / li> 
< li>< a href =＃>产品< / a>< / li> 
< li>< a href =＃>服务< / a>< / li> 
< li>< a href =＃>联络人< / a>< / li> 
< / ul> 
< / div> <！ -  end nav  - > 
< / div> <！ - 结束标题 - > 
< div id =content> 
< h2>页面标题< / h2> 
< p>欢迎< / p> 
< p>欢迎< / p> 
< p>欢迎< / p> 
< / div> <！ - 结束内容 - > 
< div id =footer> 
< p>版权所有2010< / p> 
< / div> <！ - 结束页脚 - > 
< / div><！ -  end wrapper  - > 
< / form> 
  

这是我的CSS& HTML代码，即时尝试使我的导航栏下方的标题栏。但导航栏结果显示为像楼梯一样的锯齿状。我怎样才能使我的导航按钮直？
感谢您的建议，

解决方案

您可以在这里看到，

http://www.cssnewbie.com/super-simple / b>

：//www.cssnewbie.com/example/horizo​​ntal-menu/rel =nofollow> http://www.cssnewbie.com/example/horizo​​ntal-menu/

* {
border: 0px;
margin: 0px;
padding: 0px;
}
body {
background-color: #FFC;
}
#wrapper {
width:70%;
margin: 0% auto;
}

#header {
background-color: #C1D1FD;
padding: 3%;
}

#nav {

clear:both;
padding: auto;
position:inherit;
background-color:#F0D5AA;
width: auto;

}
#nav ul {
list-style-type:none;

}

#nav a {
display:block;
float:left;
padding:0%;
width:20%;
background-color:#F60;
border-bottom:1px #fff solid;

}

#content {
padding:7%;
margin-left: 20%;
background-color:#fff;

}

#footer {
background-color: #C1D1FD;
padding: 2%;
text-align:center;
}

HTML CODE:

<form id="form1" runat="server">
<div id="wrapper">
    <div id="header">
        <h1>Welcome to our Website</h1>

    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div> <!-- end nav-->
    </div> <!-- end header-->
    <div id="content">
        <h2>Page Heading</h2>
        <p>welcome</p>
        <p>welcome</p>
        <p>welcome</p>
    </div> <!-- end content-->
    <div id="footer">
        <p>Copyright 2010</p>
    </div> <!-- end footer-->
</div><!-- end wrapper-->
</form>

Hi this is my CSS & HTML code, im trying to make my navigation bar below the header bar. but navbar result appears as zagged like stairs. How can i make my navbar buttons straight? Thank you for the advice,

解决方案

You can see here,

http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/

Example Here:

http://www.cssnewbie.com/example/horizontal-menu/

这篇关于在CSS中完成水平导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！