HTML 第五章 作業
阿新 • • 發佈：2018-12-17
課後作業
1.使用font-family屬性,同時設定英文字型和中文字型時需要注意什麼問題？
英文字型寫前面，中文字型寫後面
2.在CSS中，常見的背景屬性有哪些？他們的作用是什麼？
background:#fff url('sss.jpg') no-rerepeat;
顏色，背景圖片路徑，不迴圈
background-color:#fff;
背景顏色
background-size:背景圖片大小;
3.製作北大青鳥課程介紹頁面 HTML程式碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>北大青鳥課程介紹頁面</title> <link rel="stylesheet" type="text/css" href="css/漸變.css" /> </head> <body> <div> <h1><img src="img/title.gif"/></h1> <img src="img/img_01.png" /> <p> <span class="a1">逆向課程設計：</span> <span class="color1">以企業需求決定課程設計內容，確保訓練內容及深度和企業需求一致</span> </p> <p> <span class="a2">模擬學員學習路線：</span> <span class="color1">強調難點和複雜技能點的反覆訓練，力求學習效果和學習體驗</span> </p> <p> <span class="a3">網際網路作為教學環境：</span> <span class="color1">學員的日常教學和訓練均在網際網路線上進行</span> </p> <p> <span class="a4">學習擋板監控網上學習效果：</span> <span class="color1">每個學習階段設定線上線下測試，嚴密監控學習效果</span> </p> <p> <span class="a5">真實開發專案經驗積累：</span> <span class="color1">採用專業網際網路企業提供的真實專案作為模擬開發</span> </p> <img src="img/img_02.png" /> <p> <span class="a6">【實用性】—— </span> <span class="color2">以就業崗位需求為導向，重點講解企業80％的時間在使用的20％的技術</span> </p> <p> <span class="a7">【權威性】—— </span> <span class="color2">與來自百度等知名企業的專家聯合開發</span> </p> <p> <span class="a8">【專業性】—— </span> <span class="color2">引進業內資深人才和典型行業開發專案</span> </p> <p> <span class="a9">【真實性】—— </span> <span class="color2">在網際網路真實環境下進行教學和訓練</span> </p> <p> <span class="a10">【易學性】—— </span>`在這裡插入程式碼片` <span class="color2">線上培訓模式，24小時專家線上解答疑難問題</span> </p> <p> <span class="a11">【完整性】—— </span> <span class="color2">利用SNS虛擬社群：學習、人脈雙豐收</span> </P> </body> </html>
CSS樣式:
div { width: 600px; background: linear-gradient(to bottom, #ECECEC, #FFFFED); } .color1 { color: #5C9818 } .color2 { color: #F26522; } .a1 { color: white; background: #005952; } .a2 { color: white; background: #007236; } .a3 { color: white; background: #008BBF; } .a4 { color: white; background: #0066B3; } .a5 { color: white; background: #1d0987; } .a6 { color: white; background: #F36F21; } .a7 { color: white; background: #BB131A; } .a8 { color: white; background: #D73765; } .a9 { color: white; background: #A70532; } .a10 { color: white; background: #553171; } .a11 { color: white; background: #4F1268; }
4.製作席慕容的詩《初相遇》 HTML程式碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初相遇--席慕容</title> <link rel="stylesheet" type="text/css" href="css/漸變2.css" /> </head> <body> <div> <h1>初相遇<span> 文/席慕容</span></h1> <p><span>美</span>麗的夢和美麗的詩一樣，都是可遇而不可求的，常常在最沒能料到的時刻裡出現。</p> <p>我喜歡那樣的夢，在夢裡，一切都可以重新開始，一切都可以慢慢解釋，心裡甚至還能感覺到，所有被浪費的時光竟然都能重回時的狂喜與感 激。<em>胸懷中滿溢著幸福，只因你就在我眼前</em>，對我微笑，一如當年。</p> <p> <a>我喜歡那樣的夢，明明知道你已為我跋涉千里，卻又覺得芳草鮮美，落落英繽紛，好像你我才初相遇。</a> </p> </div> </body> </html>
CSS樣式:
div {
width: 400px;
background:-webkit-linear-gradient(#CAEFFE,#FFFFED);
}
h1{
text-align: center;
text-shadow: 0.8px 0.8px 0.8px #000000;
font-size: 18PX ;
color: #0D7DAC;
}
h1 span{
font-size: 12px;
color: #929798;
text-shadow: black 1px -1px;
}
div p:first-of-type span{
font-size: 18px;
color: #7C00B8;
font-weight: bolder;
}
em{
font-size: 16px;
color: #2E65FF;
}
p{
font-size: 12px;
text-indent: 2em;
}
a{
color: green;
text-decoration: underline;
}
5.製作淘寶女裝分類頁面 HTML程式碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘寶女裝大佬頁面</title>
<link rel="stylesheet" type="text/css" href="css/CSS.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>
CSS樣式:
div {
font-size:14px ;
}
ul li {
width: 448px;
list-style-type: none;
}
h1 {
font-size: 18px;
font-weight: bolder;
vertical-align: middle;
text-indent: 1.5em
}
a{
color: black;
text-decoration: none;
}
a:hover{
color: #F60;
text-decoration: underline;
}
ul li:first-of-type h1 {
background: url(../img/dress01.png)no-repeat;
background-size: contain;
}
ul li:nth-of-type(2) h1{
background: url(../img/dress02.png)no-repeat;
background-size:contain;
}
ul li:nth-of-type(3) h1{
background: url(../img/dress03.png)no-repeat;
background-size: contain;
}
ul li:nth-of-type(4) h1{
background: url(../img/dress04.png)no-repeat;
background-size: contain;
}
ul li:nth-of-type(5) h1{
background: url(../img/dress05.png)no-repeat;
background-size: contain;
}