效果图：
代码实现：
样式部分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; }
整体结构部分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> </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 dolor sit amet, consectetur adipisicing elit. Voluptates, blanditiis tenetur natus illum velit.</p> </div> </div> <div class="subcon"> <img src="images/Espresso.jpg" alt=""> <div class="subtext"> <h2>咖啡名称</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, magni voluptatum illum tempore voluptatem iste.</p> </div> </div> <div class="subcon"> <img src="images/Latte.jpg" alt=""> <div class="subtext"> <h2>咖啡名称</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae esse nisi, nulla, aliquid architecto molestias.</p> </div> </div> <div class="subcon"> <img src="images/Mocha.jpg" alt=""> <div class="subtext"> <h2>咖啡名称</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, molestiae labore tenetur dolores ipsam dicta!</p> </div> </div> <div class="subcon"> <img src="images/Latte.jpg" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla architecto quos possimus ratione deserunt, explicabo id odit eaque deleniti minus enim perferendis maiores impedit tempora eius sequi fuga quia.</p> </div> </div> </div> <div id="footer"> <p>我是页脚哇！！</p> </div> </div> <div id="fix"> <img src="images/Latte.jpg" alt=""> <p>我是广告域哇</p> </div> </body> </html>
原文：https://www.cnblogs.com/kaoju/p/12623847.html