Question

我正在尝试创建一个类似于下面链接中的图像的网站，用于我最后的学校项目，但一切都不会排队。

enter image description here

继承代码！

样式表

/ * CSS Document * /

Body{text-align:center; font-family:"Britannic Bold"; color:#FFF; background-                color:#000;text-align:center;}
h1{font-size:100px; color:#FFF}
h4{font-size:50px; color:#FFF}
h3{text-align:center}
#logo     {float:left;background-color:#FF0; width:200px;height:200px;text-align:left;}
#header   {float:right;background-color:#F0F; text-align:center;display:inline-block;       width:89%; height:200}
#subheader{float:right;background-color:#0C0; text-align:center;width: 700px;height:50px; margin-right: 500px;}
#leftnav  {float:left;width: 200px; padding:0px;background-color:#0CF; text-align:center; margin-top: 15px;height:500px;}
 #footer   {float:bottom;background-color:#0F0; text-align:center;position:fixed;
       bottom: 0;; margin-left: 900px;color:#F0F}
 #rightbar {float:left;width: 200px; padding: 20px;background-color:#FC0; text- align:center}
 #content  {float:left;width: 1383px; padding: 20px;background-color:#FF0; text-align:center}
 a:link {color:#FFF}    
 a:visited {color:#FFF;} 
 hr {color:#FFF;}
 table, th, td {border: 1px solid #FFF;;text-align:center}
 ul {list-style-position: inside;}
 table, th, td {border: 1px solid #FFF;}
 #tableContainer-1 {height: 100%;width: 100%;display: table;}
 #tableContainer-2 {vertical-align: middle;display: table-cell;height: 100%; }
 #myTable {margin: 0 auto;}

我们的产品代码

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Summer's Scrumdiliumcious Sweets</title>
   <link href="Stylesheet.css" rel="stylesheet" type="text/css" />
   <head>
<body>
   <div id="logo"> <img src="Logo.png" width="200" height="200"/> </div>
   <div id="footer"> Copyright Summer Woody 2014 © </div>
   <div id="header">
      <center>
         <h1><b>Our Products</b></h1>
      </center>
   </div>
   <div id="subheader">
      <h2> <a href="Home.html"> Home </a> &nbsp &nbsp <a href="About Us.html">About   Us</a>&nbsp &nbsp <a href="Our Products.html"> Our Products</a>&nbsp &nbsp <a href="Shipping and Returns.html".> Shipping and Returns </a>  </h2>
   </div>
   <div id= "leftnav">
      <h2> News and Announcments </h2>
      <hr/>
      <br /> 
      <h3>This week's  special: <br/> Our Red Velevet Cupcake with Homeade Cream Cheese Icing <br/><br/>  6 for $12  <br/> or <br/>  12 for $24 </h3>
   </div>
   <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
   <div id="tableContainer-1">
   <div id="tableContainer-2">
   <table id="myTable" border>
   <table>
      <tr>
         <td> <img src="ID-10037905.jpeg" alt="Cherry Chocolate Pie" align="middle" width="100"     height="200" /> </td>
         <td>  </td>
         <td> <img src="ID-100134439.jpeg" alt=" Chocolate Pecan Cake" align="middle" width="100" height="200" /> </td>
      </tr>
   </table>
</body>
</html>

Answer 1

水平定位div使用 float：left css为div。通常从上到下的两个div，你添加宽度和高度和 float：left ;。在这些div的末尾加上一个div clear：both 语句 - 它清除了一行，从现在起你再次使用垂直定位。除非您需要响应页面，否则您可以通过这种方式将所有内容放在页面上。

Answer 2

#logo {
float: left;
background-color: #FF0;
width: 15%;
height: 200px;
text-align: left;
}



   <div id="footer"> Copyright Summer Woody 2014 © </div>

这应放在</body>上方，但您已将其放在header上方。

可以进行更多更改，例如结尾div和表未正确关闭。更好的是，我会给你修改后的代码本身，因为更改更多。

   body{text-align:center; font-family:"Britannic Bold"; color:#FFF; background-                color:#000;text-align:center;}
h1{font-size:100px; color:#FFF}
h4{font-size:50px; color:#FFF}
h3{text-align:center}
#logo     {float:left;background-color:#FF0; width:15%;height:200px;text-align:left;}
#header   {float:right;background-color:#F0F; text-align:center;display:inline-block;       width:85%; height:200}
#subheader {
background-color: #0C0;
width: 700px;
margin: auto;
padding: 1px 10px;
}
#leftnav  {float:left;width: 200px; padding:0px;background-color:#0CF; text-align:center; margin-top: 15px;height:500px;}
 #footer   {text-align:center;position:fixed;
       bottom: 0;; margin-left: 900px;}
 #rightbar {float:left;width: 200px; padding: 20px;background-color:#FC0; text- align:center}
 #content  {float:left;width: 1383px; padding: 20px;background-color:#FF0; text-align:center}
 a:link {color:#FFF}    
 a:visited {color:#FFF;} 
 hr {color:#FFF;}
 table, th, td {border: 1px solid #FFF;;text-align:center}
 ul {list-style-position: inside;}
 table, th, td {border: 1px solid #FFF;}
#tableContainer-1 {
height: 50%;
display: table;
width: 467px;
margin: auto;
}
#tableContainer-2 {vertical-align: middle;display: table-cell; }
 #myTable {margin: 0 auto;}
#footer p {
  text-align: center;
  background-color:#0F0; 
  color:#F0F;
  width: 50%;
  margin: auto;
}
#footer {
  width: 100%;
  margin: auto;
  position: fixed;

}

修改HTML：

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Summer's Scrumdiliumcious Sweets</title>
   <link href="Stylesheet.css" rel="stylesheet" type="text/css" />
   <head>
<body>
   <div id="logo"> <img src="Logo.png"/> </div>
   <div id="header">
      <center>
         <h1><b>Our Products</b></h1>
      </center>
   </div>
   <div id="subheader">
      <h2> <a href="Home.html"> Home </a> &nbsp &nbsp <a href="About Us.html">About   Us</a>&nbsp &nbsp <a href="Our Products.html"> Our Products</a>&nbsp &nbsp <a href="Shipping and Returns.html".> Shipping and Returns </a>  </h2>
   </div>
   <div id= "leftnav">
      <h2> News and Announcments </h2>
      <hr/>
      <br /> 
      <h3>This week's  special: <br/> Our Red Velevet Cupcake with Homeade Cream Cheese Icing <br/><br/>  6 for $12  <br/> or <br/>  12 for $24 </h3>
   </div>
   <div id="tableContainer-1">
   <div id="tableContainer-2">
   <table id="myTable" border>
      <tr>
         <td> <img src="ID-10037905.jpeg" alt="Cherry Chocolate Pie" align="middle" width="100"     height="200" /> </td>
         <td>  </td>
         <td> <img src="ID-100134439.jpeg" alt=" Chocolate Pecan Cake" align="middle" width="100" height="200" /> </td>
      </tr>
   </table>
     </div>
  </div>
  <div id="footer"><p> Copyright Summer Woody 2014 ©</p> </div>

</body>
</html>

DEMO

定位DIV图层

2 个答案: