网页排字求帮助
日期：2014-05-16 浏览次数：20618 次
网页排版求帮助
我想做一个简单的小网站。想自己去写这个网站的模板，但是用css对网页元素进行布局的时候，发]现很难去控制。
图片是这个主页的样子。
导航条的位置怎么去控制。
。
这是我做出来的，差距很大。
怎么可以让导航的宽度和父类的一样。第二怎么让每一个平均去分配这个宽度。
这是我的代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>communityAdvance</title>
<link href="styles/main.css" rel="stylesheet" type="text/css">
</head>
@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>
<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&g
我想做一个简单的小网站。想自己去写这个网站的模板，但是用css对网页元素进行布局的时候，发]现很难去控制。
图片是这个主页的样子。
导航条的位置怎么去控制。
。这是我做出来的，差距很大。
怎么可以让导航的宽度和父类的一样。第二怎么让每一个平均去分配这个宽度。
这是我的代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>communityAdvance</title>
<link href="styles/main.css" rel="stylesheet" type="text/css">
</head>
@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>
<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&g
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
