HTML5和CSS3開發第五章課後作業
阿新 • • 發佈:2019-02-06
1.製作圖5.38所示的北大青鳥課程介紹頁面。頁面要求如下,
>使用<div>.<p>.<span>等標籤編輯頁面,頁面整體背景顏色使用線性漸變
(#ECECEC,#FFFFED).
課程特色字型顏色為綠色(#5C9815),設計理念字型顏色為橙色(#F26522).
>課程特色和設計理念每行開頭帶背景顏色的字型為白色,背景顏色從提供作業素材的頁面
效果圖中獲取、使用結構偽類選擇器元素。
使用<h1>標籤排版文字標題,字型大小為18px,黑色文字陰影。
使用<p>標籤排版文字正文,首行縮排為2em.行高為22px,
首段第一個“美”字,字型大小為180x,加相顯示。黑色和白色文字陰影具體方向參考
素材效果圖。第二段中的“胸懷中滿溢…在我眼前”字型風格為傾斜。顏色為藍色,字
體大小為16px,正文其餘文字大小為12px.
最後一段文字帶下劃線。
使用外部樣式表建立頁面樣式。
>頁面中的字型顏色從提供作業素材的頁面效果圖中獲取。
3.製作圖5.40所示的淘寶女裝分類頁面、頁面要求如下。
>使用無序列表等HTML標籤有語義化的編輯頁面。
>女裝各分類名稱前的圖片使用背景圖片的方式實現,標題字型大小為18px,加相顯示。
分類內容字型大小為12px,超連結文字字型顏色為黑色,無下劃線。當滑鼠移至超連結文
本上時字型顏色為橙色(#F60),並且顯示下劃線。
>使用外部樣式表建立頁面樣式。
>使用<div>.<p>.<span>等標籤編輯頁面,頁面整體背景顏色使用線性漸變
(#ECECEC,#FFFFED).
課程特色字型顏色為綠色(#5C9815),設計理念字型顏色為橙色(#F26522).
>課程特色和設計理念每行開頭帶背景顏色的字型為白色,背景顏色從提供作業素材的頁面
效果圖中獲取、使用結構偽類選擇器元素。
>使用外部樣式表建立頁面樣式。
2.製作席慕蓉的《初相遇》頁面總寬度為400px,整體背錄顏色線性漸變(#CAEFFE#FFFED)body{ background: -webkit-linear-gradient(#ECECEC,#FFFFED); width: 575px; } body div div:first-of-type{ color: #5C9815; } body div div:last-of-type{ color: #F26522; } span{ color: white; } body div div:first-of-type p:nth-of-type(1) span{ /*第一個div下的第一個span標籤*/ background: #226600; } body div div:first-of-type p:nth-of-type(2) span{ /*第一個div下的第二個span標籤*/ background: #7FFF82; } body div div:first-of-type p:nth-of-type(3) span{ /*第一個div下的第三個span標籤*/ background: #58B6FF; } body div div:first-of-type p:nth-of-type(4) span{ /*第一個div下的第四個span標籤*/ background: #2E65FF; } body div div:first-of-type p:nth-of-type(5) span{ /*第一個div下的第五個span標籤*/ background: #000873; } body div div:nth-of-type(2) p:nth-of-type(1) span{ /*第二個div下的第一個span標籤*/ background: #FF6E06; } body div div:nth-of-type(2) p:nth-of-type(2) span{ /*第二個div下的第二個span標籤*/ background: #B60C01; } body div div:nth-of-type(2) p:nth-of-type(3) span{ /*第二個div下的第三個span標籤*/ background: #B6008D; } body div div:nth-of-type(2) p:nth-of-type(4) span{ /*第二個div下的第四個span標籤*/ background: #B60C01; } body div div:nth-of-type(2) p:nth-of-type(5) span{ /*第二個div下的第五個span標籤*/ background: #7C00B8; } body div div:nth-of-type(2) p:nth-of-type(6) span{ /*第二個div下的第六個span標籤*/ background: #7C00B8; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>北大青鳥課程介紹頁面</title> <LINK href="../CSSFile/Homework3.css" rel="stylesheet" TYPE="text/css"> </head> <body> <div> <img src="images/Homework3/title.gif"> <h3><img src="images/Homework3/img_01.png"> </h3> <div> <p><span>逆向課程設計:</span>以企業需求決定課程設計內容,確保訓練內容及深度和企業需求一致</p> <p><span>模擬學員學習路線:</span>強調難點和複雜技能點的反覆訓練,力求學習效果和學習體驗</p> <p><span>網際網路作為教學環境:</span>學員的日常教學和訓練均在網際網路線上進行</p> <p><span>學習擋板監控網上學習效果:</span>每個學習階段設定線上線下測試,嚴密監控學習效果</p> <p><span>真實開發專案經驗積累:</span>採用專業網際網路企業提供的真實專案作為模擬開發/p> </div> <h3><img src="images/Homework3/img_02.png"></h3> <div> <p><span>【實用性】—— </span>以就業崗位需求為導向,重點講解企業80%的時間在使用的20%的技術</p> <p><span>【權威性】—— </span>與來自百度等知名企業的專家聯合開發</p> <p><span>【專業性】—— </span>引進業內資深人才和典型行業開發專案</p> <p><span>【真實性】—— </span>在網際網路真實環境下進行教學和訓練</p> <p><span>【易學性】——</span>線上培訓模式,24小時專家線上解答疑難問題</p> <p><span>【完整性】—— </span>利用SNS虛擬社群:學習、人脈雙豐收</p> </div> </div> </body> </html>
使用<h1>標籤排版文字標題,字型大小為18px,黑色文字陰影。
使用<p>標籤排版文字正文,首行縮排為2em.行高為22px,
首段第一個“美”字,字型大小為180x,加相顯示。黑色和白色文字陰影具體方向參考
素材效果圖。第二段中的“胸懷中滿溢…在我眼前”字型風格為傾斜。顏色為藍色,字
體大小為16px,正文其餘文字大小為12px.
最後一段文字帶下劃線。
使用外部樣式表建立頁面樣式。
>頁面中的字型顏色從提供作業素材的頁面效果圖中獲取。
div{ width: 400px; background: -webkit-linear-gradient(#CAEFFE,#FFFFED); } h1{font-size: 18px;text-align: center;color: blue} h1 span{ font-size: 14px; color: gray; text-shadow: black 1px -1px; } p{font-size: 12px;text-indent: 2em;} div p:first-of-type span{ font-size: 18px; color: #7C00B8; font-weight: bolder; } div p:nth-of-type(2) span{ font-size: 16px; color: #2E65FF; font-style: italic; } a{ color: green; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初相遇--席慕蓉</title> <link href="../CSSFile/Homework4.css" rel="stylesheet" type="text/css"> </head> <body> <div> <h1>初相遇 <span>文/席慕容</span></h1> <p><span>美</span>麗的夢和美麗的詩一樣,都是可遇而不可求的,常常在最沒能料到的時刻裡出現。</p> <p>我喜歡那樣的夢,在夢裡,一切都可以重新開始,一切都可以慢慢解釋,心裡甚至還能感覺到,所有被浪費的時光竟然都能 重回時的狂喜與感激。<span>胸懷中滿溢著幸福,只因你就在我眼前</span>,對我微笑,一如當年。</p> <p><a href="#">我喜歡那樣的夢,明明知道你已為我跋涉千里,卻又覺得芳草鮮美,落落英繽紛,好像你我才初相遇。</a></p> </div> </body> </html>
3.製作圖5.40所示的淘寶女裝分類頁面、頁面要求如下。
>使用無序列表等HTML標籤有語義化的編輯頁面。
>女裝各分類名稱前的圖片使用背景圖片的方式實現,標題字型大小為18px,加相顯示。
分類內容字型大小為12px,超連結文字字型顏色為黑色,無下劃線。當滑鼠移至超連結文
本上時字型顏色為橙色(#F60),並且顯示下劃線。
>使用外部樣式表建立頁面樣式。
>頁面中其他的效果樣式見提供的作業素材中的頁面效果圖。
div{font-size: 12px;} h1{font-size: 18px;font-weight: bolder; vertical-align: middle;text-indent: 1.4em} ul li{list-style-type: none;} a{ color: black; text-decoration: none } a:hover{ color: #F60; text-decoration: underline; } ul li:first-of-type h1{ background: url("../ClassHomework/images/Homework5/dress01.png") no-repeat; background-size: contain; } ul li:nth-of-type(2) h1{ background: url("../ClassHomework/images/Homework5/dress02.png") no-repeat; background-size: contain; } ul li:nth-of-type(3) h1{ background: url("../ClassHomework/images/Homework5/dress03.png") no-repeat; background-size: contain; } ul li:nth-of-type(4) h1{ background: url("../ClassHomework/images/Homework5/dress04.png") no-repeat; background-size: contain; } ul li:nth-of-type(5) h1{ background: url("../ClassHomework/images/Homework5/dress05.png") no-repeat; background-size: contain; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淘寶女裝分類頁面</title> <link href="../CSSFile/Homework5.css" rel="stylesheet" type="text/css"> </head> <body> <div> <ul> <li> <h1>夏季流行</h1> <hr/><a href="#">夏季新品</a> <a href="#">雪紡裙</a> <a href="#">短袖T</a> <a href="#">鉛筆褲</a> <a href="#">短褲</a> <a href="#">短袖襯衫</a> <a href="#">小腳牛仔褲</a> <a href="#">開衫</a> <a href="#">蕾絲/雪紡衫</a> <a href="#">韓版外套</a> <a href="#">小西裝</a> <a href="#">中長款裙</a> </li> <li> <h1>上裝</h1><hr/> <a href="#">T恤</a> <a href="#">襯衫</a> <a href="#">針織衫</a> <a href="#">長袖T</a> <a href="#">韓版T</a> <a href="#">情侶衫</a> <a href="#">雪紡襯衫</a> <a href="#">韓版襯衫</a> <a href="#">防晒衣</a> <a href="#">休閒套裝</a> <a href="#">衛衣</a> <a href="#">背心/吊帶</a> </li> <li> <h1>裙子</h1><hr/> <a href="#">連衣裙</a> <a href="#">半身裙</a> <a href="#">長裙</a> <a href="#">短袖裙</a> <a href="#">蕾絲連衣裙</a> <a href="#">長袖裙</a> <a href="#">無袖/背心裙</a> <a href="#">A字裙</a> <a href="#">牛仔裙</a> <a href="#">半身中長裙</a> <a href="#">半身短裙</a> <a href="#">包臀裙</a> </li> <li> <h1>褲子</h1><hr/> <a href="#">褲子</a> <a href="#">休閒褲</a> <a href="#">牛仔褲</a> <a href="#">打底褲</a> <a href="#">長褲</a> <a href="#">哈倫褲</a> <a href="#">闊腿褲</a> <a href="#">短褲/熱褲</a> <a href="#">連體褲</a> <a href="#">七/九分褲</a> <a href="#">牛仔短褲</a> <a href="#">西裝褲</a> </li> <li> <h1>其他女裝</h1><hr/> <a href="#">胖M裝</a> <a href="#">中老年</a> <a href="#">婚紗</a> <a href="#">禮服</a> <a href="#">旗袍</a> <a href="#">夜店</a> <a href="#">舞臺裝</a> <a href="#">唐裝</a> <a href="#">職業裝</a> <a href="#">全球購</a> <a href="#">羊絨衫</a> <a href="#">毛衣</a> <a href="#">呢大衣</a> <a href="#">羽絨服</a> <a href="#">真皮皮衣</a> </li> </ul> </div> </body> </html>