Renderings:
Code:
Style section style.css:
*{ margin: 0; padding: 0; } body{ background-color: #673929; font-size: 16px; font-family: "微软雅黑" } #conters{ margin: 0 auto; width: 900px; } #header{ height: 220px; margin-bottom: 5px; position: relative; } #icon-list{ position: absolute; top:170px; right: 30px; width: 130px; height: 30px; /* font-size: 0;*/ } #nav{ height: 30px; background: #09c; margin-bottom: 5px; font:18px/30px 微软雅黑; color: #fff; letter-spacing: 2px; text-align: center; } #nav a{ text-decoration: none; } a:link{ color: white; } a:hover{ color: yellow; } a:visited{ color: white; } a:active{ color: purple; } #main{ background-color: red; /* margin-bottom: 5px;*/ } #aside{ width: 300px; float: left; background: #6cf; text-align: center; font-size: 14px; color: #000; } #aside h2{ color: black; text-align: center; margin-top: 2em; letter-spacing: 1px; } #imglist{ width: 130px; margin:0 auto; } .pol{ width: 170px; padding: 10px; background-color: #eee; border:1px solid #bfbfbf; box-shadow: 2px 2px 4px #aaa; border-radius: 5px; } #imglist img{ width: 65px; height: 75px; margin:0 auto; font-size: 0; } .rotate-left{ transform:rotate(7deg); -webkit-transform-style: rotate(7deg); -moz-transform-style: rotate(7deg); -ms-transform-style: rotate(7deg); transform-style: rotate(7deg); } .rotate-right{ transform:rotate(-7deg); -webkit-transform-style: rotate(-7deg); -moz-transform-style: rotate(-7deg); -ms-transform-style: rotate(-7deg); transform-style: rotate(-7deg); } #inglist img:hover{ -webkit-transform-style: scale(1.2); -moz-transform-style: scale(1.2); -ms-transform-style: scale(1.2); transform-style: scale(1.2); } #aside th{ font-weight: 1px; letter-spacing: 1px; } #aside table{ text-align: center; padding: 10px; } #content{ width: 595px; float: right; background-color: #cff; margin-bottom: 5px; } .subcon{ width: 570px; margin:10px auto; clear: both; /* border:1px dashed #000;*/ } .subcon img{ margin:5px; padding: 5px; float: left; } .subcon .suntext{ width: 60px; float: left; margin:5px; } .subcon h2{ margin:5px; color: #673929; } .subcon p{ font:16px/2em; } #footer{ /* width: 900px;*/ height: 60px; line-height: 60px; background-color: #6cf; clear: both; margin-top: 5px; text-align: center; } #fix{ position: fixed; top: 100px; left:5px; } #fix img{ height: 100px; width: 100px; }
The overall structure of part index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>咖啡店</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="conters"> <div id="header"> <p><img src="images/banner.jpg" ></p> <div id="icon-list"> <img src="images/1.bmp" alt=""> <img src="images/2.bmp" alt=""> <img src="images/3.bmp" alt=""> <img src="images/4.bmp" alt=""> </div> </div> <div id="nav"> <a href="#">咖啡MENU|</a> <a href="#">咖啡COOK|</a> <a href="#">咖啡STORY|</a> <a href="#">咖啡NEWS|</a> <a href="#">咖啡PARTY</a> </div> <div id="main"> <div id="aside"> <div id="menu"> <h2>咖啡MENU</h2> <table> <th> <tr> <td> </td> <td>拿铁</td> <td>卡不起落</td> <td>摩卡</td> <td>>TD</Agricultural Expo </tr> <tr><td> </td> <td>uius</td> <td>whd</td> <td>duhd</td> <td>dwhu</td> </tr> </th> <tr> <td>大杯</td> <td>45</td> <td>35</td> <td>35</td> <td>35</td> </tr> <tr> <td>中杯</td> <td>25</td> <td>25</td> <td>25</td> <td>25</td> </tr> <tr> <td>小杯</td> <td>15</td> <td>15</td> <td>15</td> <td>15</td> </tr> </table> <div id="imagelist"> <div class="pol rotate-left"><img src="images/Cappuccino.jpg" alt=""></div> <div class="pol rotate-right"><img src="images/Espresso.jpg" alt=""></div> <div class="pol rotate-left"><img src="images/Mocha.jpg" alt=""></div> <div class="pol rotate-right"><img src="images/Latte.jpg" alt=""></div> </div> </div> <div class="box"> </div> </div> </div> <div id="content"> <div class="subcon"> <img src="images/Cappuccino.jpg" alt=""> <div class="subtext"> < H2 >咖啡名称</ h2 > < p > lorem ipsum carrots, enhanced rebates. The delights of the, it was born, is bound by the flattery of her wishes. </ P > </ div > </ div > < div class = "Subcon" > < img src = "images / Espresso.jpg" alt = "" > < div class = "subtext" > < H2 >咖啡名称< / h2 > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pleasures, it is great pleasure to pleasure this time. </ P > </ div > </ div > < div class = "Subcon" > < img src = "images / Latte.jpg" alt = "" > < div class = "subtext" > < H2 >咖啡名称< / h2 > < p > lorem ipsum carrots, enhanced rebates. What is to be, but, no, something extremely troublesome. </ P> </ Div > </ div > < div class = "Subcon" > < img src = "images / Mocha.jpg" alt = "" > < div class = "subtext" > < H2 >咖啡名称</ H2 > < p > lorem ipsum carrots, enhanced rebates. Pain, discomfort and pain, the work is called! </ P > </ DIV > </ DIV > "Subcon" > < img src = "images / Latte.jpg" alt = "" > < p > lorem ipsum carrots, enhanced rebates. Neither of which we are able to reason, they deserted the general, whom the master builder, explain to you that he hates to follow the flight of the appointed times, and because it is an impediment to deleniti had not been in the enduring of the ancestors. </ P > </ DIV > </ DIV > </ DIV > < DIV id = "footer" > < p >我是页脚哇!! </ p > < div> <div id="fix"> <img src="images/Latte.jpg" alt=""> <p>我是广告域哇</p> </div> </body> </html>