用css+div編寫的商城頁面
阿新 • • 發佈：2019-01-06
<!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>©</sup>版權所有mine </div> </div> </div> </body> </html>