時間：2023-10-12 10:18:02 | 來源：網(wǎng)站運(yùn)營
時間：2023-10-12 10:18:02 來源：網(wǎng)站運(yùn)營
HTML CSS復(fù)習(xí)之制作靜態(tài)網(wǎng)頁：
在線咨詢
<!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;}也會有不完善的地方可以指出來討論呀，加油！關(guān)鍵詞：靜態(tài),復(fù)習(xí)
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
