0

我似乎无法弄清楚如何使我的导航栏和页面底部的表格与页面边缘齐平，以便在内容和边缘之间的左右上下没有间隙如果那有意义的话？

该页面处于起步阶段，因此代码有些地方有点乱，所以提前抱歉。

HTML：

<html><html
<head>
 <title> Blog | GameHub</title>

 <link rel="icon" type="image/png" href="Pictures/favicon.ico">
 <link rel="stylesheet" type="text/css" href="new.css">


 <table class="table" cellspacing="0">
  <tr>
   <td class="blog_tops" valign="middle">
    <span>
     <div id="blog_tools">
      <ul>
       <li><a href="">New Post</a></li>
       <li><a href="">UserName</a></li>
      </ul>
   </div>
  </span>
 </td>
</tr>
<tr>
 <td colspan="2" div id="header"><a href="#"><image div id="logo" border="0" al="lt" height="30px" width="200 src=Pictures/trans_logo.png"></a>
</tr>
<tr>
 <td colspan="2" class="tops" valign="middle">
  <span>
   <div id="navbar">
    <ul>
     <li><a href="">Home</a></li>
     <li><a href="articles.html">Articles</a></li>
     <li><a href="forum/overview.php">Forums</a></li>
     <li><a href="contact_us.html">Contact</a></li>
    </ul> 
   </div>
  </span>
 </td>
</tr>
<tr>
 <td class="blog_post_title"><div style="float:left;font-size:12px;font-family:verdana;padding:0px 0px 0px 10px;">UserName</div><div style="float:right;font-size:12px;font-family:verdana;padding:0px 10px 0px 0px;">Date</div></td></tr>'    
 <td class="blog_post_content"><p>TextTextTextTextTextTextTextTextTextTextText</p>
 </td>
</tr>    
<tr>
 <td class="blog_post_title"><div style="float:left;font-size:12px;font-family:verdana;padding:0px 0px 0px 10px;">UserName</div><div style="float:right;font-size:12px;font-family:verdana;padding:0px 10px 0px 0px;">Date</div></td></tr>'    
 <td class="blog_post_content"><p>TextTextTextTextTextTextTextTextTextTextText</p>
 </td>
</tr>    
 <tr>
 <td class="blog_post_title"><div style="float:left;font-size:12px;font-family:verdana;padding:0px 0px 0px 10px;">UserName</div><div style="float:right;font-size:12px;font-family:verdana;padding:0px 10px 0px 0px;">Date</div></td></tr>'    
 <td class="blog_post_content"><p>TextTextTextTextTextTextTextTextTextTextText</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 </td>

</tr>
<table class="footer">
 <tr> 
  <td class="copyright">
   <h4></h4>


 </td>
 </td>
</tr>
</table>
</table>
</body>
</html>

CSS：

   #page {
width: 2000px
height: auto;
margin: 0 auto;
background-color: #333;
padding: 0px; }


  #navbar ul {
background: #333;
float: none;
padding: 0px 0px 2px 0px;
text-align: left; 
list-style: none; 
width: 100%;
height: 0px; 
vertical-align: top;
min-width: 1046px; }


  #navbar ul li {
display: inline; 
list-style: none; 
vertical-align: top; }


 #navbar ul li a {
background: #333;
color: white;
padding: 5px 0px 5px 3px;
text-decoration: none;
display: inline;
border-width: 0px 0px 0px 0px;
border-color: #ff6000; 
border-style: solid; 
vertical-align: middle;
text-align: middle;
float: center;  }




 #navbar ul li a:hover {
background: #333;
webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;   
color: #ff6000;}

   #blog_tools ul {
background: #232323;
float: none;
padding: 0px 0px 0px 0px;
text-align: right;
list-style: none;
width 100%;
height: 25px;
vertical-align: top; }

  #blog_tools ul li {
display: inline;
list-style: none;
vertical-align: top; }

  #blog_tools ul li a {
background: #232323;
color: #fff;
text-align: right;
padding: 0px 5px 0px 3px;
text-decoration: none;
display; inlne;
border-width: 0px;
vertical-align: middle;
text-align: middle;
float: center; }

   #blog_tools ul li a:hover {
background: #232323;
webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
color: #01c3f3; }

 .table {
border-width: 2px;
border-color: #fff;
width: 100%; 
margin: 0; 
padding: 0px 0px 0px 0px; 
text-align: center;
border-spacing: 0px;
cellspacing: 0px;
border-collapse: collapse;} 

    #header {
height: 40px;
width: 100%;
background: #333333;
border: 0px;
border-spacing: 0px; }


 #logo {
padding: 0px 0px 0px 50px; }

.tops {
height: 50px;
width: 100%; 
border-spacing: 0px;
padding: 0px 0px 0px 0px;
vertical-align: center;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #ff6000; }


.blog_tops {
height: 0px;
width: 100%; 
border-spacing: 0px;
padding: 0px 0px 0px 0px;
vertical-align: center;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #ff6000; }


h1 {
text-decoration: underline;
font-family: verdana;
font-size: 20px; 
padding: 0px;
text-align: top; }

h2 {
font-family: verdana; }

h3 {
font-family: verdana; }

p {
font-family: verdana;
font-size: 11pt;
text-align: left;
padding: 0px 0px 0px 10px; }

 a {
font-family: verdana; }


td {
border-width: 0px;
border-style: dotted; 
border-color: olive; 
padding: 0px; }

tr {
padding: 0px;}

.copyright {
height: 200px;
width: 500px;
background-color: #3a3a3a;
padding: 0px 100px 0px 100px; 
border-top: 1px solid rgba(0,0,0,2); }

.copyright h4 {
color: #fff; }

.footer {
width: 100%;
margin: 20px auto;
background: #232323;
padding: 10px 400px 10px 400px; }

在此先感谢，瑞安

4

1 回答 1

2

不要使用表格进行布局！

表格元素用于表格数据，仅此而已。当您真正开始编写 HTML 时，请使用 HTML5 和语义正确的元素。

所以代替<div id="navbar">你使用<nav>.

也不要使用内联样式。

那里有成千上万的教程，如何编写语义正确的 HTML(5) 以及关于表示和内容的分离。

并且假设视口宽度为 2000 像素#page {width: 2000px;}（

最后但并非最不重要的是，您的代码中有几个拼写错误。因此，例如，您已经忘记了很多像这里这样的引用width="200 src=Pictures/trans_logo.png">。验证您的代码始终是一个好主意。

于 2013-09-15T14:33:02.510 回答