CSS-相關練習4-HTML與CSS綜合(婚紗攝影)
阿新 • • 發佈：2019-01-08
對應css檔案 @charset "utf-8"; *{ margin: 0px; padding: 0px; } .container{ width: 1200px; margin: 0 auto; } .top{ background: url("../img/topbg.png"); } .logo{ width:1000px; margin:auto; } .banner{ width: 1000px; margin-left: 100px; background-color: #D6CAB4; line-height: 40px; height: 40px; } .banner ul{ list-style: none; } .banner ul li{ float: left; margin-left: 35px; } .banner a{ color: #664429; text-decoration: none; font-family: KaiTi; font-weight: bold; font-size: 16px; } .lunbo{ clear: left; margin-left: 100px; margin-top: 10px; } .main{ background: url("../img/conbg.png"); width: 1200px; height: 400px; }
老師程式碼： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <link href="css/css.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <div class="top"> <div class="logo"> <img src="img/logo.png"> </div> <div class="banner"> <ul> <li><a href="">首頁</a></li> <li><a href="">關於xiur</a></li> <li><a href="">服裝</a></li> <li><a href="">化妝</a></li> <li><a href="">髮型</a></li> <li><a href="">婚禮</a></li> <li><a href="">整體造型</a></li> <li><a href="">平面攝影</a></li> <li><a href="">活動展示</a></li> <li><a href="">聯絡我們</a></li> <li><a href="">留言板</a></li> </ul> </div> <div class="lunbo"> <img src="img/img1.png" alt="美女"> </div> </div> <div class="main"> </div> </div> </body> </html>
/* *Copyright (c) 2017，煙臺大學計算機學院 All rights reserved. *檔名稱：關於HTML的練習 *作 者：張晴晴 *完成日期：2017年11月25日 *版 本 號：v1.0 * *問題描述：HTML5-JavaScript *輸入描述： 無 *程式輸出： 無 */ <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>第四道題目</title> <style> .t4{ position:absolute; left:0px; top:0px; width:30000px; height:10000px; z-index:-1; } #t4{ position:absolute; left:0px; top:0px; } header{ width:80%; height:20%; } article{ width:80%; height:70%; } footer{ width:80%; height:10%; } #t4 ul{ list-style:none; } #t4 ul li a{ float:left; left:50px; padding:10px; } #t4 a{ list-style:none; text-decoration:none; background-color:#FFC68C; color:#B75B00; } #t4 a:hover{ text-decoration:none; background-color:#974B00; color:#FFF; } </style> </head> <body> <div class="t4"> <img src="imgs4/bg.png" width="100%" height="100%"/></div> <div id="t4"> <header> <img src="imgs4/logo.png" align="middle"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">關於xiur</a></li> <li><a href="#">服裝</a></li> <li><a href="#">化妝</a></li> <li><a href="#">髮型</a></li> <li><a href="#">婚禮</a></li> <li><a href="#">整體造型</a></li> <li><a href="#">平面攝影</a></li> <li><a href="#">活動展示</a></li> <li><a href="#">聯絡我們</a></li> <li><a href="#">留言板</a></li> </ul> </header> <arctle> <img src="imgs4/img1.png" align="middle"> </arctle> <footer> <img src="imgs4/conbg.png" width="100%" height="100%"> </footer> </div> </body> </html>
執行結果：
