Web前端開(kāi)發(fā)第12章布局1本章主要內(nèi)容定位與布局的基本屬性多列布局盒布局自適應(yīng)布局案例：網(wǎng)頁(yè)布局21.定位與布局的基本屬性布局是指對(duì)網(wǎng)頁(yè)中各個(gè)構(gòu)成要素的合理編排，是呈現(xiàn)頁(yè)面內(nèi)容的基礎(chǔ)。合理的布局將有效的提高頁(yè)面的可讀性，提升用戶體驗(yàn)。通過(guò)定位與布局的基本屬性，可以確定元素的位置，并實(shí)現(xiàn)頁(yè)面多種多樣的布局。31.1基本屬性1.定位與布局的基本屬性41.1基本屬性1.定位與布局的基本屬性51.1基本屬性1.定位與布局的基本屬性外邊距屬性margin屬性可以設(shè)定元素的所有外邊距。該屬性可以通過(guò)1-4個(gè)正負(fù)值進(jìn)行設(shè)置，其值可以為長(zhǎng)度、百分比等單位，也可從父元素繼承外邊距?？梢酝ㄟ^(guò)margin-top、margin-right、margin-bottom、margin-left屬性分別設(shè)置。61.2外邊距與內(nèi)邊距1.定位與布局的基本屬性具體語(yǔ)法：71.2外邊距與內(nèi)邊距1.定位與布局的基本屬性行內(nèi)元素的外邊距當(dāng)行內(nèi)元素定義外邊距時(shí)，只能看到左右外邊距對(duì)布局的影響，但是上下外邊距猶如不存在一般，不會(huì)對(duì)周?chē)禺a(chǎn)生影響。塊級(jí)元素的外邊距對(duì)于塊級(jí)元素來(lái)說(shuō)，外邊距都能夠很好的被解析?？梢杂谩癲isplay”屬性改變?cè)氐谋憩F(xiàn)形式來(lái)保證元素對(duì)外邊距的支持。81.2外邊距與內(nèi)邊距1.定位與布局的基本屬性內(nèi)邊距屬性padding屬性可以設(shè)定元素的所有內(nèi)邊距。該屬性可以通過(guò)1-4個(gè)正負(fù)值進(jìn)行設(shè)置，其值可以為像素、百分比等單位，也可從父元素繼承外邊距?？梢酝ㄟ^(guò)padding-top、padding-right、padding-bottom、padding-left屬性分別設(shè)置。91.2外邊距與內(nèi)邊距1.定位與布局的基本屬性具體語(yǔ)法：101.2外邊距與內(nèi)邊距1.定位與布局的基本屬性float網(wǎng)頁(yè)的布局主要通過(guò)float屬性來(lái)實(shí)現(xiàn)，float屬性定義元素在哪個(gè)方向浮動(dòng)。屬性值有以下四種情況：left定義向左浮動(dòng)。right定義向右浮動(dòng)。none為float屬性的默認(rèn)值，表示元素不浮動(dòng)，并會(huì)顯示其在頁(yè)面中出現(xiàn)的位置。inherit規(guī)定應(yīng)該從父元素繼承float屬性的值。111.3浮動(dòng)布局1.定位與布局的基本屬性浮動(dòng)元素特性當(dāng)一個(gè)元素被設(shè)置為浮動(dòng)元素后，元素本身的屬性會(huì)發(fā)生一些改變，具體如下:空間的改變。位置的改變。布局環(huán)繞。當(dāng)元素被定義為浮動(dòng)顯示時(shí)，它會(huì)自動(dòng)成為一個(gè)塊狀元素，相當(dāng)于定義了“display:block;”。但是塊級(jí)元素會(huì)自動(dòng)伸張寬度，占據(jù)一行位置，且塊級(jí)元素會(huì)附加換行符，所以在同一行內(nèi)只能顯示一個(gè)塊級(jí)元素。而浮動(dòng)元素雖然擁有塊級(jí)元素的特性，但是它并沒(méi)有上述表現(xiàn)，這時(shí)它更像行內(nèi)元素那樣收縮顯示。121.3浮動(dòng)布局13現(xiàn)場(chǎng)演示：案例12-01：浮動(dòng)元素的空間案例12-02：浮動(dòng)元素的位置案例12-03：浮動(dòng)元素的環(huán)繞案例12-04：圖文混排1.定位與布局的基本屬性clear屬性規(guī)定元素的哪一側(cè)不允許存在其他浮動(dòng)元素，屬性值有五種情況：left、right、bothleft、right、both分別規(guī)定在左側(cè)不允許浮動(dòng)元素、在右側(cè)不允許浮動(dòng)元素和在左右兩側(cè)均不允許浮動(dòng)元素。nonenone為clear元素的默認(rèn)值，允許浮動(dòng)元素出現(xiàn)在兩側(cè)。inheritinherit規(guī)定應(yīng)該從父元素繼承clear屬性的值。141.3浮動(dòng)布局1.定位與布局的基本屬性元素浮動(dòng)以后，其所在的位置會(huì)被下方不浮動(dòng)的元素填充掉，而有些時(shí)候這樣的填充會(huì)破壞頁(yè)面布局，clear元素可以解決這個(gè)問(wèn)題。在不浮動(dòng)元素中添加與浮動(dòng)元素float屬性值相同的clear屬性值，會(huì)使不浮動(dòng)元素顯示在浮動(dòng)元素的下邊距邊界之下。浮動(dòng)元素也可以添加clear屬性，添加的clear屬性的屬性值只有和float屬性的屬性值相同時(shí)才能起作用，即當(dāng)元素向左浮動(dòng)時(shí)只能清除元素的左浮動(dòng)，而不能將屬性值設(shè)為清除右浮動(dòng)。151.3浮動(dòng)布局16現(xiàn)場(chǎng)演示：案例12-05：清除浮動(dòng)1.定位與布局的基本屬性定位坐標(biāo)值為了靈活的定位頁(yè)面元素，CSS定義了4個(gè)坐標(biāo)屬性：top、right、bottom和left。通過(guò)這些屬性的聯(lián)合使用，可包含塊的4個(gè)內(nèi)頂角來(lái)定位元素在頁(yè)面中的位置。top屬性表示定位元素頂邊外壁到包含塊元素頂部?jī)?nèi)壁的距離。right屬性表示定位元素右邊外壁到包含塊元素右側(cè)內(nèi)壁的距離。left屬性表示定位元素左邊外壁到包含塊元素左側(cè)內(nèi)壁的距離。bottom屬性表示定位元素底邊外壁到包含塊元素底部?jī)?nèi)壁的距離。171.4定位布局1.定位與布局的基本屬性positionposition屬性用于確定元素的位置，該屬性可將圖片放置到任何位置，也可以使導(dǎo)航始終顯示于頁(yè)面最上方。CSS的定位核心正是基于這個(gè)屬性實(shí)現(xiàn)的。屬性值有五種情況。staticstatic為position的默認(rèn)屬性值，沒(méi)有定位，元素出現(xiàn)在正常流中（忽略top,bottom,left,right或者z-index聲明）。任何元素在默認(rèn)的狀態(tài)下都會(huì)以靜態(tài)定位來(lái)確定自己的位置，所以當(dāng)沒(méi)有定義position時(shí)，并不說(shuō)明該元素沒(méi)有自己的位置，它會(huì)遵循默認(rèn)值顯示為靜態(tài)位置。在靜態(tài)位置下，開(kāi)發(fā)人員無(wú)法通過(guò)坐標(biāo)值（top、bottom、left和right）來(lái)改變它的位置。181.4定位布局1.定位與布局的基本屬性positionabsoluteabsolute可用于生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過(guò)left、top、right、bottom屬性進(jìn)行設(shè)置。當(dāng)position屬性取值為absolute時(shí)，程序就會(huì)把元素從文檔流中拖出來(lái)，根據(jù)某個(gè)參照物坐標(biāo)來(lái)確定顯示位置。絕對(duì)定位是網(wǎng)頁(yè)精準(zhǔn)定位的基本方法。如果結(jié)合left、right、top、bottom坐標(biāo)屬性進(jìn)行精確定位，結(jié)合z-index屬性排列元素覆蓋順序，同時(shí)通過(guò)clip和visiblity屬性裁切、顯示或隱藏元素對(duì)象或部分區(qū)域，就可以設(shè)計(jì)出豐富多樣的網(wǎng)頁(yè)布局效果。191.4定位布局20現(xiàn)場(chǎng)演示：案例12-06：絕對(duì)定位1.定位與布局的基本屬性positionfixedfixed可用于生成固定定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò)top、right、bottom、left屬性進(jìn)行定義。固定定位是絕對(duì)定位的一種特殊形式，它是以瀏覽器作為參照物來(lái)定義網(wǎng)頁(yè)元素的。如果定義某個(gè)元素固定顯示而不受文檔流的影響，也不受包含塊的位置影響，它始終以瀏覽器窗口來(lái)定位自己的顯示位置。不管瀏覽器的滾動(dòng)條如何滾動(dòng)，也不管瀏覽器窗口大小如何變化，該元素都會(huì)顯示在瀏覽器窗口內(nèi)。211.4定位布局22現(xiàn)場(chǎng)演示：案例12-07：fixed屬性值1.定位與布局的基本屬性positionrelativerelative可用于生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。例如，"left:20px"會(huì)向元素的左側(cè)位置添加20像素。相對(duì)定位是一種折中的定位方法，是在靜態(tài)定位和絕對(duì)定位之間取的一個(gè)平衡點(diǎn)。所謂相對(duì)定位就是使被應(yīng)用元素不脫離文檔流，卻能通過(guò)坐標(biāo)值以原始位置為參照物進(jìn)行偏移。inheritinherit用于從父元素繼承position屬性的值。231.4定位布局24現(xiàn)場(chǎng)演示：案例12-08：相對(duì)定位1.定位與布局的基本屬性定位層疊CSS可通過(guò)z-index屬性來(lái)排列不同定位元素之間的層疊順序。該屬性可以設(shè)置為任意的整數(shù)值，數(shù)值越大，所排列的順序就越靠上（前）。251.4定位布局26現(xiàn)場(chǎng)演示：案例12-09：定位層疊1.定位與布局的基本屬性定位與參照定位是網(wǎng)頁(yè)布局的重中之重，為頁(yè)面中每個(gè)構(gòu)成要素找到它應(yīng)該待的位置是頁(yè)面布局的基礎(chǔ)。position屬性專門(mén)用于頁(yè)面布局，但因其復(fù)雜度較高很難被初學(xué)者掌握，下面會(huì)通過(guò)一個(gè)案例來(lái)講解position屬性中的定位與參照。在絕對(duì)定位的父級(jí)沒(méi)有設(shè)定position屬性時(shí)，將以瀏覽器左上角為參照點(diǎn)進(jìn)行定位；當(dāng)父級(jí)設(shè)定position屬性值時(shí)，將以父級(jí)為參照點(diǎn)進(jìn)行定位。271.4定位布局28現(xiàn)場(chǎng)演示：案例12-10：定位與參照2.多列布局使用float屬性或position屬性進(jìn)行頁(yè)面布局時(shí)有一個(gè)比較明顯的缺點(diǎn)，就是多列的div元素間是各自獨(dú)立的。如果在第一列div元素中加入一些內(nèi)容，將會(huì)使得兩列元素底部不能對(duì)齊，多出一塊空白的區(qū)域。這種情況在多列文章排版時(shí)顯得極為明顯。292.1基本知識(shí)2.多列布局基本屬性：302.2基本屬性2.多列布局columns是多列布局的基本屬性。該屬性可以同時(shí)定義列數(shù)和每列的寬度。相當(dāng)于同時(shí)指定了column-width、column-count屬性。目前，Webkit引擎支持-webkit-columns私有屬性，MozillaGecko引擎支持-moz-columns私有屬性。具體語(yǔ)法：312.3多列布局屬性2.多列布局column-width屬性可以定義單列顯示的寬度。該屬性可以與其他多列布局屬性配合使用，也可以單獨(dú)使用。具體語(yǔ)法：column-width可以與column-count屬性配合使用，設(shè)定固定列數(shù)、列寬的布局效果，也可以單獨(dú)使用，限制模塊的單列寬度，當(dāng)超出寬度時(shí)，則會(huì)自動(dòng)以多列進(jìn)行顯示。322.4列寬與列數(shù)2.多列布局具體語(yǔ)法：column-count屬性可以定義顯示的列數(shù)，取值為大于0的整數(shù)。如果column-width和column-count屬性沒(méi)有明確的值，則默認(rèn)為最大列數(shù)。column-width、column-count這兩個(gè)屬性可以相互影響，指定的欄目寬度、欄目數(shù)并不是絕對(duì)的。當(dāng)分欄內(nèi)容所在容器的寬度大于column-width*column-count+間距時(shí)，有的瀏覽器會(huì)增加欄目數(shù)，有的瀏覽器會(huì)增加欄目寬度。332.4列寬與列數(shù)2.多列布局具體語(yǔ)法：column-gap屬性可以定義兩列之間的間距，其默認(rèn)值為normal，用于規(guī)定列間間隔為一個(gè)常規(guī)的間隔。W3C建議的值是1em。column-rule屬性用于指定欄目之間的分割條。該屬性可同時(shí)指定分割條的寬度、樣式、顏色。column-rule-width屬性的值為一個(gè)長(zhǎng)度值，用于指定欄目之間分割條的寬度。column-rule-style屬性用于設(shè)置分割條的線型。該屬性支持的屬性值有none、dotted、dashed、solid、double、groove、ridge、inset、outset，這些屬性值與前面介紹的邊框線型的各屬性值的意義完全相同。column-rule-color屬性用于設(shè)置分隔條的顏色。342.5列邊距與列邊框2.多列布局具體語(yǔ)法：在報(bào)刊雜志中，經(jīng)常會(huì)看到文章標(biāo)題跨列居中顯示。column-span屬性可以定義跨列顯示，也可以設(shè)置單列顯示，其屬性值默認(rèn)為1，適用于靜態(tài)的、非浮動(dòng)元素，代表只能在本欄中顯示。all屬性值則表示橫跨所有的列，并定位在列的Z軸上。352.6跨列布局2.多列布局具體語(yǔ)法：column-fill屬性可以定義欄目的高度是否統(tǒng)一。其屬性值有兩種情況：auto屬性值可以設(shè)置各列高度隨其內(nèi)容的變化而變化。balance屬性值是column-fill默認(rèn)值，設(shè)置各列的高度根據(jù)內(nèi)容最多的那一列的高度進(jìn)行統(tǒng)一。362.7列高37現(xiàn)場(chǎng)演示：案例12-11：多列布局3.盒布局CSS3引入了新的盒模型：彈性盒模型。該模型決定一個(gè)盒子在其他盒子中的分布方式以及如何處理可用空間。使用該模型可以很輕松地創(chuàng)建自適應(yīng)瀏覽器窗口的流動(dòng)布局，或自適應(yīng)字體大小的彈性布局。傳統(tǒng)的是基于HTML流在垂直方向上排列盒子，使用彈性盒布局可以規(guī)定特定的順序，也可以將其反轉(zhuǎn)。要開(kāi)啟彈性盒布局，只需設(shè)置盒子的display屬性值為box（或inline-box）即可。在CSS3中，除了多列布局之外，還可以用盒布局解決float屬性或position屬性布局存在的問(wèn)題。383.1基本知識(shí)3.盒布局基本屬性：393.2基本屬性3.盒布局box-flex屬性可將盒布局設(shè)置為彈性盒布局。Webkit引擎支持-webkit-box-flex私有屬性，MozillaGecko引擎支持-moz-box-flex私有屬性。默認(rèn)情況下，盒子不具備彈性，如果box-flex的屬性值至少為1時(shí)，則變得富有彈性。如果盒子不具有彈性，它將盡可能的寬以使內(nèi)容可見(jiàn)且沒(méi)有任何溢出，其大小由width和height屬性值，或者min-height、min-width、max-height、max-width屬性值來(lái)決定。403.3使用自適應(yīng)寬度的彈性盒布局3.盒布局

