我似乎解决不了我的问题,因为我在 BODY 前面有一个空格。
<html>
<head>
<link rel='stylesheet' type='text/css' href='style.css' />
<link rel='shortcut icon' href='img/favicon.ico' />
</head>
<body>
<div name='header_area'>
<div class='wrapper'>
<div class='content'>
<table class='header_table'>
<tr>
<td class='table_cell_left'>
<a href='index.php'><img src='img/logo.png' /></a>
</td>
<td class='table_cell_right'>
Derp
</td>
</tr>
</table>
</div>
<div name='navigation'>
<ul class='nav'>
<li><a class='nav_link' href='index.php'>HOME</a></li>
<li><a class='nav_link' href='?action=forum'>FORUM</a></li>
<li><a class='nav_link' href='?action=server'>SERVER</a></li>
<li><a class='nav_link' href='?action=donate'>DONATE</a></li>
</ul>
</div>
</div>
</div>
<div name='content_area'>
<div class='wrapper'>
<div class='content_area_box'>
test
</div>
</div>
</div>
</body>
</html>
样式表:
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
body {
width:100%;
font-family:'Calibri';
font-size:16px;
background-image:url('img/pattern.png');
background-repeat:repeat;
background-color:#F0F2F3;
}
.wrapper {
margin:0 auto;
width:900px;
}
.content {
margin:10px;
}
.header_table {
width:100%;
border:none;
margin:30px auto;
}
.table_cell_left {
text-align:left;
vertical-align:middle;
}
.table_cell_right {
text-align:right;
vertical-align:middle;
}
.textbox {
padding:2px;
height:22px;
border:1px solid #CCCCCC;
background-color:#FFFFFF;
color:#000000;
}
.button {
cursor:pointer;
height:22px;
padding:2px 6px;
border:1px solid #CCCCCC;
background-color:#FFFFFF;
color:#000000;
-webkit-transition: background 0.4s linear, color 0.4s linear;
-moz-transition: background 0.4s linear, color 0.4s linear;
}
.button:hover, .button:focus {
background-color:#99CCCC;
color:#FFFFFF;
-webkit-transition: background 0.4s linear, color 0.4s linear;
-moz-transition: background 0.4s linear, color 0.4s linear;
}
.link:link, .link:visited {
color:#003399;
text-decoration:none;
}
.link:hover, .link:active, .link:focus {
color:#FF9933;
}
.nav {
list-style-type:none;
overflow:hidden;
background-color:#FFFFFF;
border:1px solid #CCCCCC;
}
.nav li {
float:left;
}
.nav_link:link, .nav_link:visited {
float:left;
border-right:1px solid #CCCCCC;
padding:10px 25px;
color:#000000;
background-color:#FFFFFF;
text-decoration:none;
font-weight:bold;
-webkit-transition:background 0.4s linear, color 0.4s linear;
-moz-transition:background 0.4s linear, color 0.4s linear;
}
.nav_link:hover, .nav_link:active, .nav_link:focus {
background-color:#99CCCC;
color:#FFFFFF;
-webkit-transition:background 0.4s linear, color 0.4s linear;
-moz-transition:background 0.4s linear, color 0.4s linear;
}
.content_area_box {
background-color:#FFFFFF;
border-left:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
}
这是我得到的结果图片。我不希望它有空格,我希望它从顶部开始。在我测试的每个浏览器中都会出现这种情况。
result
按钮)。你能否提供该链接? - 11684