29. 教你零基礎(chǔ)搭建小程序：小程序的常見組件—ra

29. 教你零基礎(chǔ)搭建小程序：小程序的常見組件—radio

子們，來了。

這一章繼續(xù)繼續(xù)，講解小程序的常見組件（7）— radio單選框。

它與網(wǎng)頁的單選框用法是大致相同的，但是有2個細(xì)節(jié)需特別注意。

1、可以通過 color屬性來修改顏色

如上圖，"選中"圖標(biāo)被選中時，默認(rèn)樣式是呈現(xiàn)綠色，這里可以通過 color屬性來修改顏色。

2、當(dāng)需要選中某個單選框，觸發(fā)某一事件時，需和radio group 一起使用。

啥意思呢？看不懂？

別急，我們用一個需求來講講就懂了。

需求：創(chuàng)建男，女兩個標(biāo)簽，當(dāng)選中一個時，在圖標(biāo)下方顯示文字"你選中的為男/女"

擼起袖子加油干：

1、新建一個頁面 demo15

2、打開demo15.wxml 文件，刪除原先的代碼，寫入如下代碼：

  <radio-group bindchange="    ">
 <radio color="red" value="male">男</radio>
 <radio color="red" value="female" >女</radio>
 </radio-group>

3、保存，小程序界面顯示男，女兩標(biāo)簽。

點擊男/女標(biāo)簽，圖標(biāo)出現(xiàn)紅色選中，但沒有提示文字。

別著急，我們慢慢來。

4、給radio-group 綁定change 事件，修改代碼成如下：

（與上面代碼神似，注意觀察啊）

 <radio-group bindchange="handlechange">
 <radio color="red" value="male">男</radio>
 <radio color="red" value="female" >女</radio>
 </radio-group>

5、在demo15.wxml中，加上view標(biāo)簽，用來顯示頁面中顯示的值，代碼如下：

<radio-group bindchange="handlechange">  
  <radio color="red" value="male">男</radio> 
 <radio color="red" value="female" >女</radio> 
 </radio-group>

<view>您選中的是：{{gender}}</view>

保存后，小程序頁面選中某個圖標(biāo)后，出現(xiàn)提示文字。

6、在demo15.js文件中，寫入頁面邏輯的代碼。

首先先刪除原先的代碼，只保留data部分。

寫入如下代碼（內(nèi)含每步的注釋）：

Page({
  data: {
    gender: ""
 },
 handleChange(e){
 // 1 獲取單選框中的值
 let gender=e.detail.value;
 // 2 把值 賦值給 data中的數(shù)據(jù)
 this.setData({
 // gender:gender
 gender
 })
 }
})

保存后，小程序顯示如下，選中某一個圖標(biāo)，下面就會有提示文字。

我們的需求實現(xiàn)了。

以上步驟很好的解釋了radio 單選框的第2個細(xì)節(jié)：

當(dāng)需要選中某個單選框，觸發(fā)某一事件時，需和radio group 一起使用。

還有第一個細(xì)節(jié)：radio的顏色屬性。

我們演示一下：

很簡單，只需一步就搞定。

修改demo15.wxml文件中 radio color 的部分，
這里將原先的紅色修改為綠色（green），其余不變。

代碼如下：

  <radio-group bindchange="handlechange">
 <radio color="green" value="male">男</radio>
 <radio color="green" value="female" >女</radio>
 </radio-group>
 
 <view>您選中的是：{{gender}}</view>

保存后，圖標(biāo)被選中后的顏色發(fā)生了變化：

到這里，我們的第一個小細(xì)節(jié)也演示完了。

單選框的用法基本就這兩點與網(wǎng)頁中的單選框的使用不同，其余具體知識點，請移步官方文檔。

快門傳送：https://developers.weixin.qq.com/miniprogram/dev/component/radio.html

從新增了css3一些新屬性后，給很多前端開發(fā)者在制作網(wǎng)頁效果方面帶來了很大的方便！增強了炫酷的用戶體驗！下面來說說css3屬性選擇器input下的radio定制效果，感興趣的小伙伴可以看看！

效果是這樣的：

模擬一個方向盤指示效果，當(dāng)你點擊上下左右，方向指針就會指向到那個位置！

實現(xiàn)代碼如下：

html結(jié)構(gòu)：

css樣式部分：

附上項目中用到的圖標(biāo)：

tml入門基礎(chǔ)筆記(簡單實用)

一、初識html

1.HTML：Hyper Text Markup Language（超文本標(biāo)記語言）

java是一門編譯性語言

html是一門解釋性的標(biāo)記語言

超文本：文字、圖片、音頻、視頻、動畫、超鏈接

標(biāo)記：就是指組成HTML的各種標(biāo)簽

2.HTML5的優(yōu)勢：

1、各大瀏覽器廠商對它的支持

2、市場的需求

3、跨平臺

3.W3C標(biāo)準(zhǔn)：

1、結(jié)構(gòu)化標(biāo)準(zhǔn)：指用什么語言去搭建整個網(wǎng)站（html 5）

2、表現(xiàn)化標(biāo)準(zhǔn)：指用什么去裝飾整個網(wǎng)站（css3）

3、行為標(biāo)準(zhǔn)：指用什么去實現(xiàn)網(wǎng)站的功能（JavaScript，jQuery）

4.html的基本結(jié)構(gòu)：

<html>

<head>

<title>天貓精選-理想生活上天貓</title>

</head>

大家好！！！！！

</body>

</html>

雙標(biāo)簽：有個兩個標(biāo)簽成對出現(xiàn)的叫做雙標(biāo)簽

表示HTML網(wǎng)頁的開始，表示網(wǎng)頁的結(jié)束

表示網(wǎng)頁頭部的開始，表示網(wǎng)頁頭部的結(jié)束

表示網(wǎng)頁身體的開始，表示網(wǎng)頁身體的結(jié)束

表示網(wǎng)頁標(biāo)題的結(jié)束

標(biāo)題標(biāo)簽

<h1></h1>....<h6></h6>:會對文字進(jìn)行加粗，并且改變字體的大小，還會進(jìn)行換行

段落標(biāo)簽

<p></p>:表示它獨占一行，會保留段落之間的間距

加粗

<strong></strong>:表示加粗

斜體

<em></em>:表示斜體

字體設(shè)置

<font></font>:表示字體

屬性：color顏色

face字體的樣式

size字體的大小

單標(biāo)簽：只有一個，開始就結(jié)束的叫做單標(biāo)簽

屬性：charset=“utf-8”;utf-8表示國際編碼格式，所有的字符都能識別

換行標(biāo)簽

<br/>：表示換到下一行

水平線標(biāo)簽

<hr/>:表示水平線

屬性：width表示水平線的寬度

size表示水平線的厚度

color表示水平線的顏色

align表示水平線的水平位置，left左邊，center中間，right右邊

圖像標(biāo)簽

src表示的是圖片地址

絕對路徑：直接寫完整圖片所在的位置

相對路徑：先找到和你的網(wǎng)頁所在同一級的圖片所在位置，然后再去在這個基礎(chǔ)

去找圖片的位置，如果圖片在下一級那么使用“/”來找到它，如果

上一級使用“..”來找到它

alt表示的是圖片加載失敗的替代文字

title表示的是鼠標(biāo)懸浮時圖片的提示文字

width表示圖片的寬度

height表示圖片的高度

特殊標(biāo)簽：

大于符號：>（great than）

小于符號：<（less than）

空格符號：

版權(quán)符號：?

注釋：

5.超鏈接標(biāo)簽

href表示鏈接的地址，使用相對路徑的方式去使用

target表示連接的方式

_blank表示在新窗口打開

_self表示在本窗口打開

_parent表示在父窗口打開

1、頁面間的鏈接，用于兩個頁面之間相互的跳轉(zhuǎn)

2、錨鏈接，用于頁面之間定位

①要設(shè)置一個錨點，語法錨點

②將點擊之后要跳轉(zhuǎn)的超鏈接設(shè)置跳轉(zhuǎn)的錨點位置，語法：

如果不在同一個頁面中，先寫好要跳轉(zhuǎn)頁面所在的位置，然后再寫錨點的名字

3、功能性鏈接 (發(fā)郵件、msn、可以打開本地的相應(yīng)的客戶端)

語法：

二、網(wǎng)頁媒體元素

1.視頻元素<video></video>

屬性：src表示添加視頻的路徑(位置)

controls表示在添加的視頻元素上添加播放控件，只有一個屬性值

/autoplay表示自動播放（慎用），只有一個屬性值

如果屬性只有一個值，屬性值可以省略不寫

source表示引用的視頻源路徑，一般會引用多個源路徑，以避免瀏覽器不兼容的問題

2.音頻元素<audio></audio>

屬性：src表示添加視頻的路徑（位置）

controls表示在添加的音頻元素上添加播放控件，只有一個屬性值

/autoplay表示自動播放（慎用），只有一個屬性值

source表示引用的音頻源路徑，一般會引用多個源路徑，以避免瀏覽器不兼容的問題

3.內(nèi)嵌框架<iframe></iframe>

屬性：src表示添加內(nèi)嵌內(nèi)容的路徑

name表示這個框架的名字

width表示這個框架的寬度

height表示這個框架的高度

frameborder表示內(nèi)嵌框架的邊框

scrolling表示是否出現(xiàn)滾動條

作用：

1、將多個網(wǎng)頁重復(fù)的部分抽取出來，通過內(nèi)嵌框架的方式，放到各個網(wǎng)頁中

2、使用<a>標(biāo)簽跳轉(zhuǎn)到指定的框架中，先在指定要跳轉(zhuǎn)到的框架中取一個name，使用target=“name的值”

<a>標(biāo)簽一定要寫href屬性才能生效，如果不想跳轉(zhuǎn)到任何頁面，那么href="#",表示該超鏈接為空

鏈接，點擊空鏈接會刷新頁面

4.語義化結(jié)構(gòu)標(biāo)簽：主要是為了讓結(jié)構(gòu)更加清晰化

<header>表示頁面頭部內(nèi)容

<section>表示頁面主體內(nèi)容

<footer>表示頁面底部內(nèi)容

<nav>表示導(dǎo)航欄內(nèi)容

<aside>表示側(cè)邊欄內(nèi)容

<article>表示頁面獨立文章內(nèi)容

三、表單元素

1.表單<form></form>

屬性：1、method表示表單的提交方式，有兩個值，第一個叫post，第二個叫g(shù)et

get方式的請求會將表單中所有表單元素信息顯示在地址欄中

post方式的請求必須有一個服務(wù)器來處理請求，所有表單元素的信息不會顯示在地址欄中，在實際開發(fā)中一般使用post方式請求

2、action表單要提交的位置

2.表單元素

語法：

屬性： name表示input標(biāo)簽的名字

value表示input標(biāo)簽的值

type表示input標(biāo)簽的元素類型

文本框：專門用來輸入文字

語法：<input type="text" name="userName" value="admin"/>，type的值為text

size表示文本框的長度

maxlength表示允許輸入的最大字符長度

密碼框：用來輸入密碼

語法：<input type="password" name="userName" value="admin"/>，

type的值為password

size表示文本框的長度

maxlength表示允許輸入的最大字符長度

單選按鈕

<input type="radio" name="sex" value="boy"/>男

<input type="radio" name="sex" value="girl"/>女

注意：單選按鈕的每個input中的name值必須相同，不然不能實現(xiàn)選擇一個切換的作用

checked屬性表示默認(rèn)選中

復(fù)選框

<input type="checkbox" name="hobby" value="" />打游戲

<input type="checkbox" name="hobby" value="" checked/>睡覺

<input type="checkbox" name="hobby" value="" />出去約會

復(fù)選框可以選擇多個，并且可以取消

checked屬性表示默認(rèn)選中

下拉列表框

<select>表示定義了一個列表框

<option>表示列表項

</select> selected表示默認(rèn)選中

按鈕

1、提交按鈕submit，它可以將表單中的信息提交到指定的位置

2、重置按鈕reset，它可以將表單中的信息恢復(fù)到默認(rèn)值

3、普通按鈕button，它只是單純起一個按鈕的作用，需要和JavaScript和jQuery一起使

用，實現(xiàn)各種功能

4、圖片按鈕image，src表示圖片的路徑，也具有提交作用

多行文本域：需要輸入多行文字

<textarea>表示定義了一個多行文本域

cols表示文本域的寬度

rows表示文本域的高度

文件域：上傳文件

需要設(shè)置編碼屬性enctype="multipart/form-data"，表示將表單數(shù)據(jù)分為多部分提交

郵箱：可以進(jìn)行郵箱驗證

網(wǎng)址：可以進(jìn)行網(wǎng)址驗證

數(shù)字：提供輸入數(shù)字

min表示允許的最小值

max表示允許的最大值

step表示每次增加或者減少的數(shù)字間隔

value表示默認(rèn)值

搜索框：可以搜索提示關(guān)鍵字的文本框

3.表單的高級應(yīng)用

1、隱藏域：主要應(yīng)用于在提交信息時不想讓用戶看到的信息進(jìn)行隱藏提交

2、只讀和禁用屬性

只讀：表示在網(wǎng)站上用戶只能夠查看，不能夠修改的數(shù)據(jù)，使用readonly添加只讀

禁用：一般表示在滿足某個條件之后，才能使用的功能，使用disabled添加禁用

3、表單元素的標(biāo)注

①選擇要點擊后跳轉(zhuǎn)文本加上<label>標(biāo)簽

②選擇跳轉(zhuǎn)對應(yīng)的表單元素，給它加上id這個屬性（id屬性值在整個網(wǎng)頁只能出現(xiàn)一

次，不可以有重復(fù)的id值）

③在<label>中添加for屬性，然后屬性值為對應(yīng)的id值

4.表單的初步驗證

為什么要進(jìn)行表單驗證

1、減輕服務(wù)器的壓力

2、保證數(shù)據(jù)的可行性和安全性

5.驗證的方法

1、placeholder表示這個表單元素期待用戶輸入什么信息，它是起提示作用，當(dāng)用戶輸入

內(nèi)容時，提示信息隱藏

2、required表示表單元素填寫內(nèi)容不能為空，使用了required的該表單元素必須填寫

3、pattern表示表單中的內(nèi)容必須和輸入的正則表達(dá)式一致

^表示正則表達(dá)式的開始

$表示正則表達(dá)式的結(jié)束

[]表示在中括號中任選其中一個

\d表示匹配0~9之間的任意一個數(shù)

{n}表示前面的一種匹配方式匹配的次數(shù)，表示匹配n次

-表示就是-

\w表示匹配所有字母或數(shù)字或下劃線

\u4E00-\u9FA5匹配漢字

{4,10}表示匹配前面的一種匹配方式4~10次

A-Z表示匹配大寫的英文字母

a-z表示匹配小寫的英文字母

|表示或者

四、初識CSS3

1.CSS:層疊樣式表，它是專門用來設(shè)計網(wǎng)頁風(fēng)格的

2.CSS的優(yōu)點

1、內(nèi)容與表現(xiàn)分離，便于網(wǎng)頁維護(hù)

2、網(wǎng)頁的表現(xiàn)統(tǒng)一，統(tǒng)一風(fēng)格

3、豐富的樣式，使得頁面布局更加靈活

4、減少網(wǎng)頁的代碼量，增加網(wǎng)頁的瀏覽速度

5、運用獨立于頁面的CSS，有利于網(wǎng)頁被搜索引擎收錄

3.CSS樣式的語法

選擇器{

聲明(可以為1~n條)

屬性:屬性值;

}

選擇器：需要添加這些聲明的元素（標(biāo)簽）

聲明：由屬性和屬性值組成，中間用“:”,使用“;”結(jié)尾

4.在html中添加樣式的方式

1、行內(nèi)樣式

在需要添加樣式的標(biāo)簽中，添加一個style屬性，在style屬性中添加聲明

2、內(nèi)部樣式

在里面添加一個,然后通過選擇器和聲明添加樣式

3、外部樣式

它可以實現(xiàn)表現(xiàn)與內(nèi)容的徹底分離，可以讓樣式表重復(fù)使用，便于維護(hù)和修改，并且

可以極大的減少代碼量

①鏈接外部樣式表

語法：

href表示引用的哪一個外部樣式表

rel表示使用的是樣式表

type表示文本類型為css類型

②導(dǎo)入外部樣式表

語法：@import url(“css/第一個外部樣式.css”);

區(qū)別：鏈接外部樣式表它是先將外部的CSS樣式添加到網(wǎng)頁中進(jìn)行加載，再加載網(wǎng)頁的

內(nèi)容，導(dǎo)入外部樣式表是先加載網(wǎng)頁中的內(nèi)容，再進(jìn)行外部樣式表的加載

樣式表的優(yōu)先級別

行內(nèi)樣式>內(nèi)部樣式>外部樣式，遵循“就近原則”

5.CSS3中的選擇器

一、基本選擇器

1、標(biāo)簽選擇器：以標(biāo)簽名稱作為選擇器的名稱

選擇所有網(wǎng)頁的該標(biāo)簽元素，比如：p表示選擇該網(wǎng)頁中所有的p標(biāo)簽

2、類選擇器：以類的名稱作為選擇器的名稱，并且在選擇器的名稱前加上“.”，類

名能夠重復(fù)使用

3、id選擇器：以id的名稱作為選擇器的名稱，并且在選擇器的名稱前加上“#”，id

名在該網(wǎng)頁只能出現(xiàn)一次，具有唯一性

選擇器的優(yōu)先級

id選擇器>類選擇器>標(biāo)簽選擇器

二、層次選擇器

1、后代選擇器

語法：E F{聲明}，E表示的是被匹配的元素，F(xiàn)表示被匹配的E的后代元素

比如：body p{},表示匹配所有body的后代p元素

2、子選擇器

語法：E>F{聲明}，E表示的是被匹配的元素，F(xiàn)表示被匹配的E的子元素

比如：body>p{},表示匹配所有body的子元素中的p元素

3、相鄰兄弟選擇器

語法：E+F{聲明}，E表示的是被匹配的元素，F(xiàn)表示被匹配的E的相鄰兄弟元素

比如：.p1+p{},表示匹配.p1的相鄰元素并且為p元素，只匹配后面的元素

4、通用兄弟選擇器

語法：E~F{聲明}，E表示的是被匹配的元素，F(xiàn)表示被匹配的E的所有兄弟元素

比如：.p1~p{},表示匹配.p1的所有兄弟元素并且為p元素，只匹配后面的

元素

三、結(jié)構(gòu)偽類選擇器

1、語法：E>F:first-child，E表示的是被匹配的元素，F(xiàn)表示被匹配的F:first-

child表示被匹配的E的子元素中第一個元素并且這個元素是F元素

2、語法：E>F:last-child，E表示的是被匹配的元素，F(xiàn)表示被匹配的F:last-

child表示被匹配的E的子元素中最后一個元素并且這個元素是F元素

3、語法：E>F:nth-child(n)，E表示的是被匹配的元素，F(xiàn)表示被匹配的F:nth-

child(n)表示被匹配的E的子元素中最后一個元素并且這個元素是F元素

even表示匹配所有偶數(shù)行

odd表示匹配所有奇數(shù)行

4、語法：E>F:nth-of-type(n)，E表示的是被匹配的元素，F(xiàn)表示被匹配的F:nth-

of-type(n)表示被匹配的E的子元素中所有的F元素，然后再去找第n個

E>F:nth-child(n)表示先匹配所有的兒子，再去找第幾個兒子是不是F元素，如果是

就能匹配，E>F:nth-of-type(n)先匹配所有F元素，再去找第幾個元素

四、屬性選擇器

1、E[attr],E表示匹配的E元素，attr表示屬性，匹配具有attr屬性的E元素

2、E[attr=val],匹配具有attr屬性，并且屬性值為val的E元素

3、E[attr^=val],匹配具有attr屬性，并且屬性值以val開頭的E元素

4、E[attr$=val],匹配具有attr屬性，并且屬性值以val結(jié)尾的E元素

5、E[attr*=val],匹配具有attr屬性，并且屬性值中包含val的E元素

六、CSS3美化網(wǎng)頁元素

前言：<span>這個標(biāo)簽沒有任何實際意義，它只是為了突出顯示某個部分，它是一個行內(nèi)元素，不能夠獨

占一行，并且該元素所占的區(qū)域是根據(jù)內(nèi)容大小決定，不會因為改變寬度和高度改變它的大小

<div>這個標(biāo)簽沒有任何實際意義,它只是為了將某些部分裝起來，它是一個塊元素，會獨占一行，

并且該元素所占的區(qū)域是根據(jù)它的寬度和高度決定，會因為改變寬度和高度改變它的大小

1.字體樣式：

1、font-family字體類型，字體類型的值有：“楷書”、“隸書”、“微軟雅黑”、英文字體

可以寫多個字體格式，使用“，”隔開，如果同時存在英文和中文字體，英文就顯示

英文字體，中文就顯示中文字體，并且英文字體要放在中文字體前面

2、font-size字體大小，就是改變字體大小，字體大小的單位使用px

3、font-style

字體風(fēng)格，normal正常的（默認(rèn)）、italic（傾斜的）、oblique（傾斜的）

4、font-weight字體粗細(xì)，bold（粗體）、bolder（更粗的）、lighter（細(xì)的）

font字體屬性，需要滿足字體屬性設(shè)置順序，風(fēng)格=》粗細(xì)=》大小=》類型

2.文本樣式：

1、color

文本顏色

①使用英文單詞去表示顏色

②使用十六進(jìn)制的方式表示，并且如果相鄰的兩兩數(shù)字相同，可以縮寫為一位

③使用三原色的方式去表示，語法：rgb(r,g,b)，rgba(r,g,b,a)

r,g,b取值從0~255

a表示透明度，取值從0~1,0表示完全透明，1表示完全不透明

2、text-align

水平對齊方式，設(shè)置文本的水平對齊方式

屬性值：center居中，left居左，right居右

3、vertical-align垂直對齊方式，設(shè)置文本的水平對齊方式

屬性值：middle居中，top居上，bottom居下

4、text-indent設(shè)置文本首行縮進(jìn)，屬性值一般使用em相對單位，em表示長度為文本字符

大小的長度

5、line-height設(shè)置文本行高，屬性值使用px為單位，還可以設(shè)置為倍數(shù)

6、text-decoration

文本裝飾

屬性值：①none表示沒有任何裝飾

②underline表示下劃線

③overline表示上劃線

④line-through表示刪除線

7、text-shadow文本陰影

語法：text-shadow : color x-offset y-offset blur-radius; color陰影顏色

x-offset表示X軸偏移量，正數(shù)往右偏移，負(fù)數(shù)往左偏移

y-offset表示Y軸偏移量，正數(shù)往下偏移，負(fù)數(shù)往上偏移 blur-radius表示模糊半徑

2.超鏈接偽類

1、a:link單擊訪問前的超鏈接樣式

2、a:visited單擊訪問后的超鏈接樣式

3、a:hover鼠標(biāo)懸浮的超鏈接樣式

4、a:active鼠標(biāo)單擊未釋放的超鏈接樣式

列表樣式

1、list-style-type表示設(shè)置列表的標(biāo)記類型

常用類型：none表示沒有標(biāo)記

disc表示實心圓點

square表示實心正方形

circle表示空心圓點

decimal表示數(shù)字

2、list-style-image使用圖像代替標(biāo)記

3、list-style-position表示在哪個位置使用標(biāo)記

4、list-style設(shè)置列表屬性，通常使用這個屬性

3.背景樣式

1、背景顏色background-color

①使用英文單詞去表示顏色

②使用十六進(jìn)制的方式表示，并且如果相鄰的兩兩數(shù)字相同，可以縮寫為一位

③使用三原色的方式去表示，語法：rgb(r,g,b)，rgba(r,g,b,a)

r,g,b取值從0~255

a表示透明度，取值從0~1,0表示完全透明，1表示完全不透明

有一個特殊值，transparent表示透明的意思，它是默認(rèn)值

2、背景圖片background-image

url表示的圖片路徑

3、背景重復(fù)方式background-repeat

repeat表示沿水平方向和垂直方向進(jìn)行重復(fù)

no-repeat表示不重復(fù)

repeat-x表示沿水平方向重復(fù)

repeat-y表示沿垂直方向重復(fù)

4、背景位移background-position：X軸方向偏移量 Y軸方向偏移量

①可以使用像素值來表示偏移量，比如：50px 50px;

②可以使用百分比來表示偏移量，比如：20% 50%;

③可以使用英文字母來表示偏移量，比如：center middle;

5、背景屬性設(shè)置所有的背景樣式

6、背景尺寸background-size

①auto表示背景圖片保持原樣，默認(rèn)值

②percentage表示背景圖片大小根據(jù)容器大小的百分比決定大小，只寫一個值表示只

對一個值進(jìn)行設(shè)置，另外一個值會根據(jù)圖片本身的比例等比例縮放

本身比例為4:3

400px 300px

800px 600px

1200px 900px

③直接使用像素值px來設(shè)置圖片大小，只設(shè)置一個值和百分比一樣

④cover放大充滿整個容器

⑤contain放大充滿整個容器，如果有一個方向充滿了整個容器，那么不在放大

4.漸變

1、線性漸變

：顏色沿著一條直線過渡

linear-gradient(漸變方向,顏色1，顏色2，顏色n)

不加前綴方向使用“to 方向”表示往哪個方向進(jìn)行漸變，加上前綴之后使用“方向”

表示從哪個方向開始漸變

2、徑向漸變：從一個起點朝所有方向混合

-radial-gradient(漸變方向,顏色1，顏色2，顏色n)

5.瀏覽器前綴：(避免兼容問題)

IE瀏覽器前綴-ms-

Chrome瀏覽器前綴-webkit-

Safiri瀏覽器前綴-webkit-

Opera瀏覽器前綴-o-

Firefox瀏覽器前綴-moz-

七、盒子模型

1.盒子模型：就是一個虛擬的矩形容器

2.盒子模型的組成：

1、content（內(nèi)容）：表示主要內(nèi)容

2、padding（內(nèi)邊距）：表示內(nèi)容與邊框之間的距離

3、border（邊框）：表示包著內(nèi)容的外框，邊框是有一定寬度的

4、margin（外邊距）：表示邊框外部與其他盒子的距離

3.邊框border

1、border-color邊框顏色

①使用英文字母來表示顏色

②使用十六進(jìn)制來表示顏色

③使用三原色來表示顏色，rgb(),rgba()

所有的塊元素都是一個盒子模型

border-top-color上邊框，border-bottom-color下邊框

border-left-color左邊框，border-right-color右邊框

※※※※※※※

可以使用border-color去設(shè)置，可以取1~4個值任意一個

如果設(shè)置一個值表示對應(yīng)所有的方向

如果設(shè)置兩個值，第一個值表示上邊框和它對應(yīng)邊框的值，第二個值表示右邊框和它

對應(yīng)的值

如果設(shè)置三個值，第一個值表示上邊框，第二個值表示右邊框和它對應(yīng)的值，第三個

表示下邊框的值

如果設(shè)置四個值，第一個值表示上邊框，第二個值表示右邊框，第三個值表示下邊框，

第四個值表示左邊框，按照順時針的順序依次設(shè)置

2、border-width邊框的粗細(xì)

使用像素值去設(shè)置邊框的粗細(xì)，網(wǎng)頁一般使用這種方式

設(shè)置邊框顏色的方式一樣

3、border-style邊框的樣式

none表示沒有邊框

solid表示實線邊框

dashed表示虛線邊框

dotted表示點線邊框

設(shè)置邊框樣式的方式和置邊框顏色的方式一樣

border邊框?qū)傩?/p>

可以設(shè)置邊框的所有屬性，不需要按照順序

border-left設(shè)置左邊框的屬性

border-right設(shè)置右邊框的屬性

border-bottom設(shè)置下邊框的屬性

border-top設(shè)置上邊框的屬性

外邊距margin

margin-top設(shè)置上外邊距的距離

margin-right設(shè)置右外邊距的距離

margin-bottom設(shè)置下外邊距的距離

margin-left設(shè)置左外邊距的距離

可以使用margin去設(shè)置，可以取1~4個值任意一個

和設(shè)置邊框顏色的方式一樣

使用margin設(shè)置盒子居中，語法：margin：0px auto;需要滿足兩個條件

①必須為塊元素

②必須設(shè)置盒子的寬度和高度

內(nèi)邊距padding

padding-top設(shè)置上內(nèi)邊距的距離

padding-right設(shè)置右內(nèi)邊距的距離

padding-bottom設(shè)置下內(nèi)邊距的距離

padding-left設(shè)置左內(nèi)邊距的距離

可以使用padding去設(shè)置，可以取1~4個值任意一個

和設(shè)置邊框顏色的方式一樣

4.盒子模型的尺寸

盒子模型的尺存分為盒子模型的寬度和高度

盒子模型的外盒寬度=內(nèi)容寬度+內(nèi)邊距的左右寬度+邊框左右寬度+外邊距左右寬度

盒子模型的外盒高度=內(nèi)容高度+內(nèi)邊距的上下高度+邊框上下高度+外邊距上下高度

盒子模型的內(nèi)盒寬度=內(nèi)容寬度+內(nèi)邊距的左右寬度+邊框左右度

盒子模型的內(nèi)盒高度=內(nèi)容高度+內(nèi)邊距的上下高度+邊框上下度

5.拯救布局

使用box-sizing拯救布局，有3個值

1、content-box：默認(rèn)值，表示設(shè)置的寬度和高度等于內(nèi)容的寬度和高度，盒子的寬度和

高度通過計算獲得

2、border-box：表示設(shè)置的寬度和高度等于盒子的寬度和高度

3、inherit：繼承父元素的盒子模型模式

6.圓角邊框border-radius：為矩形邊框設(shè)置圓角效果

語法：border-radius:可以設(shè)置1~4個值;

設(shè)置一個值會對四個角進(jìn)行設(shè)置

設(shè)置兩個值，第一個值設(shè)置左上角和它對角的值，第二值是設(shè)置右上角和它對角的值

設(shè)置三個值，第一個設(shè)置左上角，第二個設(shè)置右上角和它對角的值，第三個設(shè)置右下角的值

設(shè)置四個值，第一個設(shè)置左上角，第二個設(shè)置右上角，第三個設(shè)置右下角，第四個設(shè)置左下角

設(shè)置圓形

①必須盒子的寬度和高度相同

②圓角邊框的值必須將四個角的值都設(shè)置為寬度的一半或者50%

設(shè)置上半圓：寬度不變，高度變?yōu)橐话耄谝粋€值、第二值為一半，第三和第四個為0

設(shè)置下半圓：寬度不變，高度變?yōu)橐话耄谝粋€值、第二值為0，第三和第四個為一半

設(shè)置左半圓：寬度為一半，高度變不變，第一個值、第四值為一半，第二和第三個為0

設(shè)置左半圓：寬度為一半，高度變不變，第一個值、第四值為0，第二和第三個為一半

扇形：高度和寬度都為一半，需要哪一個方向的就添加哪個角的值，其他都為0

7.盒子陰影box-shadow

語法：box-shadow:inset x-offset y-offset blur-radius color;

第一個參數(shù)表示陰影的類型，不寫為外陰影，inset表示為內(nèi)陰影

第二個參數(shù)表示陰影的水平偏移量，正數(shù)往右，負(fù)數(shù)往左

第三個參數(shù)表示陰影的垂直偏移量，正數(shù)往下，負(fù)數(shù)往上

第四個參數(shù)為模糊半徑，模糊范圍大小，越往外越模糊

第五個參數(shù)為陰影顏色

八、塊元素與行內(nèi)（內(nèi)聯(lián)）元素

1.塊元素與行內(nèi)（內(nèi)聯(lián)）元素的特性

1、塊元素：獨占一行，并且可以設(shè)置元素的寬高(div,h1-h6,p,列表)

2、行內(nèi)元素：不是獨占一行，設(shè)置寬高對它不起作用，寬度由元素內(nèi)容撐開。

2.display:顯示（元素以哪種形式進(jìn)行顯示）

1、block：塊級元素的默認(rèn)值，在元素前后會有換行

2、inline:行內(nèi)元素的默認(rèn)值，元素前后沒有換行

3、inline-block:行內(nèi)塊元素，元素既有行內(nèi)元素的特性(可以和其他元素顯示在同一行)又有塊級元素的特性（可以設(shè)置寬高）。

4、none:該元素不被顯示。

3.float:浮動:使得塊級元素排列在同一行

1、left:左浮動

2、right：右浮動

3、none:元素不浮動，按照標(biāo)準(zhǔn)文檔流顯示

4.clear：清除浮動

1、left：清除元素左邊的浮動

2、right:清除元素右邊的浮動

3、both：清除兩側(cè)

4、none:默認(rèn)值，不清除浮動

5.解決父級邊框塌陷的方法

1、在浮動元素的后面加空div，并且給這個空div設(shè)置樣式：clear：both

2、給父級設(shè)置高度height

3、給父級添加屬性overflow:auto;

4、給父級添加偽類after

#father:after{

content:’’;

display:block;

clear:both

}

6.overflow:屬性用來處理溢出

1、visible:可見的，內(nèi)容元素會被顯示出來，但是在父級邊框的外面

2、hidden:內(nèi)容元素會被顯示在邊框里，但是超出的部分會被隱藏

3、scroll:內(nèi)容元素會被隱藏，但是瀏覽器會提供滾動條，滾動以顯示超出的內(nèi)容

4、auto:當(dāng)內(nèi)容元素超出父級的高度時就提供滾動條以顯示超出的內(nèi)容，若內(nèi)容未超出就不顯示滾動條。

九、定位與動畫

1.定位屬性:position

1、static:默認(rèn)值，沒有定位

2、relative：相對定位，相對于元素原本的位置進(jìn)行偏移，元素原來的位置會被保留，浮動元素設(shè)置相對定位后，是相對元素浮動以后的位置進(jìn)行偏移。

3、absolute:絕對定位，相對于離元素最近的已經(jīng)設(shè)置定位屬性的祖先元素為基準(zhǔn)進(jìn)行偏移，元素原來的位置不會被保留，如果沒有已經(jīng)定位的祖先元素，則以瀏覽器窗口為基準(zhǔn)進(jìn)行偏移。

4、fixed：固定定位，以瀏覽器窗口為基準(zhǔn)進(jìn)行偏移。

5、定位的元素的層級會比未定位的元素的級別更高，相對定位通常用于給父元素設(shè)置定位屬性，但是不設(shè)置不偏移量，結(jié)合絕對定位使用，固定定位用于廣告欄，返回頂部的圖標(biāo)，樓層導(dǎo)航等。

6、z-index：改變定位元素的堆疊順序，值為整數(shù)，值越大，級別越高，顯示在最上面。

2.動畫

1、變形

語法:transform:變形函數(shù);

2、平移函數(shù)：translate(x,y);x代表水平方向的位移，y代表垂直方向的位移，單位為px；

3、縮放函數(shù)：scale(x,y);x代表元素寬度的縮放量，y代表高度的縮放量。

4、傾斜函數(shù)：skew(x,y);x代表元素水平方向的傾斜度數(shù)，y代表垂直方向的傾斜度數(shù)，單位是deg。

5、旋轉(zhuǎn)函數(shù)：rotate(x);x代表旋轉(zhuǎn)的度數(shù)，為正數(shù)時順時針旋轉(zhuǎn)，為負(fù)數(shù)時逆時針旋轉(zhuǎn)。

2、過渡transition：是一種動畫轉(zhuǎn)換過程，漸慢，漸快等。

語法：transition:過渡樣式的屬性過渡花費的時間過渡函數(shù)(過渡的速度) 過渡的延遲時間；

1)使用步驟

A、在元素默認(rèn)樣式中聲明元素默認(rèn)的樣式

B、聲明元素最終呈現(xiàn)的樣式，如懸浮(hover)，獲取焦點(focus)時的樣式

C、在元素默認(rèn)的樣式中添加過渡屬性。

3、過渡函數(shù)：

1、ease：默認(rèn)值，由快到慢

2、linear:勻速

3、ease-in:越來越快

4、ease-out:越來越慢

5、ease-in-out:先越來越快再越來越慢

3.動畫animation

1、創(chuàng)建關(guān)鍵幀(瀏覽器兼容前綴是加在@與keyframes中間的)

語法：@keyframes 動畫名稱{

0%{元素樣式}

25%{元素樣式}

…

}

4.調(diào)用動畫

在元素樣式中調(diào)用

語法：animation:動畫名稱動畫次數(shù) 動畫播放的方向動畫播放狀態(tài)

1)、動畫播放次數(shù)：為整數(shù)，默認(rèn)值為1，無限循環(huán)infinite

2)動畫發(fā)生的操作：forwards(向前) backwards（向后） both（既可以向前又可以向后）

3)動畫播放狀態(tài)：running(播放) paused(暫停)

4)動畫播放方向：normal（向前） alternate(偶數(shù)次向前)

在線咨詢

上一篇：Wordpress建站教程：給圖片添加CSS樣式
下一篇：Gulp：高效前端自動化構(gòu)建工具

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

29. 教你零基礎(chǔ)搭建小程序：小程序的常見組件—ra

您的項目需求