413.3使用自適應(yīng)寬度的彈性盒布局3.盒布局

423.3使用自適應(yīng)寬度的彈性盒布局43現(xiàn)場(chǎng)演示：案例12-12：自適應(yīng)寬度的彈性盒布局3.盒布局使用彈性盒布局時(shí)，可以使用box-ordinal-group屬性來(lái)改變各元素的顯示順序。可在每個(gè)元素中加入box-ordinal-group屬性，該屬性使用一個(gè)表示序號(hào)的整數(shù)屬性值，瀏覽器在顯示的時(shí)候根據(jù)該序號(hào)從小到大顯示這些元素。目前Webkit引擎支持-webkit-box-ordinal-group私有屬性，MozillaGecko引擎支持-moz-box-ordinal-group私有屬性。443.4改變?cè)氐娘@示順序45現(xiàn)場(chǎng)演示：案例12-13：改變?cè)氐娘@示順序3.盒布局box-direction可以簡(jiǎn)單地將多個(gè)元素的排列方向從水平方向修改為垂直方向，或者從垂直方向修改為水平方向。目前Webkit引擎支持-webkit-box-direction私有屬性，MozillaGecko引擎支持-moz-box-direction私有屬性。其屬性值有三種情況：normal：以默認(rèn)方向顯示子元素。reverse：以反方向顯示子元素。inherit：設(shè)定從父元素繼承box-direction屬性的值。463.5改變?cè)嘏帕蟹较?7現(xiàn)場(chǎng)演示：案例12-14：改變?cè)嘏帕蟹较驈陌咐锌梢钥吹胶凶硬](méi)有自適應(yīng)于整個(gè)有邊框的div，box-flex屬性可以設(shè)置彈性的盒布局，使其充滿整個(gè)div。48現(xiàn)場(chǎng)演示：案例12-15：使用彈性盒布局消除空白3.盒布局如果box-flex屬性只對(duì)一個(gè)元素使用，可以使其寬度、高度自動(dòng)擴(kuò)大，讓瀏覽器或容器中所有元素的總寬度/總高度等于瀏覽器或容器的寬度/高度。在CSS3中也可以對(duì)多個(gè)元素使用box-flex屬性。案例12-16中box-flex的屬性值設(shè)為1，如果把box-flex的屬性值設(shè)為其他的整數(shù)，例如2，頁(yè)面結(jié)構(gòu)將發(fā)生變化。案例12-16中多個(gè)元素設(shè)置box-flex的屬性值均為1，元素將等分空白區(qū)域。使用瀏覽器的開(kāi)發(fā)者模式對(duì)案例12-16進(jìn)行調(diào)試，將box-flex的屬性值進(jìn)行調(diào)整，元素將按比例填充空白區(qū)域。493.7對(duì)多個(gè)元素使用box-flex屬性50現(xiàn)場(chǎng)演示：案例12-16：多個(gè)元素使用box-flex值討論：使用瀏覽器調(diào)試工具進(jìn)行參數(shù)調(diào)試，以觀察響應(yīng)的變化。3.盒布局使用盒布局時(shí)，可以使用box-pack屬性及box-align屬性來(lái)指定元素中文字、圖像及子元素水平方向或垂直方向的對(duì)齊方式。目前Webkit引擎支持-webkit-box-pack和-webkit-box-align私有屬性，MozillaGecko引擎支持-moz-pack和-webkit-box-align私有屬性。513.8對(duì)齊方式3.盒布局box-pack屬性可以用于設(shè)置子容器在水平軸上的空間分配方式，它共有四種可能值：start、end、justify、center。具體含義：start：所有子容器都分布在父容器的左側(cè)，右側(cè)留空。end：所有子容器都分布在父容器的右側(cè)，左側(cè)留空。justify：所有子容器平均分布（默認(rèn)值）。center：平均分配父容器剩余的空間（能壓縮子容器的大小，并且有全局居中的效果）。523.8對(duì)齊方式3.盒布局box-align屬性用于管理子容器在豎軸上的空間分配方式，共有五個(gè)屬性值：start、end、center、baseline、stretch。具體含義：start：子容器從父容器頂部開(kāi)始排列。end：子容器從父容器底部開(kāi)始排列。center：子容器橫向居中。baseline：所有子容器沿同一基線排列。stretch：所有子容器和父容器保持同一高度（默認(rèn)值）。533.8對(duì)齊方式54現(xiàn)場(chǎng)演示：案例12-17：定位布局使圖片居中案例12-18：盒布局使圖片居中3.盒布局通過(guò)使用傳統(tǒng)的浮動(dòng)布局、CSS3新增的多列布局和CSS3新增的盒布局來(lái)實(shí)現(xiàn)簡(jiǎn)單的三列布局，進(jìn)行布局方式對(duì)比說(shuō)明。553.9布局方式對(duì)比56現(xiàn)場(chǎng)演示：案例12-19：浮動(dòng)布局案例12-20：盒布局案例12-21：多列布局3.盒布局使用float屬性或position屬性進(jìn)行頁(yè)面布局時(shí)各列的div元素間是獨(dú)立的，不能統(tǒng)一的定義div的各種屬性。盒布局與多列布局的區(qū)別在于使用多列布局時(shí)，各列寬度必須是相等的，在指定每列寬度時(shí)，也只能為所有列指定一個(gè)統(tǒng)一的寬度。使用多列布局時(shí)，也不可能具體指定什么列顯示什么內(nèi)容，因此比較適用于顯示文章內(nèi)容，不適合用于安排整個(gè)網(wǎng)頁(yè)中各個(gè)元素組成的網(wǎng)頁(yè)結(jié)構(gòu)。573.9布局方式對(duì)比4.自適應(yīng)布局2010年，EthanMarcotte提出了“自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”（ResponsiveWebDesign）這個(gè)名詞，指可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)。自適應(yīng)布局的特點(diǎn)是分別為不同的屏幕分辨率定義布局，即創(chuàng)建多個(gè)靜態(tài)布局，每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態(tài)局部（頁(yè)面元素位置發(fā)生改變），但在每個(gè)靜態(tài)布局中，頁(yè)面元素不隨窗口大小的調(diào)整發(fā)生變化。584.1基本知識(shí)4.自適應(yīng)布局基本屬性：594.2基本屬性4.自適應(yīng)布局首先，在網(wǎng)頁(yè)代碼的頭部，加入一行viewport元標(biāo)簽。<metaname="viewport"content="width=device-width,initial-scale=1">viewport是網(wǎng)頁(yè)默認(rèn)的寬度和高度，上面這行代碼的意思是：網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁(yè)初始大小占屏幕面積的100%。所有主流瀏覽器都支持這個(gè)設(shè)置，包括IE9。對(duì)于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。604.3允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整4.自適應(yīng)布局由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對(duì)寬度的布局，也不能使用具有絕對(duì)寬度的元素。CSS代碼不能指定像素寬度，只能指定百分比寬度。614.4不使用絕對(duì)寬度4.自適應(yīng)布局字體也不能使用絕對(duì)大?。╬x），而只能使用相對(duì)大?。╡m），字體大小是頁(yè)面默認(rèn)大小的100%，即16像素，h1的大小是默認(rèn)大小的1.5倍，即24像素（24/16=1.5），small元素的大小是默認(rèn)大小的0.875倍，即14像素（14/16=0.875）。624.5相對(duì)大小的字體4.自適應(yīng)布局“流動(dòng)布局”的含義是，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。634.6流動(dòng)布局4.自適應(yīng)布局“自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”的核心，就是CSS3引入的MediaQuery模塊，其自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件。如果屏幕寬度小于400像素（max-device-width:400px），就加載tinyScreen.css文件，代碼如下：如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件，代碼如下：除了用html標(biāo)簽加載CSS文件，還可以在現(xiàn)有CSS文件中加載：644.7選擇加載CSS4.自適應(yīng)布局同一個(gè)CSS文件中，也可以根據(jù)不同的屏幕分辨率，選擇應(yīng)用不同的CSS規(guī)則。如果屏幕寬度小于400像素，則column塊取消浮動(dòng)（float:none）、寬度自動(dòng)調(diào)節(jié)（width:auto）、sidebar塊不顯示（display:none）。654.8CSS的@media規(guī)則4.自適應(yīng)布局除了布局和文本，“自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”還必須實(shí)現(xiàn)圖片的自動(dòng)縮放，這只要一行CSS代碼：由于老版本的IE不支持max-width，所以需要寫(xiě)成：此外windows平臺(tái)縮放圖片時(shí)，可能會(huì)出現(xiàn)失真現(xiàn)象，這是可以使用IE的專用命令，或者EthanMarcotte的imgSizer.js：664.9圖片的自適應(yīng)67現(xiàn)場(chǎng)演示：案例12-22：自適應(yīng)布局5.案例：網(wǎng)頁(yè)布局Web前端開(kāi)發(fā)并不僅僅是代碼層面的編寫(xiě)，還需要對(duì)頁(yè)面內(nèi)容進(jìn)行合理的編排，用更好的方式呈現(xiàn)頁(yè)面內(nèi)容。綜合使用五種布局方式，對(duì)一個(gè)完整的網(wǎng)頁(yè)進(jìn)行布局，了解網(wǎng)頁(yè)的結(jié)構(gòu)與信息展示方式。6869現(xiàn)場(chǎng)演示：案例12-23：網(wǎng)頁(yè)布局70Thanks.Web前端開(kāi)發(fā)第13章：動(dòng)畫(huà)71本章主要內(nèi)容Web動(dòng)畫(huà)使用變形屬性使用過(guò)渡屬性使用動(dòng)畫(huà)屬性案例：引人入勝的動(dòng)態(tài)照片墻721.Web動(dòng)畫(huà)GIF（GraphicsInterchangeFormat，圖形互換格式）是為跨平臺(tái)而開(kāi)發(fā)的動(dòng)畫(huà)格式，從1989年GIF89a格式問(wèn)世之后就變得十分流行，Web前端開(kāi)發(fā)者可通過(guò)GIF實(shí)現(xiàn)簡(jiǎn)單的網(wǎng)頁(yè)動(dòng)畫(huà)。GIF支持透明背景圖像，適合在不同背景的網(wǎng)頁(yè)上展示。同時(shí)許多操作系統(tǒng)中都可以使用GIF，使其展示有著跨平臺(tái)的優(yōu)勢(shì)。另外，GIF圖片的“體型”很小，很適合在網(wǎng)上傳播。731.1GIF動(dòng)畫(huà)74現(xiàn)場(chǎng)演示：案例13-01：在頁(yè)面中使用GIF動(dòng)畫(huà)1.Web動(dòng)畫(huà)Flash是由MacroMedia公司（后被Adobe公司收購(gòu)）推出的交互式矢量圖和Web動(dòng)畫(huà)的標(biāo)準(zhǔn)，它以絢麗的視覺(jué)效果和豐富的交互體驗(yàn)而著稱。Flash是作為瀏覽器的一個(gè)擴(kuò)展出現(xiàn)，為當(dāng)時(shí)的瀏覽器提供了它們所不具備的功能，正是因?yàn)镕lash動(dòng)畫(huà)在網(wǎng)頁(yè)中的廣泛應(yīng)用才使得Web前端呈現(xiàn)一種多媒體效果。通過(guò)Flash技術(shù)，Web前端開(kāi)發(fā)者可以實(shí)現(xiàn)動(dòng)態(tài)的視覺(jué)效果和多元化的信息傳達(dá)。751.2Flash動(dòng)畫(huà)76現(xiàn)場(chǎng)演示：案例13-02：在頁(yè)面中使用Flash動(dòng)畫(huà)1.Web動(dòng)畫(huà)JavaScript動(dòng)畫(huà)是Web前端中另外一種重要的動(dòng)畫(huà)形式。其實(shí)現(xiàn)主要基于JavaScript對(duì)HTML的操作，通過(guò)JavaScript與CSS樣式的結(jié)合可以實(shí)現(xiàn)豐富多彩的動(dòng)畫(huà)效果。JavaScript動(dòng)畫(huà)在Web前端開(kāi)發(fā)中以其良好的兼容性、靈活的控制力占據(jù)著Web動(dòng)畫(huà)開(kāi)發(fā)的半壁江山。JavaScript動(dòng)畫(huà)的制作偏向編程，開(kāi)發(fā)使用難度較高，而且其開(kāi)發(fā)需要具有豐富的Web前端開(kāi)發(fā)經(jīng)驗(yàn)和編程經(jīng)驗(yàn)。771.3JS動(dòng)畫(huà)1.Web動(dòng)畫(huà)動(dòng)畫(huà)是CSS3的一種新特性，它可以在不借助JavaScript和Flash的情況下使大多數(shù)HTML元素動(dòng)起來(lái)。CSS動(dòng)畫(huà)的出現(xiàn)使的Web前端動(dòng)畫(huà)的開(kāi)發(fā)變得更為簡(jiǎn)單，Web前端開(kāi)發(fā)者只要精通HTML和CSS就可以做出漂亮的動(dòng)畫(huà)，甚至可以較為容易地實(shí)現(xiàn)對(duì)JavaScript來(lái)說(shuō)十分困難的2D、3D效果。781.4CSS3動(dòng)畫(huà)2.使用變形屬性CSS3變形就是頁(yè)面元素的一些展示效果的集合，比如平移、旋轉(zhuǎn)、縮放和傾斜效果，每個(gè)效果都可通過(guò)變形函數(shù)（TransformFunction）實(shí)現(xiàn)。變形函數(shù)主要包括有rotate（旋轉(zhuǎn)）、skew（扭曲）、scale（縮放）和translate（移動(dòng)）以及matrix（矩陣變形）形式，變形屬性語(yǔ)法格式如下所示。none：默認(rèn)值為，表示不進(jìn)行變形；transform-function：表示一個(gè)或者多個(gè)變形函數(shù)，以空格分開(kāi)就是同時(shí)對(duì)一個(gè)元素進(jìn)行多種變形的屬性操作。792.1進(jìn)行簡(jiǎn)單變形80現(xiàn)場(chǎng)演示：案例13-03：使用transform屬性進(jìn)行簡(jiǎn)單變形2.使用變形屬性transform-origin屬性該屬性用來(lái)指定元素的中心點(diǎn)位置，默認(rèn)情況下，變形的原點(diǎn)在元素的中心點(diǎn)，也就是元素X軸和Y軸的50%處，其語(yǔ)法如下所示。該屬性值可以是百分比、em、px等具體的值，也可以是top、bottom、right、left和center關(guān)鍵詞。2D變形中該屬性可以設(shè)置一個(gè)參數(shù)值，也可設(shè)置兩個(gè)屬性值。3D變形中該屬性還包括了Z軸的值，設(shè)置元素在三維空間中的像素原點(diǎn)。812.2變形子屬性82現(xiàn)場(chǎng)演示：案例13-04：改變?cè)豻ransform-origin屬性2.使用變形屬性transform-style屬性該屬性是3D變形中的一個(gè)重要屬性，指定其子元素在3D空間中如何呈現(xiàn)，其語(yǔ)法如下所示。該屬性主要包括以下兩個(gè)值：flat：默認(rèn)值，表示所有子元素在2D平面呈現(xiàn)。preserve-3d：所有子元素在3D空間中展示。832.2變形子屬性84現(xiàn)場(chǎng)演示：案例13-05：transform-style屬性效果2.使用變形屬性perspective屬性該屬性用于設(shè)置觀看者的位置，并將可視內(nèi)容映射到一個(gè)視錐上，繼而投到2D視平面上。如果不指定該屬性，則Z軸空間中的所有點(diǎn)將平鋪到同一個(gè)2D視平面中，并且變換結(jié)果中將不存在景深概念。該屬性語(yǔ)法如下所示。none：默認(rèn)值，表示以無(wú)限的視角來(lái)看3D物體，但看上去是平的。number：接受一個(gè)單位大于0的值，其單位不能為百分比值。852.2變形子屬性86現(xiàn)場(chǎng)演示：案例13-06：perspective屬性效果展示2.使用變形屬性perspective-origin屬性該屬性的使用需要配合perspective屬性，主要用來(lái)決定觀看者的視覺(jué)觀測(cè)點(diǎn)在Z平面的位置，它實(shí)際上設(shè)置了X軸和Y軸的位置，可設(shè)置不同的視覺(jué)觀測(cè)點(diǎn)，其語(yǔ)法如下所示。第一個(gè)值指定視覺(jué)觀測(cè)點(diǎn)在元素X軸上的位置，屬性值是長(zhǎng)度值、百分比或者以下三個(gè)關(guān)鍵詞之一。left：在包含框的X軸方向長(zhǎng)度的0%。center：中間點(diǎn)。right：長(zhǎng)度的100%。872.2變形子屬性2.使用變形屬性perspective-origin屬性第二個(gè)值指定視覺(jué)觀測(cè)點(diǎn)在元素Y軸上的位置，屬性值是長(zhǎng)度值、百分比或者以下三個(gè)關(guān)鍵詞之一。top：在包含框的Y軸方向長(zhǎng)度的0%。center：中間點(diǎn)。bottom：長(zhǎng)度的100%。882.2變形子屬性89現(xiàn)場(chǎng)演示：案例13-07：perspective-origin屬性效果2.使用變形屬性backface-visibility屬性該屬性決定元素旋轉(zhuǎn)后其背面是否可見(jiàn)，對(duì)于未旋轉(zhuǎn)的元素，該元素的正面面向觀看者。如果該元素沿Y軸旋轉(zhuǎn)約180度時(shí)會(huì)導(dǎo)致元素的背面面對(duì)觀看者，這時(shí)就需要定義元素的背面是否可見(jiàn)，其語(yǔ)法如下所示。該屬性有以下兩個(gè)屬性值。visible：默認(rèn)值，反面可見(jiàn)。hidden：反面不可見(jiàn)。902.2變形子屬性91現(xiàn)場(chǎng)演示：案例13-08：backface-visibility屬性效果2.使用變形屬性2D位移在元素變形中需要使用到多種變形函數(shù)以實(shí)現(xiàn)元素的位移、縮放、旋轉(zhuǎn)等操作。translate()函數(shù)為位移函數(shù)，可在不影響到X、Y軸上其他元素的情況下將元素從原來(lái)的位置移動(dòng)到另外一個(gè)位置，其語(yǔ)法如下所示。922.3變形子屬性2.使用變形屬性2D位移translate()函數(shù)可以取一個(gè)值，也可取兩個(gè)值，取值說(shuō)明如下：x：代表X軸（橫坐標(biāo)）移動(dòng)的向量長(zhǎng)度，當(dāng)其值為正值時(shí)，元素向X軸右方向移動(dòng)，反之其值為負(fù)值時(shí)，元素向X軸左方向移動(dòng)。y：代表Y軸（縱坐標(biāo)）移動(dòng)的向量長(zhǎng)度，當(dāng)其值為正值時(shí)，元素向Y軸下方向移動(dòng)，反之其值為負(fù)值時(shí)，元素向Y軸上方向移動(dòng)。如果要將元素僅僅沿著一個(gè)方向移動(dòng)，可使用translate(x,0)和translate(0,y)來(lái)實(shí)現(xiàn)。變形函數(shù)中提供了一些單個(gè)方向移動(dòng)的簡(jiǎn)單函數(shù)，方便開(kāi)發(fā)者使用。ranslateX(n)：在水平方向上移動(dòng)一個(gè)元素。translateY(n)：在豎直方向上移動(dòng)一個(gè)元素。932.3變形子屬性2.使用變形屬性2D縮放縮放函數(shù)scale()可以使元素根據(jù)其中心原點(diǎn)進(jìn)行縮放，默認(rèn)值為1，即不縮放。當(dāng)scale()的值為0.01到0.99之間，可以讓一個(gè)元素縮小；scale()的值為任何大于或等于1.01的值時(shí)，可以讓一個(gè)元素放大，其語(yǔ)法如下所示。scale()函數(shù)的語(yǔ)法和translate()函數(shù)非常相似，可以設(shè)置一個(gè)值，也可以設(shè)置兩個(gè)值，只有一個(gè)值時(shí)，第二個(gè)值默認(rèn)和第一個(gè)值相等。942.3變形子屬性2.使用變形屬性2D縮放scale()函數(shù)的取值具體說(shuō)明如下所示。x：指定橫向坐標(biāo)方向的縮放向量，如果值為0.01~0.99之間，會(huì)讓元素在X軸方向縮小，如果值大于或者等于1.01，元素在X軸方向放大。y：指定縱向坐標(biāo)方向的縮放向量，如果值為0.01~0.99之間，會(huì)讓元素在Y軸方向縮小，如果值大于或者等于1.01，元素在Y軸方向放大。如果要使元素僅僅沿著X軸或者Y軸方向縮放，而不是同時(shí)縮放的話，可以將函數(shù)設(shè)置為scale(x,1)或scale(1,y)。sacleX(n)：相當(dāng)于scale(x,1)。元素只在X軸縮放元素，默認(rèn)值為1。sacleY(n)：相當(dāng)于scale(1,y)。元素只在Y軸縮放元素，默認(rèn)值為1。952.3變形子屬性2.使用變形屬性2D旋轉(zhuǎn)旋轉(zhuǎn)方法roate()可以通過(guò)設(shè)定的角度參數(shù)對(duì)元素實(shí)現(xiàn)基于中心原點(diǎn)的2D旋轉(zhuǎn)。在二維空間內(nèi)進(jìn)行操作，設(shè)置角度值，用來(lái)指定元素旋轉(zhuǎn)的幅度。如果這個(gè)值為正值，元素相對(duì)中心原點(diǎn)順時(shí)針旋轉(zhuǎn)。如果這個(gè)值為負(fù)值，則元素相對(duì)中心原點(diǎn)逆時(shí)針旋轉(zhuǎn)。roate()的具體語(yǔ)法如下所示。962.3變形子屬性2.使用變形屬性2D傾斜傾斜函數(shù)skew()能夠讓元素傾斜顯示，可以將一個(gè)元素以其中心原點(diǎn)位置圍繞著X軸和Y軸按照一定的角度傾斜。與rotate()方法的旋轉(zhuǎn)不同是rotate()方法只是旋轉(zhuǎn)元素，不會(huì)改變?cè)氐男螤睿湔Z(yǔ)法如下所示。x-angle：指定元素水平方向（X軸方向）傾斜的角度。y-angle：指定元素豎直方向（Y軸方向）傾斜的角度。972.3變形子屬性2.使用變形屬性2D傾斜在X軸和Y軸傾斜之外還可使用skewX()和skewY()方法讓元素只在水平或者豎直方向傾斜。skewX(angle)：相當(dāng)于skew(x-angle,0)。按指定的角度沿X軸指定一個(gè)傾斜變形。skewX()使元素以其中心點(diǎn)為基點(diǎn)，并在水平方向（X軸）進(jìn)行傾斜變形。skewY(angle)：相當(dāng)于skew(0,y-angle)。按指定的角度沿Y軸指定一個(gè)傾斜變形。skewY()使元素以其中心點(diǎn)為基點(diǎn)，并在垂直方向（Y軸）進(jìn)行傾斜變形。982.3變形子屬性2.使用變形屬性2D矩陣CSS3中transform讓操作變形時(shí)變得很簡(jiǎn)單，如位移函數(shù)translate()、縮放函數(shù)scale()、旋轉(zhuǎn)函數(shù)roate()和傾斜函數(shù)skew()，這些函數(shù)很簡(jiǎn)單，也很方便使用，是CSS動(dòng)畫(huà)中常用的方法，但CSS3中同時(shí)提供了一個(gè)矩陣函數(shù)matrix()。在CSS中的所有變形方法都可通過(guò)matrix()方法來(lái)實(shí)現(xiàn)，matrix()函數(shù)是所有變形函數(shù)的基礎(chǔ)，使用它可以開(kāi)發(fā)出更多的變形樣式，而不僅僅局限于位移、縮放、旋轉(zhuǎn)、傾斜等，具體操作如下。992.3變形子屬性100現(xiàn)場(chǎng)演示：案例13-09：用2D變形方法制作立方體2.使用變形屬性3D位移CSS中的3D位移主要由四個(gè)函數(shù)實(shí)現(xiàn)：translate3d()、translateX()、translateY()和translateZ()。translate3d()函數(shù)可以使一個(gè)元素在三維空間上移動(dòng)，變形的原理是通過(guò)設(shè)置三維向量的坐標(biāo)，定義元素在每個(gè)方向上移動(dòng)了多少，從而實(shí)現(xiàn)元素在3D空間中的位移，具體語(yǔ)法如下所示。x：表示橫向坐標(biāo)位移向量的長(zhǎng)度。y：表示縱向坐標(biāo)位移向量的長(zhǎng)度。z：表示Z軸位移向量的長(zhǎng)度。1012.43D變形函數(shù)2.使用變形屬性3D位移translateX()、translateY()和translateZ()函數(shù)則是translate3d()函數(shù)的簡(jiǎn)化形式，分別負(fù)責(zé)元素在3D空間中沿X、Y、Z軸方向位移的功能，其具體語(yǔ)法如下所示。在translateZ(z)中，取值z(mì)指的是Z軸的向量位移長(zhǎng)度。使用translateZ()方法可以讓元素在Z軸進(jìn)行位移。當(dāng)其值為負(fù)值時(shí)，元素在Z軸上越移越遠(yuǎn)，導(dǎo)致元素在越來(lái)越小。當(dāng)其值為正值時(shí)，元素在Z軸上越移越近，導(dǎo)致元素在越來(lái)越大。1022.43D變形函數(shù)2.使用變形屬性3D縮放CSS中的3D縮放函數(shù)主要有scale3d()、scaleX()、scaleY()和scaleZ()四個(gè)，可以控制元素在三維空間上的縮放。scale3d()可以控制一個(gè)元素在X、Y、Z軸方向的縮放向量，對(duì)元素進(jìn)行3D的縮放變形，其具體語(yǔ)法如下所示。scaleX()、scaleY()和scaleZ()是scale3d()函數(shù)的簡(jiǎn)化形式，其語(yǔ)法如下所示。1032.43D變形函數(shù)2.使用變形屬性3D旋轉(zhuǎn)在CSS中有著四個(gè)旋轉(zhuǎn)函數(shù)用于實(shí)現(xiàn)元素的3D旋轉(zhuǎn)，分別是：rotate3d()、rotateX()、rotateY()和rotateZ()。rotate3d()函數(shù)可以通過(guò)設(shè)置元素在X、Y、Z軸的方向向量和一個(gè)旋轉(zhuǎn)角度來(lái)控制元素在3D空間中的旋轉(zhuǎn)，其語(yǔ)法如下所示。x：0~1的數(shù)值，用來(lái)描述元素圍繞X軸旋轉(zhuǎn)的向量值。y：0~1的數(shù)值，用來(lái)描述元素圍繞Y軸旋轉(zhuǎn)的向量值。z：0~1的數(shù)值，用來(lái)描述元素圍繞Z軸旋轉(zhuǎn)的向量值。angle：角度值，用來(lái)指定元素在3D空間旋轉(zhuǎn)的角度，如果其值為正值，元素順時(shí)針旋轉(zhuǎn)，反之元素逆時(shí)針旋轉(zhuǎn)。1042.43D變形函數(shù)2.使用變形屬性3D旋轉(zhuǎn)同樣rotateX()、rotateY()和rotateZ()是rotate3d()的簡(jiǎn)化形式，用于設(shè)置元素在僅在X、Y、Z方向上的旋轉(zhuǎn)角度，其語(yǔ)法如下所示。angle是一個(gè)角度值，其值可以為正值也可以為負(fù)值。如果值為正值，元素順時(shí)針旋轉(zhuǎn)。如果值為負(fù)值，元素逆時(shí)針旋轉(zhuǎn)。rotateX()、rotateY()和rotateZ()的每個(gè)方法的具體功能：rotateX(angle)方法的功能等同于rotate3d(1,0,0,angle)。rotateY(angle)方法的功能等同于rotate3d(0,1,0,angle)。rotateZ(angle)方法的功能等同于rotate3d(0,0,1,angle)。1052.43D變形函數(shù)2.使用變形屬性3D矩陣CSS中的3D矩陣比2D矩陣復(fù)雜，從二維到三維是從4到9，而在矩陣?yán)锸?*3變成4*4，即16。對(duì)于3D矩陣而言，本質(zhì)上很多東西與2D矩陣是一致的，只是復(fù)雜程度不一樣而已，其語(yǔ)法如下所示。1062.43D變形函數(shù)107現(xiàn)場(chǎng)演示：案例13-10：使用3D變形方法制作立方體2.使用變形屬性時(shí)鐘時(shí)鐘是日常生活中一種很常見(jiàn)的工具，使用CSS3中的變形元素可以很好的實(shí)現(xiàn)這種功能。下面使用CSS3實(shí)現(xiàn)動(dòng)態(tài)的時(shí)鐘效果，全部動(dòng)畫(huà)的實(shí)現(xiàn)不依賴Flash和JavaScript。1082.5案例：制作時(shí)鐘109現(xiàn)場(chǎng)演示：案例13-11：制作時(shí)鐘3.使用過(guò)渡屬性CSS過(guò)渡（transition）是通過(guò)設(shè)定元素起點(diǎn)的狀態(tài)和結(jié)束點(diǎn)的狀態(tài)，在一定的時(shí)間區(qū)間內(nèi)實(shí)現(xiàn)元素平滑地過(guò)渡或變化，是一種補(bǔ)間動(dòng)畫(huà)的機(jī)制。通過(guò)過(guò)渡屬性可以讓元素屬性的改變過(guò)程持續(xù)一段時(shí)間，而不立即生效，從而形成的一種動(dòng)畫(huà)效果。通過(guò)transition可以設(shè)置哪個(gè)屬性發(fā)生動(dòng)畫(huà)效果、何時(shí)開(kāi)始動(dòng)畫(huà)、動(dòng)畫(huà)持續(xù)多久以及如何動(dòng)畫(huà)，其語(yǔ)法如下所示。該屬性是一個(gè)綜合屬性，可設(shè)置多個(gè)屬性值，實(shí)現(xiàn)元素的動(dòng)畫(huà)過(guò)渡。1103.1設(shè)置元素過(guò)渡111現(xiàn)場(chǎng)演示：案例13-12：transition屬性效果展示3.使用過(guò)渡屬性transition屬性的工作機(jī)制是為元素設(shè)置兩套樣式用于用戶與頁(yè)面的交互，在過(guò)渡屬性未觸發(fā)時(shí)是一種樣式，觸發(fā)后又是一種樣式。在這個(gè)過(guò)程中需要指定元素觸發(fā)后需要改變的屬性，這個(gè)值主要通過(guò)其子屬性transition-porperty來(lái)指定，其語(yǔ)法如下所示。transition-porperty屬性的取值說(shuō)明如下所示。none：沒(méi)有指定任何樣式。all：默認(rèn)值，表示指定元素所有支持該屬性的樣式。property：指定樣式名稱。1123.2設(shè)置過(guò)渡元素3.使用過(guò)渡屬性1133.2設(shè)置過(guò)渡元素3.使用過(guò)渡屬性transision-duration屬性主要用來(lái)設(shè)置元素從一個(gè)屬性過(guò)渡到另一個(gè)屬性所需的時(shí)間，即從舊屬性過(guò)渡的新屬性所消耗的時(shí)間，其語(yǔ)法如下所示。time是數(shù)值，單位為秒（s）或者毫秒（ms），可以作用于所有的元素，包括:before和:after偽元素。transition-duration屬性的默認(rèn)值為0，也就是說(shuō)元素的屬性變換是即時(shí)的。1143.3設(shè)置過(guò)渡持續(xù)時(shí)間115現(xiàn)場(chǎng)演示：案例13-13：transision-duration與transition-porperty屬性效果展示3.使用過(guò)渡屬性過(guò)渡函數(shù)有兩種，分別是transition-timing-function()和step()。transition-timing-function屬性指定元素過(guò)渡過(guò)程中的“緩動(dòng)函數(shù)”。此屬性可指定元素的過(guò)渡速度以及過(guò)渡期間的操作進(jìn)展情況，可以將某個(gè)值指定為預(yù)定義函數(shù)、階梯函數(shù)或者三次貝塞爾曲線，其語(yǔ)法如下所示。其值的類型有兩種：?jiǎn)我活愋偷倪^(guò)渡函數(shù)和三次貝塞爾曲線。1163.4制定過(guò)渡函數(shù)3.使用過(guò)渡屬性過(guò)渡函數(shù)有兩種，分別是transition-timing-function()和step()。單一的過(guò)渡函數(shù)取值效果如下所示。linear：元素樣式從初始狀態(tài)過(guò)渡到終止?fàn)顟B(tài)是恒速。ease：默認(rèn)值，元素樣式從初始狀態(tài)過(guò)渡到終止?fàn)顟B(tài)時(shí)速度由快到慢，逐漸變慢。ease-in：元素樣式從初始狀態(tài)到終止?fàn)顟B(tài)時(shí)速度越來(lái)越快，呈現(xiàn)一種加速狀態(tài)。這種效果稱之為漸顯效果。ease-out：元素樣式從初始狀態(tài)到終止?fàn)顟B(tài)時(shí)，速度越來(lái)越慢，呈現(xiàn)一種減速狀態(tài)。這種效果稱為漸隱效果。ease-in-out：元素樣式從初始狀態(tài)到終止?fàn)顟B(tài)時(shí)，先加速再減速。這種效果稱為漸顯漸隱效果。1173.4制定過(guò)渡函數(shù)3.使用過(guò)渡屬性過(guò)渡函數(shù)有兩種，分別是transition-timing-function()和step()。三次貝塞爾曲線有著多個(gè)精確控制點(diǎn)，可以精確的控制函數(shù)的過(guò)渡過(guò)程，其語(yǔ)法如下所示。需要注意的是，三次貝塞爾曲線中每個(gè)點(diǎn)值只允許0~1的值。step()函數(shù)是過(guò)渡中的另外一個(gè)函數(shù)，可以將整個(gè)操作領(lǐng)域劃成同樣的大小間隔，每個(gè)間隔都是相等的，該函數(shù)還指定發(fā)生在開(kāi)始或者結(jié)束的時(shí)間間隔是否另外輸出，可采用百分比的形式（如輸出百分比為0%表示輸入變化的初始點(diǎn)）。step()方法非常獨(dú)特，允許在固定的間隔播放動(dòng)畫(huà)，可以用來(lái)制作逐幀動(dòng)畫(huà)，其語(yǔ)法如下所示。1183.4制定過(guò)渡函數(shù)3.使用過(guò)渡屬性過(guò)渡函數(shù)有兩種，分別是transition-timing-function()和step()。step()方法主要包括兩個(gè)參數(shù)。第一個(gè)參數(shù)是一個(gè)數(shù)值n，主要用來(lái)指定step()方法間隔的數(shù)量，此值必須是一個(gè)大于0的正整數(shù)。第二個(gè)參數(shù)是可選的，是start或end，如果第二個(gè)參數(shù)忽略，則默認(rèn)為end值。1193.4制定過(guò)渡函數(shù)120現(xiàn)場(chǎng)演示：案例13-14：transition-timing-function屬性簡(jiǎn)單函數(shù)效果展示案例13-15：使用cubic-bezier實(shí)現(xiàn)過(guò)渡效果3.使用過(guò)渡屬性transition-delay用來(lái)指定一個(gè)動(dòng)畫(huà)開(kāi)始執(zhí)行的時(shí)間，也就是說(shuō)當(dāng)前元素屬性值多長(zhǎng)時(shí)間后開(kāi)始執(zhí)行過(guò)渡效果，其語(yǔ)法如下所示。transition-delay取值為time，它可以是正整數(shù)、負(fù)整數(shù)和0，非零的時(shí)候必須將單位設(shè)置為秒（s）或者毫秒（ms）。正整數(shù)：元素的過(guò)渡動(dòng)作不會(huì)被立即觸發(fā)，當(dāng)過(guò)了設(shè)定的時(shí)間值之后才觸發(fā)。負(fù)整數(shù)：元素的過(guò)渡動(dòng)作會(huì)從該時(shí)間點(diǎn)開(kāi)始顯示，之前動(dòng)作被截?cái)唷?：默認(rèn)值，元素的過(guò)渡動(dòng)作會(huì)立即觸發(fā)，沒(méi)有任何反應(yīng)。1213.5規(guī)定過(guò)渡延遲時(shí)間122現(xiàn)場(chǎng)演示：案例13-16：transition-delay屬性效果展示3.使用過(guò)渡屬性偽元素觸發(fā)動(dòng)畫(huà)的觸發(fā)可以使用偽元素觸發(fā)，如鼠標(biāo)指向時(shí)觸發(fā)（:hover）、用戶點(diǎn)擊某個(gè)元素時(shí)觸發(fā)（:active）、元素獲得焦點(diǎn)狀態(tài)時(shí)觸發(fā)（:focus）以及元素被選中時(shí)觸發(fā)（:checked）。媒體查詢觸發(fā)媒體查詢觸發(fā)即通過(guò)@media屬性觸發(fā)，能夠根據(jù)某些元素的更改應(yīng)用不同的元素樣式，同時(shí)也可以用來(lái)觸發(fā)動(dòng)畫(huà)。JavaScript觸發(fā)如果可以基于CSS的狀態(tài)更改觸發(fā)CSS動(dòng)畫(huà)，自然的可以使用JavaScript做到這一點(diǎn)。最簡(jiǎn)單的的方法是通過(guò)切換元素的類名稱進(jìn)行CSS動(dòng)畫(huà)的觸發(fā)。1233.6過(guò)渡觸發(fā)124現(xiàn)場(chǎng)演示：案例13-17：通過(guò)不同的方法觸發(fā)過(guò)渡動(dòng)畫(huà)3.使用過(guò)渡屬性簡(jiǎn)介導(dǎo)航是網(wǎng)站中的重要組成部分，通過(guò)導(dǎo)航用戶可以了解網(wǎng)站的內(nèi)容層次結(jié)構(gòu)，并訪問(wèn)網(wǎng)站的各個(gè)部分，并且美觀恰當(dāng)?shù)膶?dǎo)航可以使頁(yè)面更快的抓住用戶的注意力，提高用戶粘度。1253.7案例：制作動(dòng)態(tài)網(wǎng)站導(dǎo)航126現(xiàn)場(chǎng)演示：案例13-18：制作動(dòng)態(tài)導(dǎo)航4.使用動(dòng)畫(huà)屬性在CSS3中，除了可以使用transition功能實(shí)現(xiàn)的動(dòng)畫(huà)效果外，還可以通過(guò)animation功能實(shí)現(xiàn)更為復(fù)雜的動(dòng)畫(huà)效果。animation功能與transition功能基本相同，都是通過(guò)改變?cè)貙傩灾祦?lái)實(shí)現(xiàn)動(dòng)畫(huà)效果的，其區(qū)別在于：使用transition功能時(shí)只能通過(guò)指定屬性的開(kāi)始值與結(jié)束值，然后在這兩個(gè)屬性值之間進(jìn)行平滑過(guò)渡的方式實(shí)現(xiàn)動(dòng)畫(huà)效果，因此不能實(shí)現(xiàn)較為復(fù)雜的動(dòng)畫(huà)效果。使用animation功能時(shí)，通過(guò)定義多個(gè)關(guān)鍵幀以及定義每個(gè)關(guān)鍵幀中元素的屬性值來(lái)實(shí)現(xiàn)更為復(fù)雜的動(dòng)畫(huà)效果，其語(yǔ)法如下所示：1274.1建立基本動(dòng)畫(huà)128現(xiàn)場(chǎng)演示：案例13-19：animation屬性效果展示4.使用動(dòng)畫(huà)屬性animation動(dòng)畫(huà)創(chuàng)建的原理是，通過(guò)設(shè)置關(guān)鍵幀的方式將一套CSS樣式逐漸變化為另一套樣式。在動(dòng)畫(huà)過(guò)程中，要能夠多次改變CSS樣式，既可以使用百分比來(lái)規(guī)定改變發(fā)生的時(shí)間。同時(shí)也可以通過(guò)關(guān)鍵詞“from”和“to”來(lái)實(shí)現(xiàn)，“from”和“to”等價(jià)于0%和100%。0%是動(dòng)畫(huà)的開(kāi)始時(shí)間，100%是動(dòng)畫(huà)的結(jié)束時(shí)間。animation定義關(guān)鍵幀的語(yǔ)法如下所示。1294.2動(dòng)畫(huà)關(guān)鍵幀4.使用動(dòng)畫(huà)屬性animation動(dòng)畫(huà)創(chuàng)建的原理@keyframes有自身的語(yǔ)法規(guī)則：其命名由@keyframes開(kāi)頭，后面緊跟著是“動(dòng)畫(huà)名稱”加上一對(duì)花括號(hào)“{...}”，括號(hào)中是不同時(shí)間段的樣式規(guī)則，類似于CSS的寫(xiě)法。一個(gè)@keyframes中的樣式規(guī)則是由多個(gè)不同的百分比構(gòu)成的，如0%~100%，可以在這個(gè)規(guī)則中創(chuàng)建更多的百分比，分別給每個(gè)百分比中需要?jiǎng)赢?huà)效果的元素加上不同的屬性，從而讓元素達(dá)到一種不斷變化的效果。如果使用百分比設(shè)置關(guān)鍵幀，則其中的%不能省略，如果沒(méi)有加上，將沒(méi)有任何效果，因?yàn)锧keyframes的單位只接受百分比值。1304.2動(dòng)畫(huà)關(guān)鍵幀4.使用動(dòng)畫(huà)屬性animation動(dòng)畫(huà)創(chuàng)建的原理使用from、to的方式設(shè)置關(guān)鍵幀的代碼如下所示。1314.2動(dòng)畫(huà)關(guān)鍵幀4.使用動(dòng)畫(huà)屬性animation動(dòng)畫(huà)創(chuàng)建的原理使用百分比的方式設(shè)置關(guān)鍵幀的代碼如下所示。1324.2動(dòng)畫(huà)關(guān)鍵幀4.使用動(dòng)畫(huà)屬性animation-name屬性該屬性主要用來(lái)調(diào)動(dòng)動(dòng)畫(huà)，其調(diào)用的動(dòng)畫(huà)是通過(guò)@keyframes關(guān)鍵幀定義好的動(dòng)畫(huà)，其語(yǔ)法如下所示。animation-name用來(lái)定義一個(gè)動(dòng)畫(huà)的名稱，其主要有兩個(gè)值。keyframename：是由@keyframes創(chuàng)建的動(dòng)畫(huà)名稱，也就是說(shuō)此處的keyframename需要和@keyframes中的animationname一致，如果不一致將不會(huì)實(shí)現(xiàn)任何動(dòng)畫(huà)效果。none：默認(rèn)值，當(dāng)值為none時(shí)，將沒(méi)有任何動(dòng)畫(huà)效果，其可以用于覆蓋任何動(dòng)畫(huà)。1334.3動(dòng)畫(huà)子屬性4.使用動(dòng)畫(huà)屬性aimation-duration屬性該屬性主要用來(lái)設(shè)置CSS3動(dòng)畫(huà)播放時(shí)間，其用法和transition-duration類似，其語(yǔ)法如下所示。animation-timing-function屬性該屬性用來(lái)設(shè)置動(dòng)畫(huà)播放的方式，其語(yǔ)法如下所示。1344.3動(dòng)畫(huà)子屬性4.使用動(dòng)畫(huà)屬性animation-delay屬性該屬性用來(lái)定義動(dòng)畫(huà)開(kāi)始播放的時(shí)間，其語(yǔ)法如下所示。animation-iteration-count屬性該屬性用來(lái)定義動(dòng)畫(huà)播放的次數(shù)，其語(yǔ)法如下所示。此屬性主要用于定義動(dòng)畫(huà)播放多少次，其值通常為整數(shù)，但也可以使用帶小數(shù)的數(shù)字。此屬性默認(rèn)值為1，這意味著動(dòng)畫(huà)從開(kāi)始到結(jié)束只播放一次。如果取值為infinite，動(dòng)畫(huà)將會(huì)無(wú)限次的播放。1354.3動(dòng)畫(huà)子屬性4.使用動(dòng)畫(huà)屬性animation-direction屬性該屬性主要用來(lái)設(shè)置動(dòng)畫(huà)播放的方向，其語(yǔ)法如下所示。animation-direction是用來(lái)指定元素動(dòng)畫(huà)的播放方向的，其主要有兩個(gè)值，分別為：normal和alternate。normal：默認(rèn)值，設(shè)置為normal時(shí)，動(dòng)畫(huà)的每次循環(huán)都是向前播放。alternate：動(dòng)畫(huà)播放為偶數(shù)次是向前播放，為奇數(shù)次則是反向播放。1364.3動(dòng)畫(huà)子屬性4.使用動(dòng)畫(huà)屬性animation-play-state屬性該屬性用來(lái)控制元素動(dòng)畫(huà)的播放狀態(tài)，其語(yǔ)法如下所示。該屬性主要有兩個(gè)值：running和paused。running屬性：默認(rèn)值，主要作用類似于音樂(lè)播放器。paused屬性：將正在播放的動(dòng)畫(huà)停止下來(lái)。通過(guò)running將暫停的動(dòng)畫(huà)重新播放，這里的重新播放不一定是從元素動(dòng)畫(huà)的頭部開(kāi)始播放，也可能是從暫停的那個(gè)位置開(kāi)始播放。如果停止了動(dòng)畫(huà)的播放，元素的樣式將會(huì)回到最初始的設(shè)置狀態(tài)。1374.3動(dòng)畫(huà)子屬性4.使用動(dòng)畫(huà)屬性animation-fill-mode屬性定義動(dòng)畫(huà)在開(kāi)始之前和結(jié)束之后發(fā)生的操作，其語(yǔ)法如下所示。該屬性主要有四個(gè)值：none、forwards、backwards和both。none：默認(rèn)值，表示動(dòng)畫(huà)將按預(yù)期進(jìn)行和結(jié)束，在動(dòng)畫(huà)完成最后一幀時(shí)，動(dòng)畫(huà)會(huì)反轉(zhuǎn)到初始幀處。forwards：動(dòng)畫(huà)在結(jié)束后繼續(xù)應(yīng)用最后關(guān)鍵幀的位置。backwards：向元素應(yīng)用動(dòng)畫(huà)樣式時(shí)迅速應(yīng)用動(dòng)畫(huà)的初始。both：元素動(dòng)畫(huà)同時(shí)具有forwards和backwards效果。1384.3動(dòng)畫(huà)子屬性4.使用動(dòng)畫(huà)屬性使用@keyframes聲明動(dòng)畫(huà)通過(guò)@keyframes聲明一個(gè)名字為“mymove”的動(dòng)畫(huà)，它的動(dòng)畫(huà)經(jīng)歷了從0%到100%的變化，其中還有著25%、50%、75%三個(gè)過(guò)程。1394.4給元素應(yīng)用動(dòng)畫(huà)4.使用動(dòng)畫(huà)屬性調(diào)用@keyframes聲明的動(dòng)畫(huà)調(diào)用@keyframes聲明的動(dòng)畫(huà)，在CSS中有兩種方式：animation和transition。animation類似于transition屬性，都是隨著時(shí)間改變?cè)氐膶傩灾?。兩個(gè)屬性主要區(qū)別是如下：transition需要一個(gè)觸發(fā)事件。animation在不需要任何觸發(fā)事件的情況下也可以顯式的隨著時(shí)間變化來(lái)改變?cè)氐腃SS屬性值，從而達(dá)到一種動(dòng)畫(huà)的效果。1404.4給元素應(yīng)用動(dòng)畫(huà)4.使用動(dòng)畫(huà)屬性頁(yè)面加載動(dòng)畫(huà)是Web前端開(kāi)發(fā)中常用的一個(gè)動(dòng)畫(huà)，在以前的開(kāi)發(fā)中，Web前端開(kāi)發(fā)者常使用GIF圖片制作頁(yè)面加載動(dòng)畫(huà)，現(xiàn)在通過(guò)CSS3的animation屬性可更加簡(jiǎn)單方便的實(shí)現(xiàn)頁(yè)面加載動(dòng)畫(huà)。1414.5案例：實(shí)現(xiàn)頁(yè)面加載動(dòng)畫(huà)142現(xiàn)場(chǎng)演示：案例13-20：實(shí)現(xiàn)頁(yè)面加載動(dòng)畫(huà)5.案例：引人入勝的動(dòng)態(tài)照片墻143144現(xiàn)場(chǎng)演示：案例13-21：引人入勝的動(dòng)態(tài)照片墻145Thanks.Web前端開(kāi)發(fā)第14章：初始JavaScript146本章主要內(nèi)容JavaScript概述JavaScript語(yǔ)法DOM案例：使用JavaScript進(jìn)行表單驗(yàn)證案例：使用JavaScript實(shí)現(xiàn)規(guī)定時(shí)間內(nèi)答題效果1471.JavaScript概述JavaScript是一種為網(wǎng)站添加互動(dòng)以及自定義行為的客戶端腳本語(yǔ)言，因此通常只能通過(guò)Web瀏覽器去完成操作，而無(wú)法像普通意義上的程序那樣獨(dú)立運(yùn)行。1481.1什么是JavaScript1.JavaScript概述發(fā)展歷程JavaScript與Java沒(méi)有任何的關(guān)系，它由Netscape公司與Sun公司合作開(kāi)發(fā)。JavaScript最開(kāi)始的名字是LiveScript，因當(dāng)時(shí)Java風(fēng)靡一時(shí)以及當(dāng)時(shí)正與Sun公司進(jìn)行合作等因素，于是將LiveScript改為了JavaScript。JavaScript的第一個(gè)版本，出現(xiàn)在1996年推出的NetScapeNavigator2瀏覽器中。1491.1什么是JavaScript1501.JavaScript概述主要特點(diǎn)解釋性執(zhí)行的腳本語(yǔ)言JavaScript的語(yǔ)法基本結(jié)構(gòu)形式與C、C++、Java十分類似，但是在使用之前，不需要先編譯，而是在程序執(zhí)行中被逐行的解釋。簡(jiǎn)單弱類型腳本語(yǔ)言JavaScript的簡(jiǎn)單性主要在于其基于Java基本語(yǔ)句和控制流之上的簡(jiǎn)單而緊湊的設(shè)計(jì)；其次在于其變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。1511.1什么是JavaScript1.JavaScript概述相對(duì)安全的腳本語(yǔ)言JavaScript作為一種安全性語(yǔ)言，不被允許訪問(wèn)本地硬盤(pán)，且不能將數(shù)據(jù)存入服務(wù)器，不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)的丟失或?qū)ο到y(tǒng)的非法訪問(wèn)?？缙脚_(tái)性的腳本語(yǔ)言JavaScript依賴于瀏覽器本身，與操作環(huán)境無(wú)關(guān)，只要計(jì)算機(jī)能運(yùn)行支持JavaScript的瀏覽器，就可正確執(zhí)行，從而實(shí)現(xiàn)了跨平臺(tái)的特性。1521.1什么是JavaScript1.JavaScript概述功能概述通常情況下，Web前端開(kāi)發(fā)者使用JavaScript在給網(wǎng)頁(yè)添加交互作用。網(wǎng)頁(yè)的結(jié)構(gòu)層是HTML；網(wǎng)頁(yè)表現(xiàn)層由CSS構(gòu)成；網(wǎng)頁(yè)行為層由JavaScript組成。網(wǎng)頁(yè)上的所有元素、屬性和文本都能通過(guò)使用DOM（文本對(duì)象模型）的腳本來(lái)獲得。Web前端開(kāi)發(fā)者可通過(guò)JavaScript來(lái)實(shí)現(xiàn)改變網(wǎng)頁(yè)內(nèi)容、CSS樣式、對(duì)用戶輸入做出反饋等操作。1531.2JavaScript的作用2.JavaScript語(yǔ)法用JavaScript編寫(xiě)的代碼必須通過(guò)HTML/XHTML文檔才能執(zhí)行。目前有兩種方法可以調(diào)用JavaScript。方法一：將JavaScript代碼放到文檔<head>或<body>標(biāo)簽中的<script>標(biāo)簽之間。但最好的做法是將<script>標(biāo)簽放到HTML文檔的最后，<body>結(jié)束標(biāo)簽之前。方法二：將JavaScript代碼存為一個(gè)擴(kuò)展名為.js的獨(dú)立文件。典型的做法是在文檔的<head>部分放置一個(gè)<sccript>標(biāo)簽，并把它的src屬性指向該文件。1542.1調(diào)用方法2.JavaScript語(yǔ)法方法一：放在<head>標(biāo)簽中。1552.1調(diào)用方法2.JavaScript語(yǔ)法方法二：放到HTML文檔的最后，<body>結(jié)束標(biāo)簽之前1562.1調(diào)用方法2.JavaScript語(yǔ)法需要主要的是：上述代碼中<script>標(biāo)簽沒(méi)有包含傳統(tǒng)的type="text/javascript"屬性，是因?yàn)樵贖TML5規(guī)范中，script的type屬性默認(rèn)是text/javascript，所以可以省略，但是在HTML4.01和XHTML1.0規(guī)范中，type屬性是必須的。1572.1調(diào)用方法2.JavaScript語(yǔ)法語(yǔ)法結(jié)構(gòu)JavaScript程序使用Unicode字符集編寫(xiě)，它是一種區(qū)分大小寫(xiě)的語(yǔ)言，也就是說(shuō)，在輸入關(guān)鍵字、變量、函數(shù)名以及所有的標(biāo)識(shí)符時(shí)，都必須采取一致的字母大小寫(xiě)格式。JavaScript會(huì)忽略程序中記號(hào)之間的空格、制表符和換行符。因?yàn)榭梢栽诔绦蛑腥我馐褂每崭?、制表符和換行符，因此開(kāi)發(fā)者可以采用整齊、一致的方式排版JavaScript代碼，增加代碼的可讀性。JavaScript中的簡(jiǎn)單語(yǔ)句后面通常都有分號(hào)（;）主要是為了分割語(yǔ)句。1582.2基本語(yǔ)法2.JavaScript語(yǔ)法JavaScript和Java一樣，它也支持C++、C型的注釋。JavaScript會(huì)把處于"http://"和一行結(jié)尾之間的任何文本都當(dāng)做注釋忽略掉。此外"/*"和"*/"之間的文本也會(huì)被當(dāng)做注釋，這個(gè)注釋可以跨越多行，但是其中不能有嵌套的注釋。1592.2基本語(yǔ)法2.JavaScript語(yǔ)法JavaScript的直接量，就是程序中直接顯示出來(lái)的數(shù)據(jù)值。1602.2基本語(yǔ)法2.JavaScript語(yǔ)法在JavaScript中標(biāo)識(shí)符用來(lái)命名變量與函數(shù)名，或者用作JavaScript代碼中某些循環(huán)的標(biāo)簽。JavaScript合法的標(biāo)識(shí)符命名規(guī)則為：第一個(gè)字符必須為字母、下劃線或美元符號(hào)（$），接下來(lái)的字符可以是字母、數(shù)字、下滑線或美元符號(hào)，數(shù)字不允許作為首字母出現(xiàn)。另外標(biāo)識(shí)符不能和JavaScript中用于其它用途的關(guān)鍵字同名。同時(shí)需要注意的是，JavaScript中的保留字在JavaScript程序中不能被用作標(biāo)識(shí)符。1612.2基本語(yǔ)法2.JavaScript語(yǔ)法ECMAScriptv3標(biāo)準(zhǔn)化的關(guān)鍵字如表所示。1622.2基本語(yǔ)法2.JavaScript語(yǔ)法ECMA擴(kuò)展保留的關(guān)鍵字如表所示。1632.2基本語(yǔ)法2.JavaScript語(yǔ)法此外還應(yīng)該避免把JavaScript預(yù)定義的全局變量名或全局函數(shù)名用作標(biāo)識(shí)符。避免使用的標(biāo)識(shí)符如表所示。1642.2基本語(yǔ)法2.JavaScript語(yǔ)法數(shù)據(jù)類型JavaScript是一種弱類型語(yǔ)言，這意味著Web前端開(kāi)發(fā)者可以在任何階段改變變量的數(shù)據(jù)類型，而無(wú)需像強(qiáng)類型語(yǔ)言一樣在聲明變量的同時(shí)還必須同時(shí)聲明變量的數(shù)據(jù)類型。JavaScript的三種基本數(shù)據(jù)類型有：字符串、數(shù)值、布爾值。1652.2基本語(yǔ)法2.JavaScript語(yǔ)法字符串字符串由零個(gè)或多個(gè)字符構(gòu)成。字符包括（但不局限于）字母、數(shù)字、標(biāo)點(diǎn)符號(hào)和空格。字符串必須包在引號(hào)里面，單引號(hào)或雙引號(hào)都可以。JavaScript可以隨意的選用引號(hào)，但最好還是根據(jù)字符串所包含的字符來(lái)選擇。即如果字符串包含雙引號(hào)，就把整個(gè)字符串包含在引號(hào)里面；如果包含單引號(hào)就把整個(gè)字符放在雙引號(hào)里面。如果一個(gè)字符串中既有單引號(hào)又有雙引號(hào)，那么這種情況下需要把那個(gè)單引號(hào)或雙引號(hào)看做一個(gè)普通字符，而不是這個(gè)字符串的結(jié)束標(biāo)志，這種情況下需要對(duì)這個(gè)字符進(jìn)行轉(zhuǎn)義，在JavaScript中用反斜線對(duì)字符串進(jìn)行轉(zhuǎn)義1662.2基本語(yǔ)法2.JavaScript語(yǔ)法數(shù)值如果想給一個(gè)變量賦一個(gè)數(shù)值，不用限定它必須是一個(gè)整數(shù)。JavaScript允許使用帶有小數(shù)點(diǎn)的數(shù)值，并且允許任意位小數(shù)點(diǎn)，這樣的數(shù)稱為浮點(diǎn)數(shù)，數(shù)值主要數(shù)據(jù)類型如下所示。1672.2基本語(yǔ)法2.JavaScript語(yǔ)法布爾值布爾數(shù)據(jù)只有兩個(gè)可選值：true或者false。布爾值不是字符串，不能將布爾值用引號(hào)括起來(lái)。布爾值的false與字符串值“false”是完全不相關(guān)的兩碼事。1682.2基本語(yǔ)法2.JavaScript語(yǔ)法變量變量通常指那些會(huì)發(fā)生變化的東西，把值存入變量的操作統(tǒng)稱為賦值，在JavaScript中可以用下面的代碼進(jìn)行賦值。在JavaScript中程序可不必直接對(duì)變量賦值而無(wú)需事先聲明。作出變量聲明如下所示。聲明變量的同時(shí)，完成賦值如下所示。1692.2基本語(yǔ)法2.JavaScript語(yǔ)法表達(dá)式與運(yùn)算符表達(dá)式表達(dá)式是JavaScript的一個(gè)“短語(yǔ)”，JavaScript解釋器可以計(jì)算表達(dá)式，從而生成一個(gè)值，最簡(jiǎn)單的表達(dá)式是直接量或變量名。直接量表達(dá)式的值就是這個(gè)直接量本身，變量表達(dá)式的值則是該變量所存放或引用的值。通過(guò)合并簡(jiǎn)單的表達(dá)式可以創(chuàng)建較為復(fù)雜的表達(dá)式，具體代碼如下所示。1702.2基本語(yǔ)法2.JavaScript語(yǔ)法運(yùn)算符JavaScript中，加減乘除都是一種操作，這些算術(shù)操作中的每一種都必須借助于相應(yīng)的操作符才能完成，操作符是JavaScript為完成各種操作而定義的一些符號(hào)。假設(shè)y=3，則：1712.2基本語(yǔ)法2.JavaScript語(yǔ)法賦值運(yùn)算符用于給JavaScript變量賦值，假設(shè)x=6，y=3，則：加號(hào)（+）是一個(gè)比較特殊的操作符，它既可以用于數(shù)字，也可用于字符串，代碼如下所示。1722.2基本語(yǔ)法2.JavaScript語(yǔ)法流程控制語(yǔ)句If語(yǔ)句if語(yǔ)句是最常見(jiàn)的條件語(yǔ)句，基本語(yǔ)法如下所示。條件必須放在if后面的圓括號(hào)中。條件的求值結(jié)果永遠(yuǎn)是一個(gè)布爾值，即只能為true或false?；ɡㄌ?hào)中的語(yǔ)句不管內(nèi)容有多少條，只有在給定條件的求值結(jié)果為true的情況下才會(huì)執(zhí)行。例如：1732.2基本語(yǔ)法2.JavaScript語(yǔ)法流程控制語(yǔ)句If語(yǔ)句if語(yǔ)句是最常見(jiàn)的條件語(yǔ)句，基本語(yǔ)法如下所示。條件必須放在if后面的圓括號(hào)中。條件的求值結(jié)果永遠(yuǎn)是一個(gè)布爾值，即只能為true或false?；ɡㄌ?hào)中的語(yǔ)句不管內(nèi)容有多少條，只有在給定條件的求值結(jié)