HTML5和CSS3開發第五章課後作業

suixinCaesar發表於2018-06-20
HTMLCSSS3
1.製作圖5.38所示的北大青鳥課程介紹頁面。頁面要求如下，
>使用<div>.<p>.<span>等標籤編輯頁面，頁面整體背景顏色使用線性漸變
（#ECECEC，#FFFFED）.
課程特色字型顏色為綠色（#5C9815），設計理念字型顏色為橙色（#F26522）.
>課程特色和設計理念每行開頭帶背景顏色的字型為白色，背景顏色從提供作業素材的頁面
效果圖中獲取、使用結構偽類選擇器元素。

>使用外部樣式表建立頁面樣式。

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>
2.製作席慕蓉的《初相遇》
頁面總寬度為400px，整體背錄顏色線性漸變（#CAEFFE#FFFED)
使用<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>

相關文章