CSS美化網頁元素
[圖片上傳失敗...(image-d90d17-1554343106280)] 學習目標
(1) . 會使用CSS設置字體樣式
(2) . 會使用CSS設置文本樣式
(3) . 會使用CSS設置圖片對齊方式
(4) . 會使用CSS設置超鏈接樣式
(5) . 會使用CSS設置鼠標外觀
(6) . 會使用CSS設置背景樣式
(7) . 會使用CSS設置列表樣式
[圖片上傳失敗...(image-fb7013-1554343106280)] 知識點講授
一、 使用CSS編輯網頁文本
(一) 描述
本節將學習使用CSS設置字體大小、字體類型、文字顏色、字體風格等字體樣式；通過CSS設置文本段落的對齊方式、行高、文本與圖片的對齊方式，以及文字縮進方式徠排版網頁。
(二) <span>標簽
1. 描述
在HTML中，<span>標簽是被用來組合HTML文檔中的行內元素，它沒有固定的格式表示，只有對它應用CSS樣式，它才會產生視覺變化。
2. 案例演示
需求說明
文字“教師夢想”、“寧教”突出顯示
實現效果
[圖片上傳失敗...(image-3ac313-1554343106285)]
核心代碼
<p>在寧波教育學院，有一群人默默支持你的<span class="dream">教師夢想<span></p>
<p>選擇<span class="school">寧教</span>，成就你的夢想</p>
p{
font-size: 14px;
}
.dream{
font-size: 24px;
color: red;
}
.school{
font-size: 36px;
color: green;
}
(三) 字體樣式
1. 描述
CSS字體屬性定義字體類型、字體大小、字體是否加粗、字體風格等。
|
屬性名
|
含義
|
舉例
|
|
font-family
|
設置字體類型
|
font-family:"隸書";
|
|
font-size
|
設置字體大小
|
font-size:12px;
|
|
font-style
|
設置字體風格
|
font-style:italic;
|
|
font-weight
|
設置字體的粗細
|
font-weight:bold;
|
|
font
|
在一個聲明中設置所有字體屬性
|
font:italic bold 36px "宋體";
|
(四) 字體類型 font-family
1. 語法格式
p{font-family:Verdana,"楷體";}
這句代碼聲明了HTML頁面中<p>標簽的字體樣式，并同時聲明了兩種字體：Verdana,"楷體"。這樣瀏覽器會優先用英文字體顯示文字，如果英文字體沒有包含的字符（通常英文字體不支持中文），則從后面的中文字體里找，這樣就達到英文使用Verdana，中文使用楷體的不同字體效果。
多種字體之間用逗號隔開。
一些字體的名稱中間會出現空格，如Times New Roman字體，或中文，如楷體，這里需要用號將其引起來，命名瀏覽器知道這是一種字體名稱。
2. 案例演示
需求說明
設置中英文字體不一樣
實現效果
[圖片上傳失敗...(image-21c4ac-1554343106284)]
核心代碼
body{font-family: Times,"Times New Roman", "楷體";}
3. 經驗說明
(1) . 當需要同時設置英文字體和中文字體時，一定要將英文字體設置在中文字體之前，如果中文字體設置于英文字體之前，英文字體設置將不起作用。
(2) . 在實際網頁開發中，網頁的文本如果沒有特殊的要求，通常設置為“宋體”，宋體是計算機的默認字體，如果需要其他比較炫的字體，則使用圖片代替。
(五) 字體大小
1. 描述
CSS通過font-size屬性來控制文字的大小 ，常用單位是px(像素)。其他單位還有in、cm、mm、pt、pc
這里不再展示頁面效果圖
(六) 字體風格
1. 描述
CSS通過font-style屬性設置字體的風格，font-style有三個值：
normal:標準字體樣式
italic:斜體字體樣式
oblique:傾斜字體
font-style的默認值是normal，italic和oblique在頁面中顯示效果非常相似。
2. 案例演示
需求說明
標題題使用二種斜體，二級標題使用標準字體樣式
實現效果
[圖片上傳失敗...(image-6437f3-1554343106284)]
核心代碼
h1{font-size:24px; font-style:italic;}
.title{font-style:oblique;}
h2{font-size:16px; font-style:normal;}
(七) 字體粗細
1. 描述
CSS中使用font-weight屬性控制文字的粗細。
2. font-weight屬性的值
|
值
|
說明
|
|
normal
|
默認值，定義標準的字體。
|
|
bold
|
粗體字體。
|
|
bolder
|
更粗的字體。
|
|
lighter
|
更細的字體。
|
|
100、200、300、400、500、600、700、800、900
|
定義由細到粗的字體。
400等同于normal，700等同于bold。
|
3. 案例演示
實現效果
[圖片上傳失敗...(image-9b5022-1554343106284)]
核心代碼
.title {font-style:oblique; font-weight:normal;}
h2{font-size:16px; font-style:normal;}
p{font-size:12px;}
.pretitle{font-weight:bold;}
(八) 字體屬性
1. 描述
在前講解的幾個字體屬性是單獨使用的，實際上CSS中如果對同一部分的字體設置多種字體屬性時，需要使用font屬性來進行聲明，即利用font屬性一次設置字體的所有屬性。
各個屬性之間用英文空格分開，順序依次是字體風格、字體粗細、字體大小、字體類型
2. 案例演示
p{
font:oblique bold 12px “楷體”;
}
(九) 使用CSS排版網頁文本
在網頁中，用于排版網頁文本的樣式有文本顏色、水平對齊方式，首行縮進、行高、文本裝飾、垂直對齊方式。常用的文本屬性、及用法如下表：
|
屬性
|
含義
|
舉例
|
|
color
|
設置文本顏色
|
color:#00C;
|
|
text-align
|
設置元素水平對齊方式
|
text-align:right;
|
|
text-indent
|
設置首行文本的縮進
|
text-indent:20px;
|
|
line-height
|
設置文本的行高
|
line-height:25px;
|
|
text-decoration
|
設置文本的裝飾
|
text-decoration:underline;
|
(十) 文本顏色
1. 描述
在HTML頁面中，顏色統一采用RGB格式，按十六進制的方法表示，前兩位表示紅色，中間兩位表示綠色，最后兩位表示藍色。比如“#FFFFFF”; 如果看到3位的時，比如”#396”，是這個簡寫“#339966”。
當然也可以用英文單詞直接表示顏色
2. 案例演示
前面的例子都演示過，不再演示
(十一) 水平對齊方式
1. 描述
在CSS中，文本的的水平對齊是通過text-align屬性來控制的。
2. text-align屬性常用值
|
值
|
說明
|
|
left
|
把文本排列到左邊。默認值：由瀏覽器決定
|
|
right
|
把文本排列到右邊
|
|
center
|
把文本排列到中間
|
|
justify
|
實現兩端對齊文本效果
|
3. 案例演示：新聞
需求：
標題居中，來源居右，內容居左
實現效果
[圖片上傳失敗...(image-9aec7b-1554343106284)]
核心代碼
h1{
color: #091cc4;
font-size: 24px;
text-align: center;
}
h3{
text-align: right;
}
p{
font-size: 12px;
text-align: left;
}
(十二) 首行縮進和行高
1. 描述
在使用word編輯文檔時，通常會設置段落的行距，并且段落的首行縮進兩個字符，CSS，通過line-height屬性民來設置行高，通過text-indent屬性設置首行縮進。
在CSS中，text-indent常使用的單元是em,text-indent:2m表示縮進2個字符
2. 案例演示
需求
首行縮進2個字符，行高20px；
實現效果
[圖片上傳失敗...(image-eb1f28-1554343106283)]
核心代碼
h1{
color: #091cc4;
font-size: 24px;
text-align: center;
}
h3{
text-align: right;
}
p{
font-size: 12px;
text-align: left;
line-height: 20px;
text-indent: 2em;
}
(十三) 文本修飾和垂直對齊
1. 描述
文本裝飾
text-decoration屬性
|
值
|
說明
|
|
none
|
默認值，定義的標準文本。
|
|
underline
|
設置文本的下劃線。
|
|
overline
|
設置文本的上劃線。
|
|
line-through
|
設置文本的刪除線。
|
|
blink
|
設置文本閃爍。此值只在firefox瀏覽器中有效，在IE中無效。
|
其中none和underline是常用的，在后面的課程中會經常使用。
垂直對齊方式
vertical-align屬性：middle、top、bottom
2. 案例演示
實現效果
[圖片上傳失敗...(image-ff18c0-1554343106283)]
(十四) 課堂練習
1. 制作百度音樂標簽頁面
訓練要點
(1) . 使用Dreamweaver制作網頁
(2) . 使用字體屬性設置字體風格、大小
(3) . 使用文本屬性設置字體顏色、行距
(4) . 使用<span>標簽
需求說明
[圖片上傳失敗...(image-ce8a82-1554343106283)]
實現思路
(1) . 使用color屬性設置字體顏色
(2) . 使用font設置字體類型和字體大小，但是順序為字體大小→字體類型，字體類型要先設置英文字體，再設置中文字體；或者使用font-size設置字體大小，使用font-family設置字體類型。
(3) . 歌手分類字母序號放在標簽<span>，使用font-weight設置字體加粗。
(4) . CSS文件單獨放在CSS文件夾下，使用鏈接式引用CSS文件。
參考代碼
@charset "gb2312";
/* CSS Document */
h2{ font-size:18px; font-family:"楷體";}
p{font:12px "Times New Roman", Times "宋體"; line-height:20px;}
p span{font-weight:bold; color:#F00;}
(十五) 課后練習
1. 新聞信息展示頁面
需求說明
制作北大青鳥網站新聞信息展示頁面
使用外部樣式表創建頁面樣式
[圖片上傳失敗...(image-e648b2-1554343106283)]
二、 CSS的復合選擇器和CSS的繼承性
(一) CSS的復合選擇器
1. 描述
CSS復合選擇器是以標簽選擇器、類選擇器、ID選擇器這3種基本選擇器為基礎，通過不同方式將兩個或多個選擇器組合在一起而形成的選擇器。復合選擇器分為后代選擇器、交集選擇器和并集選擇器。
2. 后代選擇器
描述
在HTML中經常有標簽的嵌套使用，那么在CSS選擇器， 就可以通過嵌套的方式，對特殊位置的HTML標簽進行聲明。
比如，當<H3>……</H3>標簽之間包含<strong>……</strong>標簽時，就可以使用后代選擇器。
語法
后代選擇器的寫法就是把外層標簽寫在前面，內層標簽寫在后面，之間用空格分隔。
案例演示
【需求說明】：
第一行<strong>標簽中的文本字體顏色為紅色，字體大小為16px
第二行<strong>標簽的文本字體顏色為藍色，字體大小為36px
【案例演示效果】
[圖片上傳失敗...(image-b8ecef-1554343106282)]
【參考代碼】
<strong>問君能有幾多愁，</strong>
<h3>恰似一江<strong>春水</strong>向東流。</h3>
strong {color: red; font-size: 16px; }
h3 strong {color: blue; font-size: 36px; }
后代選擇器常用情況
后代選擇是CSS應用中非常常用的，通常在HTML標簽嵌套時，常用情況如下：
(1) . 按標簽的嵌套關系，如上例中<h3>標簽嵌套<strong>，直接按標簽嵌套關系編寫樣式；
(2) . 按選擇器的嵌套關系，當最外層的類選擇器名稱為head，它里面嵌套類選擇器、ID選擇器，這時直接按樣式的嵌套關系編寫，如.head .menu 或.head #menu
(3) . 3種選擇互相嵌套關系，當最外層的ID選擇器名稱為nav，它里面嵌套類選擇器和標簽選擇，如#nav .title 或#nav li
3. 交集選擇器【理解】
描述
交集選擇器是由兩個選擇器直接連接構成，其結果是選中二者各自元素范圍的交集。即選中同時滿足前后兩者定義的元素
語法格式
第一個必須是標簽選擇器，第二個必須是類選擇器或ID選擇器；
這兩個選擇器之間不能有空格，必須連續書寫。
案例演示
【需要說明】
以歐陽修的詞《蝶戀花·庭院深深幾許》為例，詞的所有內容寫在<p>標簽內，其中一句詞寫<p>標簽的嵌套標簽<strong>中，兩個標簽均加上類樣式txt; 兩個類樣式的txt分別是后代選擇器和交集選擇器。
【實現效果】
[圖片上傳失敗...(image-113c5c-1554343106282)]
【參考代碼】
<body>
<h2>蝶戀花?庭院深深深幾許</h2>
<p class="txt">
庭院深深深幾許，楊柳堆煙，簾幕無重數。
玉勒雕鞍游冶處， 樓高不見章臺路。
<strong class="txt">雨橫風狂三月幕，門掩黃昏，無計留春住。</strong>
淚眼問花花不語，亂紅飛過秋千去。
</p>
</body>
<style type="text/css">
p .txt {color: red; }/后代選擇器/
p.txt { color: blue;line-height: 28px;}/交集選擇器/
</style>
【總結說明】
(1) . 由兩個選擇器直接連接構成，選中二者各自元素范圍的交集
(2) . 第一個必須是標簽選擇器，第二個必須是類選擇器或者ID選擇器
(3) . 選擇器之間不能有空格，必須連續書寫
4. 并集選擇器
描述
與次選擇器相對應，還有一種并集選擇器，它的結果是同時選中各個基本選擇器所選擇的范圍。
語法說明
任何形式的選擇器（包括標簽選擇器、類選擇器、ID選擇器等）都可以作為并集選擇器的的一部分。
并集選擇器是多個選擇器通過逗號連接而成。
案例演示
【需求說明】
以歐陽修的詞《蝶戀花·庭院深深幾許》為例，把詩詞的每句都放在不同的標簽中，然后這些標簽設置相同的樣式。
【實現效果】
[圖片上傳失敗...(image-f202cb-1554343106281)]
【參考代碼】
<body>
<h2>蝶戀花?庭院深深深幾許</h2>
<h3>庭院深深深幾許，楊柳堆煙，簾幕無重數。</h3>
<p class="first">玉勒雕鞍游冶處，樓高不見章臺路。</p>
<p class="second">雨橫風狂三月幕，門掩黃昏，無計留春住。</p>
<p id="end">淚眼問花花不語，亂紅飛過秋千去。</p>
</body>
<style type="text/css">
h3,
.first,
.second,
end {
font-size: 16px;
color: green;
font-weight: normal;
}
</style>
經驗說明
在實際開發中，并集選擇器經常會用在對頁面中所有標簽進行全局設置樣式。
(二) CSS繼承特性【理解】
1. 什么是繼承
案例演示
【實現效果】
[圖片上傳失敗...(image-604091-1554343106281)]
【分析】
[圖片上傳失敗...(image-59dd0a-1554343106281)]
【參考代碼】
<html>
<head>
<meta charset="utf-8">
<title>繼承的應用</title>
</head>
<body>
<h1>網絡傳播學院學習平臺</h1>
<p>歡迎來到網傳學習平臺，這里將為您提供豐富的學習內容。</p>
<ul>
<li>網頁制作</li>
<ul>
<li>使用Dreamweaver制作網頁</li>
<li>使用CSS布局和美化網頁
<ul>
<li>CSS初級</li>
<li>CSS中級</li>
<li>CSS高級</li>
</ul>
</li>
<li>使用JavaScript制作網頁特效</li>
</ul>
</li>
<li>平面設計</li>
<ol>
<li>美術基礎</li>
<li>使用Photoshop處理圖形圖像</li>
<li>使用Illustrator設計圖形</li>
<li>制作Flash動畫</li>
</ol>
</ul>
<p>如果您有任何問題，歡迎給我們留言。</p>
</body>
</html>
2. 繼承的CSS應用
描述
(1) . 子標簽可以繼承父標簽的樣式風格
(2) . 子標簽的樣式不會影響父標簽的樣式風格
案例演示
【實現效果】
[圖片上傳失敗...(image-ed7d95-1554343106281)]
【核心代碼】
<style type="text/css">
li {
color: blue;
font-size: 12px;
}
ul li ul li ul li {
color: red;
}
ul li ol li {
color: green;
}
</style>
三、 使用CSS設置超鏈接
在任何一個網頁上，超鏈接都是最基本的元素，通過超鏈接能夠實現頁面的跳轉、功能的激活。下面介紹如何使用CSS設置超鏈接的樣式。
(一) 超鏈接偽類
1. 超鏈接的默認樣式
描述
文本有下劃線，圖片有邊框
單擊鏈接前后的文本顏色不一樣
案例展示
[圖片上傳失敗...(image-f9a9ed-1554343106281)]
<body>
<p><a href="#"><img src="image/hetao.jpg" alt="無漂白薄皮核桃" /></a></p>
<p><a href="#">樓蘭蜜語新疆野生</a>??<a href="#">無漂白薄皮核桃</a></p>
<p><span>500gx2包 ￥48.8</span></p>
</body>
2. 超鏈接接偽類
語法
標簽名:偽類名{聲明;}
常用的超鏈接偽類
|
偽類名稱
|
含義
|
示例
|
|
a:link
|
未單擊訪問時超鏈接樣式
|
a:link{color:#9ef5f9;}
|
|
a:visited
|
單擊訪問后超鏈接樣式
|
a:visited {color:#333;}
|
|
a:hover
|
鼠標懸浮其上的超鏈接樣式
|
a:hover{color:#ff7300;
|
|
a:active
|
鼠標單擊未釋放的超鏈接樣式
|
a:active {color:#999;}
|
設置偽類的順序：a:link->a:visited->a:hover->a:active
案例演示
[圖片上傳失敗...(image-42cab9-1554343106281)]
[圖片上傳失敗...(image-5c5c6c-1554343106281)]
參考代碼
img {
border:0px;
}
p {
font-size:12px;
}
a {
color:#000;
text-decoration:none;
}
a:hover {
color:#B46210;
text-decoration:underline;
}
3. CSS設置鼠標形狀
語法說明
CSS通過cursor來設置鼠標指針的樣式
cursor屬性的常用值
|
值
|
說明
|
圖例
|
|
default
|
默認光標
|
[圖片上傳失敗...(image-83361a-1554343106274)]
|
|
pointer
|
超鏈接的指針
|
[圖片上傳失敗...(image-1c82e8-1554343106274)]
|
|
wait
|
指示程序正在忙
|
[圖片上傳失敗...(image-f8d9db-1554343106274)]
|
|
help
|
指示可用的幫助
|
[圖片上傳失敗...(image-86c4b7-1554343106274)]
|
|
text
|
指示文本
|
[圖片上傳失敗...(image-3be81-1554343106274)]
|
|
crosshair
|
鼠標呈現十字狀
|
[圖片上傳失敗...(image-ac99b4-1554343106274)]
|
案例演示
在上例的基礎上，加下如下樣式
span{cursor:pointer;}
四、 背景樣式
background
可以設置背景顏色和背景圖像
(一) 認識<div>標簽
1. <div>標簽的用法
網頁布局
排版網頁內容
2. 語法
<div>網頁內容…</div>
3. 案例演示
<style type="text/css">
header{
width:200px;
height:280px;
background-color: red;
}
</style>
<div id="header">網頁內容…</div>
(二) 背景顏色
1. 描述
在CSS中，使用background-color屬性設置字體、div、列表等網頁元素的背景顏色，它的值的表示方法與color表示方法一樣，也是用十六進制的方法表示背景顏色值。
但是它有一個特殊的值-transparent值，即透明的意思。
2. 案例演示
實現效果
[圖片上傳失敗...(image-554ace-1554343106281)]
參考代碼
【HTML】
<div id="nav">
<div class="title">全部商品分類</div>
<ul>
<li><a href="#">圖書</a>??<a href="#">音像</a>??<a href="#">數字商品</a></li>
<li><a href="#">家用電器</a>??<a href="#">手機</a>??<a href="#">數碼</a></li>
<li><a href="#">電腦</a>??<a href="#">辦公</a></li>
<li><a href="#">家居</a>??<a href="#">家裝</a>??<a href="#">廚具</a></li>
<li><a href="#">服飾鞋帽</a>??<a href="#">個護化妝</a></li>
<li><a href="#">禮品箱包</a>??<a href="#">鐘表</a>??<a href="#">珠寶</a></li>
<li><a href="#">食品飲料</a>??<a href="#">保健食品</a></li>
<li><a href="#">彩票</a>??<a href="#">旅行</a>??<a href="#">充值</a>??<a href="#">票務</a></li>
</ul>
</div>
【CSS】
nav {
width:230px;
background-color:#D7D7D7;
}
.title {
background-color:#C00;
font-size:18px;
font-weight:bold;
color:#FFF;
text-indent:1em;
line-height:35px;
}
nav ul li {
height:25px;
line-height:25px;
}
a {
font-size:14px;
text-decoration:none;
color:#000;
}
a:hover {
color:#F60;
text-decoration:underline;
}
(三) 背景圖像
1. 描述
在CSS中，使用background-image屬性來設置背景圖像
2. 語法說明
背景圖像
background-image屬性
background-image:url(圖片路徑);
背景重復方式
background-repeat屬性
默認值是水平和垂直方向重復
repeat：沿水平和垂直兩個方向平鋪
no-repeat：不平鋪，即只顯示一次
repeat-x：只沿水平方向平鋪
repeat-y：只沿垂直方向平鋪
背景定位
background-position屬性
|
值
|
含義
|
|
Xpos Ypos
|
單位：px，Xpos表示水平位置，Ypos表示垂直位置
|
|
X% Y%
|
使用百分比表示背景的位置
|
|
X、Y方向關鍵詞
|
水平方向的關鍵詞：left、center、right
垂直方向的關鍵詞：top、center、bottom
|
3. 案例演示
需求說明
給導航標題右側添加向下指示的三角箭頭
給每行的導航菜單添加向右指示的三角箭頭
實現效果
[圖片上傳失敗...(image-799ac9-1554343106281)]
參考代碼
.title {
……
background-image: url(../image/arrow-down.gif);
background-repeat: no-repeat;
background-position: 205px 10px;
}
nav ul li {
……
background-image: url(../image/arrow-right.gif);
background-repeat: no-repeat;
background-position: 170px 2px;
}
(四) 背景屬性
[圖片上傳失敗...(image-cdfc7-1554343106281)]
(五) 課堂作業
1. 家用電器商品分類頁面
需求說明
(1) . 電器分類無下劃線，鼠標懸浮超鏈接時顯示下劃線。
(2) . 分類內容超鏈無下劃線，鼠標懸浮至超鏈接時字體顏色為棕紅色（#F60），顯示下劃線。
實現效果
[圖片上傳失敗...(image-f45da7-1554343106281)]
五、 列表樣式
CSS列表有4個屬性來設置列表樣式，分別是list-style-type、list-style-image、list-style-position和list-style。下面分別介紹這4個屬性。
(一) list-style-type
1. 描述
list-style-type屬性設置列表項標記的類型。
2. 常用屬性值
|
值
|
說明
|
語法示例
|
|
none
|
無標記符號
|
list-style-type:none;
|
|
disc
|
實心圓，默認類型
|
list-style-type:disc;
|
|
circle
|
空心圓
|
list-style-type:circle;
|
|
square
|
實心正方形
|
list-style-type:square;
|
|
decimal
|
數字
|
list-style-type:decimal
|
(二) list-style-image
1. 描述
list-style-image屬性是使用圖像來替換列表項的標記
當設置了list-style-image，list-style-type就不會起作用。
2. 案例演示
需求說明
把三角形設置為列表項的標記
實現效果
[圖片上傳失敗...(image-bf9c2a-1554343106280)]
參考代碼
nav ul li {
height:25px;
line-height:25px;
/* background-image: url(../image/arrow-right.gif);
background-repeat: no-repeat;
background-position: 170px 2px; */
list-style-image: url(../image/arrow-right.gif);
list-style-type: circle;
}
(三) list-style-position
1. 描述
此屬性設置在何處放置列表項標記。
2. 屬性值
inside：放置在文本以風，且環繞文本根據標記對齊
outside：默認值，它保持標記位于文本的左側，列表項標記放置在文本以外，且環繞文本不根據標記對齊
(四) 列表樣式簡寫
list-style簡寫順序
style-type、style-position、style-image
(五) 課堂練習
1. 暢銷書排行榜頁面
需求說明
使用無序列表制作暢銷書排行榜頁面
超鏈接無下劃線，鼠標懸浮至超鏈接時顯示下劃線
實現效果
[圖片上傳失敗...(image-cc5dc5-1554343106280)]
實現思路
(1) . 使用list-style-type屬性設置列表無標記符號。
(2) . 使用背景屬性設置列表的圖標樣式，列表內容向內縮進2個字符。
六、 本章總結
(1) . 使用CSS設置字體的大小、類型、風格、粗細等。
(2) . 使用CSS設置文本顏色、行距、首行縮進、對齊方式、文本裝飾等。
(3) . 使用CSS設置超鏈接在不同狀態下的樣式。
(4) . 使用CSS設置頁面背景顏色、背景圖片，為列表設置列表自定義圖標。
(5) . 使用CSS設置列表項的類型、列表圖像及列表符號顯示位置。
七、 課后作業
(一) 制作一個Android課程介紹的界面
1. 需求說明
(1) . 使用<div>、<p>、<span>等標簽編輯頁面，頁面整體背景顏色為灰色（#eeeeee）
(2) . 課程特色字體顏色為綠色（#5c9815）,設計理念字體顏色為（#F26522）
(3) . 課程特色和設計理念每行開頭帶背景顏色的字體為白色，背景顏色從提供的素材的頁面效果圖中獲取。
(4) . 使用外部樣式表創建頁面樣式。
2. 實現效果
[圖片上傳失敗...(image-e8b015-1554343106280)]
(二) 淘寶女裝分類頁面
1. 需求說明
(1) . 使用<div>和標題等HTML標簽編輯頁面
(2) . 女裝各分類名稱前的圖片使用背景圖片的方式實現，標題字體大小 為18px,加粗顯示
(3) . 分類內容字體大小 為12px,超鏈接文本字體顏色為黑色，無下劃線，當鼠標移至超鏈接文本上時字體顏色為橙色（#F60）,并且顯示下劃線。
(4) . 使用外部樣式表創建頁面樣式
(5) . 頁面中其他效果見效果圖
2. 實現效果
[圖片上傳失敗...(image-4631ca-1554343106280)]
