2018.11.17(5,6,7)章,及第八章練習作業
第五章
1.使用font-family屬性,同時設定英文字型和中文字型需要注意什麼問題?
首先設定英文字型 再設定中文字型
2.在css中,常用的背景屬性有哪幾個?他們的作用是什麼?
color image 背景顏色和背景影象
3.製作所示課程介紹頁面,要求如下:
使用div,p,span等標籤編輯頁面,頁面整體背景顏色使用線性漸變(#ECECEC,#FFFFED)。
課程特色字型顏色為綠色(#5C9815),設計理念字型顏色為橙色(#F26522)。
課程特色和課程理念每行開頭帶背景顏色的字型為白色,使用結構偽類選擇器元素。
使用外部樣式表建立頁面樣式。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>北大青鳥課程介紹頁面</title> <link href="CSS/1.css" rel="stylesheet" type="text/css"> </head> <body> <div> <div> <p><img src="imges/title.gif"></p> <p><img src="imges/img_01.png"> <p><span id="one">逆向課程設計:</span>以企業需求決定課程設計內容,確保訓練內容及深度和企業需求一致</p> <p><span id="two">模擬學員學習路線:</span>強調難點和複雜技能點的反覆訓練,力求學習效果和學習體驗</p> <p><span id="san">網際網路作為教學環境:</span>學員的日常教學和訓練均在網際網路線上進行</p> <p><span id="si"> 學習擋板監控網上學習效果:</span>每個學習階段設定線上線下測試,嚴密監控學習效果</p> <p><span id="wu">真實開發專案經驗積累:</span>採用專業網際網路企業提供的真實專案作為模擬開發</p> <p><img src="imges/img_02.png"></p> </div> <div> <p><span id="a1">【實用性】——</span> 以就業崗位需求為導向,重點講解企業80%的時間在使用的20%的技術</p> <p><span id="a2">【權威性】——</span> 與來自百度等知名企業的專家聯合開發</p> <p><span id="a3">【專業性】——</span> 引進業內資深人才和典型行業開發專案</p> <p><span id="a4">【真實性】——</span> 在網際網路真實環境下進行教學和訓練</p> <p><span id="a5">【易學性】——</span> 線上培訓模式,24小時專家線上解答疑難問題</p> <p><span id="a6">【完整性】——</span> 利用SNS虛擬社群:學習、人脈雙豐收</p> </div> </div> </body> </html>
body>div{ width: 600px; background: linear-gradient(to top,#ECECEC,#FFFFED); background: -webkit-linear-gradient(to top,#ECECEC,#FFFFED); } div div:nth-child(1)>p{ color: #5C9815; } div div:nth-child(1)>p>span{ color: #FFFFFF; } #one{ background-color:#66ccff; } #two{ background-color:blueviolet; } #san{ background-color:red; } #si{ background-color:brown; } #wu{ background-color:blue; } div div:nth-child(2)>p{ color: #F26522; } div div:nth-child(2)>p>span{ color: #FFFFFF; } #a1{ background-color:#66ccff; } #a2{ background-color:blueviolet; } #a3{ background-color:red; } #a4{ background-color:brown; } #a5{ background-color:coral; } #a6{ background-color:blue; }
4.製作圖所示的席慕蓉的詩《初相遇》要求如下:
頁面總寬度400px,整體背景顏色線性漸變(#CAEFFE,#FFFFED)
使用h1標籤排版文字標題,字型大小為18px,黑色文字陰影。
使用p標籤排版文字正文,首行縮排2em,行高為22px。
首行第一個“美”字,字型大小為18px,加粗顯示,黑色和白色文字陰影,第二段中的“胸懷中……在我眼前”字型風格為傾斜,顏色為藍色,字型大小為16px。正文其他文字大小為12px。
最後一段文字帶下劃線。
使用外部樣式表建立頁面樣式。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>初相遇--席慕容</title> <link href="CSS/2.css" rel="stylesheet" type="text/css"> </head> <body> <div> <h1><span>初相遇</span> 文/席慕容</h1> <p><span class="mei">美</span>麗的夢和美麗的詩一樣,都是可遇而不可求的,常常在最沒能料到的時刻裡出現。</p> <p>我喜歡那樣的夢,在夢裡,一切都可以重新開始,一切都可以慢慢解釋,心裡甚至還能感覺到,所有被浪費的時光竟然都能重回時的狂喜與感激。<span class="xio">胸懷中滿溢著幸福,只因你就在我眼前</span>,對我微笑,一如當年。</p> <p>我喜歡那樣的夢,明明知道你已為我跋涉千里,卻又覺得芳草鮮美,落落英繽紛,好像你我才初相遇。</p> </div> </body> </html>
h1{
color: rgba(70, 74, 71, 0.8);
font-size: 18px;
text-shadow: black 1px 1px 1px;
text-align: center;
}
h1>span{
font-size:28px;
font-weight: bolder;
color: blue;
}
div{
width: 400px;
background: linear-gradient(to top,#CAEFFE,#FFFFED);
background:-webkit-linear-gradient(to top,#CAEFFE,#FFFFED);
}
div p{
font-size: 12px;
line-height: 22px;
text-indent: 2em;
}
p:last-child{
text-decoration: underline ;
color:green;
}
.mei{
font-size: 18px;
font-weight: bold;
color: #5c5aff;
text-shadow: black 2px 1px 2px;
}
.xio{
color: blue;
font-size: 16px;
font-style: italic;
}
5.製作圖所示的淘寶女裝分類頁面,要求如下:
使用無序列表等HTML標籤有語義化的編輯頁面
女裝內容字型大小為12px,超連結文字字型顏色為黑色,無下劃線,當滑鼠移到超連結文字上時字型顏色變為橙色(#F60),並且顯示下劃線。
使用外部樣式表建立頁面樣式。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="CSS/3.css" rel="stylesheet" type="text/css">
<style>
.img1{
background: url("imges/dress01.png")no-repeat;
}
.img2{
background: url("imges/dress02.png")no-repeat;
}
.img3{
background: url("imges/dress03.png")no-repeat;
}
.img4{
background: url("imges/dress04.png")no-repeat;
}
.img5{
background: url("imges/dress05.png")no-repeat;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<h3 class="img1">夏季流行</h3>
<hr/>
<div>
<p><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>
</p>
</div>
</li>
<li>
<h3 class="img2">上裝</h3>
<hr/>
<div>
<p><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>
</p>
</div>
</li>
<li>
<h3 class="img3">裙子</h3>
<hr/>
<div>
<p><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>
</p>
</div>
</li>
<li>
<h3 class="img4">褲子</h3>
<hr/>
<div>
<p><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>
</p>
</div>
</li>
<li>
<h3 class="img5">其他女裝</h3>
<hr/>
<div>
<p><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>
</p>
</div>
</li>
</ul>
</div>
</body>
</html>
body>div{
width: 350px;
}
h3{
line-height: 40px;
font-size: 18px;
font-weight: bold;
text-indent: 40px;
}
li{
list-style-type: none;
}
li>div{
font-size: 12px;
}
a{
text-decoration:none;
color: black;
}
a:hover{
text-decoration: underline;
color: #F60;
}
第六章
1.什麼是盒子模型?盒子模型的屬性有哪幾個?它們的作用分別是什麼?
網頁設計中常聽的屬性名:內容(content)、內邊距(padding)、邊框(border)、外邊距(margin), CSS盒子模式都具備這些屬性。
這些屬性我們可以用日常生活中的常見事物–盒子作一個比喻來理解,所以叫它盒子模式。
margin-bottom, margin-top, margin-left, margin-right 設定外邊距上下左右
padding-top,padding-bottom, padding-left, padding-right 設定內邊距上下左右
2.盒子模型有哪幾種解析方式?它們有什麼不同?
當我們在樣式表輸入box-sizing時,會顯示border-box和content-box,第一種是邊框盒子尺寸,第二種是內容尺寸
當我們給一個元素設定尺寸時,預設設定的是元素內容的尺寸,也就是content-box,這種在後期佈局時會有很多不便
而當我們用border-box時,我們設定的尺寸實際等於:內容尺寸+兩邊的內邊距+兩邊的邊框寬度
3.製作圖所示的網站的中心開班資訊模組。要求如下:
頁面總寬度為250px,整體居中顯示,背景使用線性漸變及1px灰色圓角邊框
標題左側的小圖示以背景影象的方式實現,標題顏色為白色
使用無序列表實現開班資訊列表,列表前的小三角形箭頭和下方虛線均使用背景圖片的方式實現
列表超連結文字顏色為灰色,無下劃線,當滑鼠懸浮在超連結文字上時,字型顏色發生變化,無下劃線
頁面中涉及盒子模型解析方式都使用border-box
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>中心開班資訊</title>
<link href="css/1.css" rel="stylesheet" type="text/css">
<style>
.bg2 {
text-indent: 7px;
background: url("imges/dotBg.gif") -9px -8.5px no-repeat;
}
.bg{
background: url("imges/bg.gif")no-repeat;
text-indent: 35px;
color: #FFFFFF;
height: 30px;
}
</style>
</head>
<body>
<div>
<div>
<h4 class="bg">中心開班資訊</h4>
<hr/>
</div>
<div>
<ul>
<li class="bg2">
<p><a href="#">8月12日:學歷+技能班</a></p>
</li>
<li class="bg2">
<p><a href="#">8月16日:高考特招班</a></p>
</li>
<li class="bg2">
<p><a href="#">8月23日:Java精英班</a></p>
</li>
<li class="bg2">
<p><a href="#">8月31日:學士後強化班</a></p>
</li>
<li class="bg2">
<p><a href="#">9月5日:大學生就業班</a></p>
</li>
<li class="bg2">
<p><a href="#">9月9日:企業定向委培班</a></p>
</li>
<li class="bg2">
<p><a href="#">9月16日:網路營銷強化班</a></p>
</li>
</ul>
</div>
</div>
</body>
</html>
body>div{
width: 250px;
margin: 0px auto;
border:solid;
border-color: gray;
border-width: 1px;
border-radius: 15px;
background:linear-gradient(to top,#FFFFFF,#66ccff);
background:-webkit-linear-gradient(to top,#FFFFFF,#66ccff);
}
hr{
height: 2px;
background-color: #FFFFFF;
border: none;
}
li{
list-style-type: none;
margin-left: -25px;
}
a{
color: gray;
text-decoration: none;
}
a:hover{
color: coral;
text-decoration: none;
}
4.製作圖所示的商品分類列表頁面,要求如下:
商品列表在一個div中,div的四個邊框均為2px的橙色實線圓角邊框
用結構偽類選擇器選擇每個列表併為其加上背景圖,每個列表下方為1px的灰色虛線邊框,最後一個列表沒有
文字超連結為黑色粗體,當滑鼠懸停在超連結文字上時文字變色,並且無下劃線
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>商品分類列表類</title>
<link href="css/2.css" rel="stylesheet" type="text/css">
<style>
li:nth-of-type(1){
background: url("imges/icon_01.jpg") no-repeat;
text-indent: 50px;
}
li:nth-of-type(2){
background: url("imges/icon_02.jpg") no-repeat;
text-indent: 50px;
}
li:nth-of-type(3){
background: url("imges/icon_03.jpg") no-repeat;
text-indent: 50px;
}
li:nth-of-type(4){
background: url("imges/icon_04.jpg") no-repeat;
text-indent: 50px;
}
li:nth-of-type(5){
background: url("imges/icon_05.jpg") no-repeat;
text-indent: 50px;
}
li:nth-of-type(6){
background: url("imges/icon_06.jpg") no-repeat;
text-indent: 50px;
}
li:nth-of-type(7){
background: url("imges/icon_07.jpg") no-repeat;
text-indent: 50px;
}
li:nth-of-type(8){
background: url("imges/icon_08.jpg") no-repeat;
text-indent: 50px;
}
li:nth-of-type(9){
background: url("imges/icon_09.jpg") no-repeat;
text-indent: 50px;
}
li:nth-of-type(10){
background: url("imges/icon_10.jpg") no-repeat;
text-indent: 50px;
border-bottom-style:none;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<p><a href="#">酒水、飲料</a></p>
</li>
<li>
<p><a href="#">進口食品</a></p>
</li>
<li>
<p><a href="#">休閒零食</a></p>
</li>
<li>
<p><a href="#">地方特產</a></p>
</li>
<li>
<p><a href="#">保健、衝調</a></p>
</li>
<li>
<p><a href="#">糧油、生鮮</a></p>
</li>
<li>
<p><a href="#">美容洗護</a></p>
</li>
<li>
<p><a href="#">清潔洗滌</a></p>
</li>
<li>
<p><a href="#">母嬰、紙品</a></p>
</li>
<li>
<p><a href="#">家居百貨</a></p>
</li>
</ul>
</div>
</body>
</html>
body>div{
width: 180px;
border: 2px;
border: solid;
border-color: coral;
border-radius: 15px;
}
li{
list-style-type: none;
height: 50px;
margin-left: -40px;
border-bottom-style: dashed;
border-bottom-width: 1px;
border-bottom-color: gray;
}
p{
padding-top: 10px;
font-weight: bold;
}
a{
color: black;
text-decoration: none;
}
a:hover{
text-decoration: none;
color: coral;
}
5.製作圖所示的權威課程免費體驗登入頁面,要求如下:
頁面文字顏色為白色,*的字型顏色為紅色
使用無序列表排版表單元素
無序列表內容在頁面中居中顯示
“免費體驗”按鈕使用背景影象方式實現
按語義化使用表單元素,且是圓角邊框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>免費體驗登入頁面</title>
<style>
div{
background: url("imges/bg.jpg")no-repeat;
height: 335px;
}
.input2{
background:url("imges/btn.jpg") no-repeat;
width: 152px;
height: 49px;
border: none;
}
span{
color: red;
}
ul{
margin: 0px auto;
padding-top: 80px;
}
li{
color: #FFFFFF;
margin-top: 10px;
list-style-type: none;
}
li:last-child{
margin-left: 40px;
margin-top: 20px;
}
.input1{
border-radius: 3px;
border-width: 1px;
border-color: #757574;
border-style: solid;
}
</style>
</head>
<body>
<form action="" method="post">
<div>
<ul>
<li><span>*</span> 姓名:<input type="text" value="" class="input1"required></li>
<li><span>*</span> 郵箱:<input type="text" value="" class="input1"required></li>
<li><span>*</span> 電話:<input type="text" value="" class="input1"required></li>
<li>性別:
<select class="input1">
<option selected>請選擇</option>
<option>男</option>
<option>女</option>
</select>
</li>
<li>年齡:
<select class="input1">
<option selected>請選擇</option>
<option>1</option>
<option>2</option>
</select>
</li>
<li><input type="submit" class="input2"value=""></li>
</ul>
</div>
</form>
</body>
</html>
第七章
1.清除浮動的方法有哪幾種?分別如何實現?
4種
1.浮動元素後面加空div
2.設定父元素的高度
3.父級新增overflow屬性 overflow-hidden
4.父級新增偽類after content:’’; display:block; clear:both;
2.使用display:inline-block或float佈局網頁有什麼區別?需要注意什麼?
display:inline-block 有縫隙 float沒有
注意使用場景
3.製作圖所示的攝影社群熱門小區頁面,要求如下:
使用div和無序列表相結合的方法佈局HTML文件
使用float屬性建立橫向多列布局排版網頁元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>攝影社群熱門小鎮</title>
<link href="src/css/1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="a1">
<div class="a2"><p>攝影社群熱門小鎮</p></div>
<div class="a3">
<div class="a31"><img src="src/img/pic_01.jpg"></div>
<div class="a32">
<ul>
<li class="a321">風景狙擊手</li>
<li class="a322">成員:80</li>
<li class="a322">作品:276</li>
</ul>
</div>
</div>
<div class="a4">
<div class="a31"><img src="src/img/pic_02.jpg"></div>
<div class="a32">
<ul>
<li class="a321">敘事感</li>
<li class="a322">成員:235</li>
<li class="a322">作品:116</li>
</ul>
</div>
</div>
<div class="a5">
<div class="a31"><img src="src/img/pic_03.jpg"></div>
<div class="a32">
<ul>
<li class="a321">定焦視界</li>
<li class="a322">成員:56</li>
<li class="a322">作品:456</li>
</ul>
</div>
</div>
<div class="a6">
<div class="a31"><img src="src/img/pic_04.jpg"></div>
<div class="a32">
<ul>
<li class="a321">中畫幅樂園</li>
<li class="a322">成員:130</li>
<li class="a322">作品:239</li>
</ul>
</div>
</div>
<div class="a7">
<div class="a31"><img src="src/img/pic_05.jpg"></div>
<div class="a32">
<ul>
<li class="a321">《卡啪》先鋒...</li>
<li class="a322">成員:78</li>
<li class="a322">作品:125</li>
</ul>
</div>
</div>
<div class="a8">
<div class="a31"><img src="src/img/pic_06.jpg"></div>
<div class="a32">
<ul>
<li class="a321">植物的無聲世界</li>
<li class="a322">成員:235</li>
<li class="a322">作品:1258</li>
</ul>
</div>
</div>
</div>
</body>
</html>
div>div{
margin-left: 8px;
}
.a1{
margin: 50px auto;
width: 730px;
border: 1px;
border-color: gray;
border-style: solid;
}
.a1:after{
content: '';
display: block;
clear: both;
}
li{
list-style-type: none;
}
.a2{
color: #555555;
font-weight:bolder;
margin-left: 15px;
float: left;
}
.a3{
float: left;
clear: left;
}
.a31,.a32{
display: inline-block;
}
.a32{
margin-left: -30px;
}
.a321{
font-size: 18px;
color:blue;
margin-bottom: 2px;
}
.a322{
color: #888888;
}
.a31{
padding: 3px;
padding-bottom: 0px;
border-radius: 5px;
border: 1px;
border-color: gray;
border-style: solid;
}
.a4{
margin-left: 60px;
float: left;
}
.a5{
margin-left: 80px;
float: left;
}
.a6{
float: left;
clear: left;
}
.a7{
margin-left: 60px;
float: left;
}
.a8{
margin-left: 36px;
float: left;
}
4.製作圖所示的名人名言頁面,要求如下:
使用header,article,section,nav,footer等結構元素佈局
使用float屬性建立橫向多列布局
使用無序列表製作導航選單,並使盒子屬性美化選單,當滑鼠移至導航選單上時顯示下劃線
使用標題標籤排版網頁中的各級標籤
頁面的完整效果及頁面中字型樣式、顏色等參照素材
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>名人名言</title>
<link href="src/css/2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="kkk">
<header>
<h1>名人名言</h1>
<p>分享名人名言,開始一段觸動心靈的智慧之旅跳到內容</p>
<ul>
<li class="a1"><a href="#">登入</a></li>
<li><a href="#">關於</a></li>
<li><a href="#">名人名言</a></li>
<li><a href="#">英文名言(English)</a></li>
<li><a href="#">心理雜誌</a></li>
<li><a href="#">心理書籍</a></li>
<li><a href="#">專題活動</a></li>
<li><a href="#">發表</a></li>
</ul>
</header>
<section>
<div class="no1">
<div class="a2">
<h3>心理學經典名言的智慧</h3>
<p>洞察人性的美與醜,認識自我的強與弱。一句好的格言能夠穿越時間,永不失色、歷久彌香,它總是能給人們帶來心靈的滋養。</p>
</div>
<div class="a3">
<p>創造力(creativity)有兩個詞根:Crera拉丁語的意思是“去創造”。Krainir希臘語的意思是“去實現”。所以,創造力不僅僅是一種想象力、一種天賦,創造力更是一種將自己的想法付諸實現的能力。</p>
<p>創造力(creativity)有兩個詞根:Crera拉丁語的意思是“去創造”。Krainir希臘語的意思是“去實現”。所以,創造力不僅僅是一種想象力、一種天賦,創造力更是一種將自己的想法付諸實現的能力。</p>
<p>發表在 未分類 | 標籤: 《換個腦袋去思考》, 創造力 | 留下評論</p>
</div>
<div class="a4">
<h3>作者簡介</h3>
</div>
<div class="a5">
<p>如果你還沒有注意到你有能力讓對方作出你所希望得到的反應,那麼你就還沒有很好地掌握人生的真諦。這其實簡單到不可思議。如果你希望他人對你感興趣,那麼你就要先對他人產生興趣;如果你想讓他人緊張,那麼你自己首先要緊張起來。就是這麼簡單。人們會按照你對待他們的方式對待你。這其中沒有什麼祕訣。看看周圍的人,你可以在與下一個人交流時證實這一點。</p>
<p>如果你還沒有注意到你有能力讓對方作出你所希望得到的反應,那麼你就還沒有很好地掌握人生的真諦。這其實簡單到不可思議。如果你希望他人對你感興趣,那麼你就要先對他人產生興趣;如果你想讓他人緊張,那麼你自己首先要緊張起來。就是這麼簡單。人們會按照你對待他們的方式對待你。這其中沒有什麼祕訣。看看周圍的人,你可以在與下一個人交流時證實這一點。</p>
<p>發表在 未分類 | 標籤: 《怎樣出售設計創意》, 溫斯頓·丘吉爾 | 留下評論</p>
</div>
<div class="a6">
<p>贊助廣告</p>
<img src="src/img/ad_2.jpg">
</div>
</div>
<div class="no2">
<ul>
<li>贊助廣告</li>
<li><img src="src/img/ad.jpg"></li>
<li>搜尋</li>
<li><input type="text" value="點選搜尋" size="18"></li>
<li>標籤</li>
<li><a href="#">60年語錄</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> <a href="#">李白</a>
<a href="#">愛情語錄</a> <a href="#">韓寒語錄</a></li>
</ul>
</div>
</section>
<footer>
<p>©All Rights Reserved by Psytopic. 來自Psytopic.com的禮物</p>
</footer>
</div>
</body>
</html>
.kkk{
content: '';
display: block;
clear: both;
width: 950px;
margin: 0px auto;
font-size: 14px;
}
li{
list-style-type: none;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
header a{
color: gray;
}
header li{
float: left;
padding: 10px;
border: 1px solid gray;
border-bottom: none;
border-left: none;
}
.a1{
border-left: 1px solid gray;
margin-left: 10px;
}
header ul{
margin-top: 40px;
overflow:hidden;
border-bottom: 1px solid gray;
}
header p,.a6 p, .no2 li{
color: gray;
font-style:oblique;
}
.a2{
border: 1px solid gray;
overflow: hidden;
}
.no1{
margin-top: 30px;
width: 60%;
float: left;
}
.a2 h3{
margin-left: 10px;
margin-top: 5px;
}
.a2 p{
margin-left: 10px;
color: gray;
}
.a3 p:nth-of-type(1)~p,.a5 p:nth-of-type(1)~p{
color: gray;
margin-top: -15px;
}
.a4{
margin-top: -12px;
border: 1px solid gray;
height: 37px;
}
.a4 h3{
margin-top: 5px;
margin-left: 10px;
}
.a6{
border: 1px solid gray;
}
.a6 img{
width: 95%;
margin-left: 10px;
}
.a6 p{
margin-left: 10px;
}
.no2{
margin-top: 30px;
width: 35%;
float: right;
border: 1px solid gray;
}
.no2 li{
margin-top: 15px;
margin-left: -20px;
margin-right: 20px;
}
.no2 ul{
margin-top: 40px;
}
.no2 li a{
color: gray;
}
footer{
width: 100%;
margin-top: 30px;
border-top: 1px solid gray;
float: left;
}
footer p{
text-align: center;
color: gray;
}
5.製作彩妝熱賣產品頁面,要求如下:
頁面背景顏色為淺黃色,彩妝熱賣產品列表背景顏色為白色
標題放在段落標籤中,標題背景顏色為桃紅色,字型顏色為白色
使用無序列表製作彩妝熱賣產品列表,兩個產品列表之間使用虛線隔開
超連結字型顏色為灰色,無下劃線,數字顏色為白色,數字背景為灰色圓圈
當滑鼠移到超連結上時,超連結字型顏色為桃紅色,無下劃線,數字顏色為白色,數字背景為桃紅色圓圈,並顯示產品對應圖片、價格和當前已購買人數
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>彩妝熱賣產品列表</title>
<link href="src/css/3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top">
<p>大家都喜歡的彩妝</p>
<ul>
<li><a href="#"><span>1</span>Za姬芮新能真皙美白隔離霜 35g <div>
<img src="src/img/icon-1.jpg" alt="Za姬芮新能真皙美白隔離霜 35g ">
<p>¥62.00 最近69122人購買</p>
</div></a></li>
<li><a href="#"><span>2</span>美寶蓮精純礦物奇妙新顏乳霜BB霜 30ml<div>
<img src="src/img/icon-2.jpg" alt="美寶蓮精純礦物奇妙新顏乳霜BB霜 30ml">
<p>¥89.00 最近13610人購買</p>
</div></a></li>
<li><a href="#"><span>3</span>菲奧娜水漾CC霜40g<div>
<img src="src/img/icon-3.jpg" alt="菲奧娜水漾CC霜40g">
<p>¥59.90 最近13403人購買</p>
</div></a></li>
<li><a href="#"><span>4</span>DHC 蝶翠詩橄欖卸妝油 200ml<div>
<img src="src/img/icon-4.jpg" alt="DHC 蝶翠詩橄欖卸妝油 200ml">
<p>¥169.00 最近16757人購買</p>
</div></a></li>
</ul>
</div>
</body>
</html>
.top{
width: 320px;
}
li{
padding-bottom: 15px;
margin-top: 20px;
list-style-type: none;
border-bottom: 2px dashed gray;
}
div div{
display: none;
}
div a:hover div{
display: block;
color: red;
}
a:hover{
color: red;
}
div a:hover span{
border:1px solid #fb4e4c;
background-color: #fb4e4c;
}
span{
color: #FFFFFF;
text-align: center;
display: inline-block;
width: 20px;
height:20px;
border:1px solid gray;
border-radius: 50%;
background-color: gray;
}
a{
color: gray;
text-decoration: none;
}
.top>p{
background-color: #fb4e4c;
height: 34px;
width: 300px;
font-weight: bold;
color: #FFFFFF;
padding-top: 10px;
padding-left: 20px;
}
ul{
margin-left: -38px;
}
第八章練習
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>噹噹圖書館</title>
<style>
li{
list-style-type: none;
}
header{
margin: 0px auto;
width: 960px;
content: '';
display: block;
clear: both;
}
.a1{
height: 40px;
}
.a11 a{
text-decoration: none;
color: gray;
}
header a:hover{
text-decoration: underline;
}
header ul{
margin-left: -70px;
margin-top: 8px;
}
.a11 li{
float: right;
margin-left: 20px;
margin-right: 4px;
font-size: 10px;
}
.a11{
float: right;
margin-top: 16px;
background-color:#eafffa;
height: 30px;
width: 250px;
border: 1px solid greenyellow;
border-bottom: none;
position: relative;
}
.a2{
margin-top: 15px;
width: 100%;
height: 35px;
background-image: url("img/menuBg.jpg");
}
.a2 ul{
margin-left: -50px;
}
.a2 li {
float: left;
margin-left: 25px;
font-size: 16px;
margin-top: 7px;
}
.a2 a{
color: #FFFFFF;
text-decoration: none;
}
section{
content: '';
display: block;
clear: both;
margin: 0px auto;
width: 960px;
margin-top:8px;
}
.b1{
border: 2px solid greenyellow;
margin-top: 20px;
display: inline-block;
}
.b11{
width: 550px;
height: 100%;
float: left;
position: relative;
}
.b12{
margin-top: 90px;
width: 400px;
}
.b11 img{
margin-top: 90px;
}
.b111{
margin-top: 80px;
width: 280px;
height: 280px;
float: right;
}
.b112,.b121{
float: left;
}
.b12,.b122{
float: right;
}
.b111 li{
font-size: 14px;
margin-bottom: 10px;
margin-left: -50px;
}
.b122{
width: 290px;
}
.b122 li{
margin-bottom: 5px;
margin-left: -40px;
margin-right: 10px;
font-size: 14px;
}
.b121{
margin-top: 25px;
margin-left: 4px;
}
section a{
text-decoration: none;
font-size: 16px;
}
section a:hover{
text-decoration: underline;
}
.jiage{
font-weight: bold;
color: brown;
}
.jiage2{
color: greenyellow;
}
footer{
margin: 0px auto;
width: 960px;
}
footer p{
text-align: center;
font-size: 14px;
color: gray;
}
footer span,img{
vertical-align: middle;
}
.no1,.no2,.no3,.no4{
z-index: 2;
}
.no1{
position: absolute;
left: 20px;
top: -5px;
}
.no2{
position: absolute;
}
.no3{
position: absolute;
}
.no4{
position: absolute;
top: -5px;
}
</style>
</head>
<body>
<header>
<div class="a1">
<img src="img/logo.jpg">
<div class="a11">
<ul>
<li><a href="#">都看閱器</a></li>
<li><a href="#">數字館</a></li>
<li><a href="#">噹噹優品</a></li>
<li><a href="#"><img src="img/icon_count.png" class="no4">尾品彙</a></li>
</ul>
</div>
</div>
<div class="a2">
<ul>
<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>
<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>
</header>
<section>
<div>
<img src="img/banner.png">
</div>
<div class="b1">
<div class="b11">
<div class="b112">
<img class="no1" src="img/bookNo1.gif"><img src="img/book-01.jpg">
</div>
<div class="b111">
<ul>
<li><a href="#">偷影子的人</a></li>
<li>作者:[法]馬克·李維(Marc Levy) 著,段韻靈 譯</li>
<li>出版社:湖南文藝出版社</li>
<li>噹噹價:<span class="jiage">¥ 17.90</span></li>
<li>不知道姓氏的克蕾兒。這就是你在我生命裡的角色,我童年時的小女孩,今日蛻變成了女人,
一段青梅竹馬的回憶,一個時間之神沒有應允的願望。 一個老是受班上同學欺負的瘦弱小男孩,
因為擁有一種特殊能力而強大:他能“偷別人的影子”,因而能看見他</li>
</ul>
</div>
</div>
<div class="b12">
<div>
<div class="b121">
<img class="no2" src="img/bookNo2.gif"><img src="img/book-02.jpg">
</div>
<div class="b122">
<ul>
<li><a href="#">看見(央視知名記者、主持人柴靜:十年個人成長的告白,中國社會變遷的備忘</a></li>
<li>作 者:柴靜 著</li>
<li>出版社:廣西師範大學出版社</li>
<li><span class="jiage">¥ 29.40</span> <span class="jiage2">7.4折</span></li>
</ul>
</div>
</div>
<div>
<div class="b121">
<img class="no3" src="img/bookNo3.gif"><img src="img/book-03.jpg">
</div>
<div class="b122">
<ul>
<li><a href="#">改變孩子先改變自己</a></li>
<li>作 者:賈容韜 賈毅 著</li>
<li>出版社:作家出版社</li>
<li><span class="jiage">¥ 22.20</span> <span class="jiage2">7.4折</span></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<footer>
<div>
<p><span>Copyright (C) 噹噹網 2004-2017, All Rights Reserved</span><img src="img/validate.gif"><span>京ICP證041189號出版物經營許可證 新出發京批字第直0673號</span></p>
</div>
</footer>
</body>
</html>