1. 程式人生 > >用css+div編寫的商城頁面

用css+div編寫的商城頁面

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>首頁</title>
  <style>
   #i{
    margin: 0 450px 0 450px ;
   }
   #l{
    margin: 10px 550px 0 550px;
   }
   #main{
    border: 1px solid black;
    width: 1500px;
    height: 2500px;
   }
   #a{
    border: 1px solid black;
    width: 1498px;
    height: 70px;
    margin: 1px 2px 0;
   }
   #a1{
   
    width: 150px;
    height:70px;
    background: url(logo.gif) no-repeat;
    float: left;
   }
   #a2{
    width: 350px;
    height:70px;
    background: url(header.jpg) no-repeat;
    float: left;
    margin: 0 0 0 200px;
   }
   #a3{
    width: 300px;
    height:50px;
    float: left;
    padding: 20px 0 0 50px;
   }
   #b{
    border: 1px solid #000;
    width: 1490px;
    height:30px;
    margin: 1px 2px 0;
    background-color:pink;
    padding: 10px;
   }
   
  </style>
 </head>
 <body>
  <div id="main">
   <div id="a">
    <div id="a1"></div>
    <div id="a2"></div>
    <div id="a3">
     <a href="#">登入</a>
     <a href="#">註冊</a>
     <a href="#">購物車</a>
    </div>
   </div>
   
   
   <div id="b">
    <a href="#">首頁</a>
    <a href="#">手機數碼</a>
    <a href="#">電腦辦公</a>
    
    
   </div>
   
   
   
   <div id="c"></div>
   
   
   
   
   <div id="d">
    <font>最新商品</font>
     <img src="title2.jpg" />
    <table width="100%">
      <tr>
       <td rowspan="2">
        <img src="big01.jpg" />
       </td>
       <td colspan="3">
        <img src="middle01.jpg" />
        
       </td>
       <td>
        <img src="small08.jpg" />
        <p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p>
       </td>
       <td>
        <img src="small08.jpg" />
        <p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p>
       </td>
       <td>
        <img src="small08.jpg" />
        <p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p>
       </td>
      </tr>
      <tr>
      
       <td>
        <img src="small08.jpg" /><p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p></td>
      </tr>
     </table>
   </div>
   
   
   <div>
    <img src="ad.jpg" width="100%"/aalign="center">
   </div>
   
   
   <div>
    <font>最新商品</font>
     <img src="title2.jpg" />
    <table width="100%">
      <tr>
       <td rowspan="2">
        <img src="big01.jpg" />
       </td>
       <td colspan="3">
        <img src="middle01.jpg" />
        
       </td>
       <td>
        <img src="small08.jpg" />
        <p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p>
       </td>
       <td>
        <img src="small08.jpg" />
        <p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p>
       </td>
       <td>
        <img src="small08.jpg" />
        <p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p>
       </td>
      </tr>
      <tr>
      
       <td>
        <img src="small08.jpg" /><p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >電飯煲</a></p>
        <p align="center">100</p></td>
      </tr>
     </table>
   </div>
   
   
   
   <div>
    <img src="footer.jpg" width="100%" />
   </div>
   
   
   
   <div >
    
     <div id=i>
      <a href="#">關於我們</a>  
      <a href="#">聯絡我們</a>  
      <a href="#">招賢納士</a>  
      <a href="#">法律宣告</a>  
      <a href="#">您的意見</a>  
     </div>
     <div id="l">
      copyright<sup>&copy;</sup>版權所有mine
     </div>
   </div>
  </div>
 </body>
</html>