时间：2023-10-12 10:18:02 | 来源：网站运营
时间：2023-10-12 10:18:02 来源：网站运营
HTML CSS复习之制作静态网页：
在线咨询
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="coffee.css"></head><body> <div id="container"> <div id="header"> <p><img src="../images/banner.jpg" alt=""></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="#">咖啡MENU</a> <a href="#">咖啡MENU</a> <a href="#">咖啡MENU</a> <a href="#">咖啡MENU</a> </div> <div id="main"> <div id="aside"> <h2>COFFEE MENU</h2> <table> <tr> <th ></th> <th >拿铁<br />Latte</th> <th >卡布奇诺<br />Cappuccino</th> <th >摩卡<br />Mocha</th> <th >浓缩咖啡<br />Espresso</th> </tr> <tr> <th scope="row" >大杯</th> <td>35</td> <td>35</td> <td>35</td> <td>30</td> </tr> <tr> <th scope="row" >中杯</th> <td>30</td> <td>30</td> <td>30</td> <td >25</td> </tr> <tr> <th scope="row" >小杯</th> <td>25</td> <td>25</td> <td>25</td> <td>20</td> </tr> </table> <div id="imglist"> <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 class="pol rotate-left"><img src="../images/Espresso.jpg" alt=""></div> <div class="pol rotate-right"><img src="../images/Cappuccino.jpg" alt=""></div> </div> </div> <div id="content"> <div class="subcon"> <!--.subcon*4>img+.subtext>h2+p--> <div class="subcon"> <img src="../images/Mocha.jpg" alt=""> <div class="subtext"> <h2>Mocha</h2> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet asperiores expedita delectus nobis ipsa fugit officia odit inventore repudiandae! Excepturi, consectetur? Sunt aliquam ut modi provident, vero praesentium. Blanditiis, a?</p> </div> </div> <div class="subcon"> <img src="../images/Latte.jpg" alt=""> <div class="subtext"> <h2>Latte</h2> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet asperiores expedita delectus nobis ipsa fugit officia odit inventore repudiandae! Excepturi, consectetur? Sunt aliquam ut modi provident, vero praesentium. Blanditiis, a?</p> </div> </div> <div class="subcon"> <img src="../images/Espresso.jpg" alt=""> <div class="subtext"> <h2>Espresso</h2> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet asperiores expedita delectus nobis ipsa fugit officia odit inventore repudiandae! Excepturi, consectetur? Sunt aliquam ut modi provident, vero praesentium. Blanditiis, a?</p> </div> </div> <div class="subcon"> <img src="../images/Cappuccino.jpg" alt=""> <div class="subtext"> <h2>Cappuccino</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat eveniet ex sequi, quae ipsum magni facilis. Debitis obcaecati enim aliquid quidem? Officiis, esse. Eligendi debitis odit dolorum dolore similique ratione?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet asperiores expedita delectus nobis ipsa fugit officia odit inventore repudiandae! Excepturi, consectetur? Sunt aliquam ut modi provident, vero praesentium. Blanditiis, a?</p> </div> </div> </div> </div> </div> <div id="footer"> <p>coffee menu</p> </div> </div> <div id="l-fix"> <img src="../images/Latte.jpg" alt=""> </div></body></html>CSS部分的代码：*{ margin:0; padding:0;}body{ font-size: 16px; color: #673929;}#container{ margin: 0 auto; width: 900px; position: relative;}#icon-list{ position: absolute; top: 170px ; right: 30px; width: 130px; height: 30px; font-size: 0;}#header{ height: 220px; margin-bottom: 5px;}#nav{ height: 30px; margin:5px; background-color: #09c; font: 18px; line-height: 30px;/*行高*/ color:#fff; letter-spacing: 2px; text-align: center; width: auto;}#nav a{ text-decoration: none;}a:link{ color:#fff; /*text-decoration: none;*/}a:visited{ color: #fff; /* text-decoration: none;*/}a:hover{ color:yellow; /* text-decoration: none;*/}a:active{ color: yellow;}#main{ background-color: #000; /* height:2050px;*/}#aside{ float:left; width: 300px; background-color: #6cf; text-align: center ; font-size: 14px;}#aside h2{ margin: 20px;}#imglist{ width: 130px; margin: 0 auto;}.pol{ width: 85px; padding: 10px; background-color: #eee; border: 1px solid #bfbfbf; box-shadow: 2px 2px 4px #aaa; border-radius: 5px;}#imglist img{ height: 95px; width: 85px; margin: 0 auto;;}.rotate-left{ -ms-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg);}.rotate-right{ -ms-transform: rotate(-7deg); -o-transform:rotate(-7deg); -webkit-transform:rotate(-7deg); transform:rotate(-7deg);}table{ color: #000;}#content{ float:right; width:595px; /* height:2050px;*/ margin-bottom: 5px; background-color: #cff;}.subcon{ width: 570px; margin: 10px auto; clear: both;}.subcon img{ margin:5px; padding: 5px; float: left; border: 1px dasher #000;}.subcon .subtext{ width: 60%; float: left; margin: 5px;}.subcon h2{ margin: 5px;}.subcon p{ font:16px/2em;}#footer{ height: 60px; line-height:60px; background-color: #6cf; clear:both; text-align: center;}#l-fix{ position: fixed; top:100px; left:15px;}也会有不完善的地方可以指出来讨论呀，加油！关键词：静态,复习
