Please help with web page layout_html/css_WEB-ITnose-HTML Tutorial-php.cn

Please help with web page layout_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:05:16

Original

1193 people have browsed it

I want to make a simple little website. I want to write the template for this website myself, but when using CSS to layout web page elements, I find it difficult to control it.
The picture is what this homepage looks like.

How to control the position of the navigation bar.

.
This is what I made, and the difference is huge.
How can I make the width of the navigation the same as that of the parent class. Second, how to make each one distribute the width equally.
This is my code.

communityAdvance

@charset "utf -8";
body {

}
#wrapper {
background-color: #20455A;
width: 100%;
min-width: 740px;
max-width: 1306px;
margin-left: auto;
margin-right: auto;
left: 5%;
right: 5%;
}
header {
background-color: #6CEBE5;
margin-right: auto;
margin-left: auto;
width: 100%;
float: left;
}
#footer ul {
background-color: #6CEBE5;
text-decoration: none;
list-style-type: none;
margin-right: auto;
margin-left : auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: 1306px;
}
#footer li {
width: 33%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px ;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: center;
text -decoration: none;
float: left;
background-color: #6CEBE5;
}
#mainnav li {
width: 20%;
float: left;
}

a {
font-weight: bold;
text-decoration: none;
}

a:link {
color: #FF6600;
}
#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {
text-decoration: none;
background-color: #43A6CB;
}

A:visited {
color: #FF944C;
}
a:hover, a:active, a:focus {
background-color : #7F3300;
text-decoration: underline;
}
#mainnav a {
display: block;
float: left;
text-align: center;
background-color: #4d4d4d;
color: #F1EBEB;
text-transform: uppercase;
padding-top: 6px;
padding-bottom: 6px;
margin-right: auto ;
margin-left: auto;
}
#mainnav ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-right: auto;
margin-left: 0px;
}
#mainnav {
width : 1306px;
margin-right: auto;
margin-left: auto;
float: left;
background-position: left 0%;
}

< ;body>

< img src="LogoUse.png" width="1306" height="473" alt=""/>

Content for id "main" Goes Here

Office hours

Location

回复讨论(解决方案)

导航用table不就行了

table宽度设100% 自动就平分了

具体点！新手

 <!doctype html>  <html>  <head>  <meta charset="utf-8">  <title>communityAdvance</title>  <link href="styles/main.css" rel="stylesheet" type="text/css">  <style type="text/css">      body {}#wrapper {background-color: #20455A;width: 100%;min-width: 740px;max-width: 1306px;margin-left: auto;margin-right: auto;left: 5%;right: 5%;}header {background-color: #6CEBE5;margin-right: auto;margin-left: auto;width: 100%;float: left;}#footer ul {background-color: #6CEBE5;text-decoration: none;list-style-type: none;margin-right: auto;margin-left: auto;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;width: 1306px;}#footer li {width: 33%;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;text-align: center;text-decoration: none;float: left;background-color: #6CEBE5;}#mainnav li {width: 20%;float: left;}a {font-weight: bold;text-decoration: none;}a:link {color: #FF6600;}#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {text-decoration: none;background-color: #43A6CB;}A:visited {color: #FF944C;}a:hover, a:active, a:focus {background-color: #7F3300;text-decoration: underline;}#mainnav a {display: block;float: left;text-align: center;background-color: #4d4d4d;color: #F1EBEB;text-transform: uppercase;padding-top: 6px;padding-bottom: 6px;margin-right: auto;margin-left: auto;}#mainnav ul {list-style-type: none;margin-top: 0px;margin-bottom: 0px;padding-top: 0px;padding-bottom: 0px;margin-right: auto;margin-left: 0px;}#mainnav {width: 1306px;margin-right: auto;margin-left: auto;float: left;background-position: left 0%;}  </style>  </head>    <body>  <div id="wrapper">    <div id ="head">    <header id="top">    <img src="LogoUse.png" width="1306" height="473" alt=""/>    <nav id="mainnav">     <!-- <ul>        <li><a href="CommunityAdvance.html">home</a></li>        <li><a href="Untitled-4.html">about us</a></li>        <li><a href="#">programs</a></li>        <li><a href="#">volunteer/job</a></li>        <li><a href="#">special events</a></li>        <li><a href="#">give/donate</a></li>      </ul>-->      <table style="width:100%;text-align:center;">        <tr>            <td style="border-right:1px solid red;">home</td>  <!--线出来了 后面效果自己慢慢调吧-->            <td>about us</td>            <td>>programs</td>            <td>volunteer/job</td>            <td>special events</td>            <td>give/donate</td>        </tr>      </table>      </nav>    </header>  </div>    <div id="main">Content for  id "main" Goes Here</div>    <div id="footer">    <ul>      <li><a href="www.google.com">Office hours</a></li>      <li><a href="www.google.com">Location</a></li>      <li><a href="www.google.com">Contact us</a></li>    </ul>  </div>    </div>  </body>  </html>

Copy after login

CSS能控制网页上的任何HTML元素，你却说很难控制。。。。。。
那是因为你的表格td宽度还是用的别人的宽度，而你的td却增加了一个，所以掉下去了

太感谢了各位。