HTML第5章：CSS3美化網頁元素：課後作業
阿新 • • 發佈：2019-01-31
頁面總寬度為400px，整體背錄顏色線性漸變（#CAEFFE#FFFED)
使用<h1>標籤排版文字標題，字型大小為18px，黑色文字陰影。
使用<p>標籤排版文字正文，首行縮排為2em.行高為22px，
首段第一個“美”字，字型大小為180x，加相顯示。黑色和白色文字陰影具體方向參考
素材效果圖。第二段中的“胸懷中滿溢…在我眼前”字型風格為傾斜。顏色為藍色，字
體大小為16px，正文其餘文字大小為12px.
最後一段文字帶下劃線。
使用外部樣式表建立頁面樣式。
>頁面中的字型顏色從提供作業素材的頁面效果圖中獲取。
>使用無序列表等HTML標籤有語義化的編輯頁面。
>女裝各分類名稱前的圖片使用背景圖片的方式實現，標題字型大小為18px，加相顯示。
分類內容字型大小為12px，超連結文字字型顏色為黑色，無下劃線。當滑鼠移至超連結文
本上時字型顏色為橙色（#F60），並且顯示下劃線。
>使用外部樣式表建立頁面樣式。
>頁面中其他的效果樣式見提供的作業素材中的頁面效果圖。
使用<h1>標籤排版文字標題，字型大小為18px，黑色文字陰影。
使用<p>標籤排版文字正文，首行縮排為2em.行高為22px，
首段第一個“美”字，字型大小為180x，加相顯示。黑色和白色文字陰影具體方向參考
素材效果圖。第二段中的“胸懷中滿溢…在我眼前”字型風格為傾斜。顏色為藍色，字
體大小為16px，正文其餘文字大小為12px.
最後一段文字帶下劃線。
使用外部樣式表建立頁面樣式。
>頁面中的字型顏色從提供作業素材的頁面效果圖中獲取。
3.製作圖5.40所示的淘寶女裝分類頁面、頁面要求如下。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初相遇——席慕蓉</title> <style> /*總寬度*/ .kd{width: 400px;background:linear-gradient(to bottom,#CAEFFE,#FFFFED);} /*標題大小 居中 陰影*/ h1 {font-size:18px;text-align: center;text-shadow: black 2px 2px 2px} /*行內高度 縮排文字間距*/ p{line-height: 22px;text-indent: 2em} /* 下劃線 綠色*/ .xt{text-decoration: underline;color: green} /*字型大小 字型粗 陰影*/ span{font-size: 18px;font-weight: bold;text-shadow: black ,aliceblue } /*藍色 字型大小 傾斜體*/ .ZT {color: blue;font-size: 16px;font-style: oblique;} /*其他字型大小*/ p{font-size:12px} .xzt{font-size: 12px} </style> </head> <body> <div class="kd"> <h1>初相遇 <span class="xzt">文/席慕容</span></h1> <p><span>美</span>麗的夢和美麗的詩一樣，都是可遇而不可求的，常常在最沒能料到的時刻裡出現。</p> <p>我喜歡那樣的夢，在夢裡，一切都可以重新開始，一切都可以慢慢解釋，心裡甚至還能感覺到，所有被浪費的時光竟然都能 重回時的狂喜與感激。<span class="ZT">胸懷中滿溢著幸福，只因你就在我眼前，</span>對我微笑，一如當年。</p> <p class="xt">我喜歡那樣的夢，明明知道你已為我跋涉千里，卻又覺得芳草鮮美，落落英繽紛，好像你我才初相遇。</p> </div> </body> </html>
>使用無序列表等HTML標籤有語義化的編輯頁面。
>女裝各分類名稱前的圖片使用背景圖片的方式實現，標題字型大小為18px，加相顯示。
分類內容字型大小為12px，超連結文字字型顏色為黑色，無下劃線。當滑鼠移至超連結文
本上時字型顏色為橙色（#F60），並且顯示下劃線。
>使用外部樣式表建立頁面樣式。
>頁面中其他的效果樣式見提供的作業素材中的頁面效果圖。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淘寶女裝分類頁面</title> <style> /*垂直水平居中*/ p img{vertical-align: middle} /*標題文字大小 粗體*/ .active{font-size: 18px;font-weight: bold;} /*其它文字大小*/ p{font-size: 12px;} /*黑色字型 無下劃線*/ ul a{color: black;text-decoration: none;} /*超連結 橙色 下劃線*/ a:hover{color: #f60;text-decoration: underline} </style> </head> <body> <ul> <p><img src="dress01.png"/><strong class="active">夏季流行</strong></p> <hr/> <p> <a href="#" target="_blank">夏季新品</a> <a href="#"target="_blank">雪紡裙</a> <a href="#" target="_blank"> 鉛筆褲</a> <a href="#" target="_blank">短褲</a> <a href="#" target="_blank">短袖襯衫</a> <a href="#"target="_blank">小腳牛仔褲</a> <a href="#" target="_blank">開衫</a> <a href="#" target="_blank"> 蕾絲/雪紡衫</a> <a href="#"target="_blank">韓版外套</a> <a href="#" target="_blank">小西裝</a> <a href="#" target="_blank">中長款裙</a></p> <p><img src="dress02.png" /><strong class="active">上裝</strong></p> <hr/> <p><a href="#" target="_blank">T桖</a> <a href="#" target="_blank">襯衫</a> <a href="#" target="_blank">針織衫</a> <a href="#" target="_blank">長袖</a>T <a href="#" target="_blank">韓版</a> <a href="#" target="_blank"> 雪紡襯衫</a> <a href="#" target="_blank">韓版襯衫</a> <a href="#" target="_blank">防晒衣</a> <a href="#" target="_blank">休閒套裝</a> <a href="#" target="_blank">衛衣</a> <a href="#" target="_blank"> 背心/吊帶</a></p> <p><img src="dress03.png"/><strong class="active">裙子</strong></p> <hr/> <p><a href="#" target="_blank">連衣裙</a> <a href="#" target="_blank">半身裙</a> <a href="#"target="_blank">長裙</a> <a href="#"target="_blank">短袖裙</a> <a href="#" target="_blank">蕾絲連衣裙</a> <a href="#" target="_blank"> 長袖裙</a> <a href="#"target="_blank">無袖/背心裙</a> <a href="#">A字裙</a> <a href="#" target="_blank"> 牛仔裙</a> <a href="#" target="_blank">半身中長裙</a> <a href="#"target="_blank">半身短裙</a> <a href="#" target="_blank">包臀裙</a></p> <p><img src="dress04.png"/><strong class="active">褲子</strong></p> <hr/> <p><a href="#"target="_blank">褲子</a> <a href="#"target="_blank">休閒褲</a> <a href="#"target="_blank">牛仔褲</a> <a href="#" target="_blank">打底褲</a> <a href="#" target="_blank">長褲</a> <a href="#" target="_blank"> 哈倫褲</a> <a href="#" target="_blank">闊腿褲</a> <a href="#" target="_blank">短褲/熱褲</a> <a href="#" target="_blank">連體褲</a> <a href="#" target="_blank">七/九分褲</a> <a href="#" target="_blank"> 牛仔短褲</a> <a href="#" target="_blank">西裝褲</a></p> <p><img src="dress05.png"/><strong class="active">其他女裝</strong></p> <hr/> <p><a href="#" target="_blank">胖M裝</a> <a href="#" target="_blank">中老年</a> <a href="#" target="_blank">婚紗</a> <a href="#" target="_blank">禮服</a> <a href="#" target="_blank">旗袍</a> <a href="#"target="_blank"> 夜店</a> <a href="#" target="_blank">舞臺裝</a> <a href="#"target="_blank">唐裝</a> <a href="#" target="_blank">職業裝</a> <a href="#" target="_blank">全球購</a> <a href="#" target="_blank"> 羊絨衫</a> <a href="#" target="_blank">毛衣</a> <a href="#" target="_blank">呢大衣</a> <a href="#" target="_blank">羽絨服</a> <a href="#"target="_blank">真皮皮衣</a></p> </ul> </body> </html>