Html 定位DIV层_Html_Css - Fatal编程技术网

Html 定位DIV层

html css

Html 定位DIV层,html,css,Html,Css,我正试图创建一个网站，看起来像下面链接中我的期末专题的图片，但一切都不会排成一行这是密码样式表 /*CSS文档*/ 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

我正试图创建一个网站，看起来像下面链接中我的期末专题的图片，但一切都不会排成一行

这是密码

样式表

/*CSS文档*/

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>


夏日美味的糖果
版权所有Summer Woody 2014（
我们的产品
   
新闻和公告



本周的特色菜：
我们的红色Velevet杯形蛋糕加家得乐奶油奶酪糖衣

6美元
或
12美元24美元

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

#logo { float: left; background-color: #FF0; width: 15%; height: 200px; text-align: left; } <div id="footer"> Copyright Summer Woody 2014 © </div>
修订的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>

夏日美味的糖果我们的产品新闻和公告本周的特色菜：我们的红色Velevet杯形蛋糕加家得乐奶油奶酪糖衣 6美元或 12美元24美元版权所有Summer Woody 2014©

嘿，你能在这里加把小提琴吗
<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>