Question

我似乎无法弄清楚如何制作我的导航栏，而我页面底部的表格与页面边缘齐平，因此内容之间，左下方之间没有间隙和边缘，如果有任何意义吗？

页面处于开始阶段，因此代码在某些地方有点乱，所以提前抱歉。

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; }

提前致谢，莱恩

Answer 1

不要使用表格进行布局！

table元素用于表格数据，没有别的。当你真正开始编写HTML时，请使用HTML5和语义正确的元素。

因此，您使用<div id="navbar">代替<nav>。

也不要使用内联样式。

有成千上万的教程，如何编写语义正确的HTML（5）和Separation of presentation and content。

假设视口宽度为2000px（#page {width: 2000px;}）也不是最新的，越来越多的用户使用带有小（呃）显示器（视口）的移动设备。

最后但并非最不重要的是您的代码中存在多个拼写错误。例如，你已经忘记了很多引用，例如width="200 src=Pictures/trans_logo.png">。要validate您的代码总是一个好主意。

如何让TR和TD元素跨越整个页面？

1 个答案: