HTML5移動Web開發(fā)任務(wù)教程PPT完整全套教學(xué)課件

上傳人：b*** IP屬地：浙江上傳時間：2023-05-25 格式：PPTX 頁數(shù)：430 大小：27.89MB 積分：35 舉報 版權(quán)申訴

HTML5移動Web開發(fā)任務(wù)教程PPT完整全套教學(xué)課件_第2頁

HTML5移動Web開發(fā)任務(wù)教程PPT完整全套教學(xué)課件_第3頁

HTML5移動Web開發(fā)任務(wù)教程PPT完整全套教學(xué)課件_第4頁

HTML5移動Web開發(fā)任務(wù)教程PPT完整全套教學(xué)課件_第5頁

已閱讀5頁，還剩425頁未讀，繼續(xù)免費閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

移動Web開發(fā)概述chapter01移動Web開發(fā)概述chapter02初識HTML5chapter03CSS3基礎(chǔ)chapter04CSS3常用樣式chapter05CSS3高級應(yīng)用chapter06HTML5智能表單PPTchapter07基于HTML5的移動Web應(yīng)用（上）chapter08基于HTML5的移動Web應(yīng)用（下）chapter09響應(yīng)式Web設(shè)計神器Bootstrapchapter10實戰(zhàn)開發(fā)——英語學(xué)習(xí)網(wǎng)全套PPT課件01移動Web開發(fā)簡介移動Web開發(fā)概述02移動Web開發(fā)技術(shù)03開發(fā)工具HBuilder的使用

01移動Web（移動網(wǎng)頁）:在移動端Web瀏覽器中運行的Web應(yīng)用。NativeApp（原生應(yīng)用）：用Objective-C等原生語言開發(fā)的移動應(yīng)用。02HybridApp（混合應(yīng)用）：將移動Web頁面封裝在原生外殼中，以App的形式與用戶交互。03移動Web開發(fā)就是針對移動端的Web頁面的開發(fā)，它主要有以下3種開發(fā)方式。移動Web開發(fā)簡介01移動web開發(fā)基本概念PCWeb開發(fā)移動Web開發(fā)PC端Web開發(fā)主要由HTML、CSS和JavaScript技術(shù)來實現(xiàn)。PC端Web開發(fā)的內(nèi)容包括網(wǎng)站頁面內(nèi)容、樣式的呈現(xiàn)，用戶的交互，數(shù)據(jù)的呈現(xiàn)等。它需要PC端瀏覽器對HTML、CSS和JavaScript及其他技術(shù)的支持。在開發(fā)時，需要注意不同廠家瀏覽器對前端技術(shù)支持的差異化，需要考慮瀏覽器的兼容性。

移動Web開發(fā)即針對移動端的Web頁面的開發(fā)，它與PC端Web開發(fā)有什么區(qū)別？移動Web開發(fā)簡介01移動web開發(fā)基本概念PCWeb開發(fā)移動Web開發(fā)移動端Web開發(fā)與PC端Web開發(fā)所用的技術(shù)類似，開發(fā)項目的呈現(xiàn)是依賴于移動端Web瀏覽器。在移動Web開發(fā)中，需要注意的有兩點。（1）由于屏幕大小的限制，在移動Web開發(fā)中，要注意由于頁面的結(jié)構(gòu)不能過于繁瑣，要提煉出該網(wǎng)站最為核心的功能，簡潔清晰的呈現(xiàn)出來。（2）對于頁面的一切交互活動由鼠標(biāo)控制變成了手指觸屏控制，所以在移動Web開發(fā)時，會增加一些觸屏事件。移動Web開發(fā)簡介01移動web開發(fā)基本概念A(yù)ndroidBrowserAndroidMobileSafariiOSUC瀏覽器多操作系統(tǒng)QQ瀏覽器百度瀏覽器

隨著Android系統(tǒng)手機、iOS系統(tǒng)手機、windowsphone系統(tǒng)手機不斷推出各種應(yīng)用程序。不論什么系統(tǒng)的手機，手機中都有移動Web瀏覽器。移動Web開發(fā)簡介01移動web開發(fā)基本概念

移動Web瀏覽器可以直接訪問任何通過HTML等語言構(gòu)建的Web網(wǎng)站或應(yīng)用程序。

我們通過iPhone手機上的Safari瀏覽器訪問了中國大學(xué)MOOC的首頁，如右圖所示。移動Web開發(fā)簡介接下來，作為對比，我們在PC端訪問中國大學(xué)MOOC網(wǎng)站的首頁，如下圖所示。01移動web開發(fā)基本概念移動Web開發(fā)簡介移動端網(wǎng)站的設(shè)計更簡潔，內(nèi)容更核心。這也反映了移動Web瀏覽器的一些特點，如下所示。

屏幕尺寸限制加入手勢操作硬件設(shè)備不斷發(fā)展

可支持HTML5規(guī)范現(xiàn)在的移動Web瀏覽器都可以支持HTML5，這包括HTML5規(guī)范，CSS3規(guī)范和JavaScript腳本代碼。01移動web開發(fā)基本概念移動端會支持觸屏、滑動、縮放、放大等手勢操作。移動Web瀏覽器受到屏幕尺寸的限制，所以移動端網(wǎng)站的設(shè)計會將本站最核心的產(chǎn)品進行展示，菜單欄也會縮進一個漢堡菜單中。PC端硬件配置相對強大，各種瀏覽器對硬件的要求已經(jīng)無需太多的限定。而手機的性能相對于PC端要低的多，內(nèi)置的瀏覽器就需要考慮硬件因素。所以移動Web瀏覽器功能相對有限。但是隨著手機的硬件設(shè)備不斷加強，移動Web瀏覽器支持的功能也隨著越來越多。移動Web開發(fā)簡介01移動Web開發(fā)簡介移動Web開發(fā)概述02移動Web開發(fā)技術(shù)03開發(fā)工具HBuilder的使用超文本標(biāo)記語言HTML描述網(wǎng)頁文檔的一種標(biāo)記語言，通過標(biāo)記來標(biāo)識要顯示在網(wǎng)頁中的各個部分。HTML5簡介

Web成為應(yīng)用程序運行的平臺HTML5能實現(xiàn)并改進Web應(yīng)用，實現(xiàn)Web應(yīng)用的多設(shè)備同時支持。HTML5簡介TimBerners-Lee創(chuàng)建“HTML標(biāo)簽”雛形HTML2.0

—HTML

4.01HTML5草案公布IETF推出第一個官方版本HTML2.0HTML5爆發(fā)19801995|1999200819932015HTML5發(fā)展史

每一個新版本都是對之前版本的擴充

每一個新版本基本都能兼容之前的版本HTML5發(fā)展史支持跨平臺、跨設(shè)備支持移動開發(fā)HTML5新特性

語義化表達引入具有特定語義的結(jié)構(gòu)標(biāo)簽，如<header>、<footer>、<nav>等。HTML5新特性

支持多媒體新增<audio>和<video>標(biāo)簽處理音頻和視頻文件。HTML5新特性

離線和存儲HTML5提出LocalStorage與ApplicationCache兩大離線存儲技術(shù)，能把Web應(yīng)用相關(guān)資源文件緩存到本地。HTML5新特性

三維圖形與特效Canvas、SVG和WebGL等技術(shù)使圖形渲染更高效，頁面效果更酷炫。網(wǎng)頁特效網(wǎng)頁游戲三維立體展示廳HTML5新特性

支持多線程：WebWorkers讓瀏覽器可以多線程處理后臺任務(wù)而不阻塞用戶界面渲染。

通信：增強了通信能力，意味著增強了信息交互的實時性和網(wǎng)絡(luò)游戲的順暢性。

設(shè)備訪問：增強了設(shè)備感知能力，使Web應(yīng)用在電腦、pad、手機上均能使用。HTML5新特性01移動Web開發(fā)簡介移動Web開發(fā)概述02移動Web開發(fā)技術(shù)03開發(fā)工具HBuilder的使用HBuilder簡介

01敏捷的性能，實現(xiàn)emmet、sass自動編譯。清爽的界面，可以自定義界面風(fēng)格。02強大的功能，完整的代碼提示、自動補全。03HBuilder是一款功能豐富、多平臺開發(fā)的輕量編輯器，支持HTML5的Web開發(fā)?？?，是HBuilder的最大優(yōu)勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升Web開發(fā)效率。HBuilder的下載和安裝http://www.dcloud.io/下載解壓下載的安裝包安裝雙擊可執(zhí)行文件運行HBuilder的使用1234編寫代碼新建Web項目新建HTML文件查看頁面效果謝謝！初識HTML501HTML5常用標(biāo)簽及其屬性HTML5基礎(chǔ)02HTML5新增的標(biāo)簽及屬性03HTML5新增的語義元素04HTML5新增的屬性HTML5文檔的基本格式各位同學(xué)：歡迎來到《移動web開發(fā)》的學(xué)習(xí)課堂。在這里，你們能學(xué)到最實用的web開發(fā)技術(shù)，讓我們一起努力！

《移動web開發(fā)》課程組學(xué)習(xí)HTML標(biāo)記語言和寫書信一樣，要符合基本格式，遵從相應(yīng)的格式規(guī)范。HTML5文檔的基本格式<!DOCTYPE>文檔類型聲明<html>根標(biāo)記<head>頭部標(biāo)記<body>主體標(biāo)記簡化的文檔類型和字符集簡化的文檔類型

文檔類型聲明<!DOCTYPE>標(biāo)記，必須位于HTML5文檔中的第一行。簡化的字符集HTML5的字符集得到了簡化，只需要用UTF-8即可。meta就可以指定HTML5的字符集。<!DOCTYPEhtml><metacharset=“UTF-8“>HTML5整體結(jié)構(gòu)標(biāo)簽

整個文檔由成對的標(biāo)簽和文本組成，如下：<html><head>--根標(biāo)記，文檔的開始標(biāo)簽--頭部標(biāo)記，文檔頭的開始標(biāo)簽<title>標(biāo)題</title>--

文檔標(biāo)題，顯示的瀏覽器標(biāo)題欄中</head><body>

內(nèi)容</body></html>--

文檔頭的結(jié)束標(biāo)簽--

主體標(biāo)記，文檔內(nèi)容的開始標(biāo)簽--

文檔內(nèi)容的結(jié)束標(biāo)簽--

文檔的結(jié)束標(biāo)簽01HTML5常用標(biāo)簽及其屬性HTML5基礎(chǔ)02HTML5新增的標(biāo)簽及屬性03HTML5新增的語義元素04HTML5新增的屬性標(biāo)簽和屬性

在html文件中，帶有“<>”符號的元素被稱為HTML標(biāo)簽。

標(biāo)簽被Web瀏覽器解釋，決定網(wǎng)頁的結(jié)構(gòu)和顯示的內(nèi)容。<body></body>雙標(biāo)簽和單標(biāo)簽雙標(biāo)簽

由開始和結(jié)束兩個標(biāo)記符組成的標(biāo)記。<標(biāo)簽名>內(nèi)容</標(biāo)簽名>例：<h2>歡迎學(xué)習(xí)移動Web開發(fā)</h2>單標(biāo)簽

也稱空標(biāo)簽。指用一個標(biāo)記符號即可完整地描述某個功能的標(biāo)簽。<標(biāo)簽名/>例：<hr>注釋標(biāo)簽

需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標(biāo)簽。

例：<p>這是一個段落</p><!—p是段落標(biāo)簽，在頁面上顯示為一段話-->語法：標(biāo)簽描述標(biāo)題標(biāo)簽HTML中，定義了6級標(biāo)題，分別為h1、h2、h3、h4、h5、h6，每級標(biāo)題的字體大小依次遞減，1級標(biāo)題字號最大，6級標(biāo)題字號最小。段落標(biāo)簽<p>標(biāo)簽用于定義段落。<br>標(biāo)簽與<wbr>標(biāo)簽<br>標(biāo)簽可插入一個簡單的換行符，用來輸入空行，而不是分割段落。<wbr>規(guī)定在文本中的何處適合添加換行符。作用是建議瀏覽器在這個標(biāo)記處可以斷行,只是建議而不是必定會在此處斷行,還要根據(jù)整行文字長度而定。除了InternetExplorer，其他所有瀏覽器都支持<wbr>標(biāo)簽。<details>標(biāo)簽與<summary>標(biāo)簽<details>標(biāo)簽用于描述文檔或文檔某個部分的細節(jié)，目前只有Chrome瀏覽器支持<details>標(biāo)簽，可以與<summary>標(biāo)簽配合使用，<summary>標(biāo)簽用于定義這個描述文檔的標(biāo)題。<bdi>標(biāo)簽<bdi>標(biāo)簽用于設(shè)置一段文本，使其脫離其父標(biāo)簽的文本方向設(shè)置。<ruby>標(biāo)簽、<rt>標(biāo)簽與<rp>標(biāo)簽<ruby>標(biāo)簽用于定義ruby注釋（中文注音或字符）。與<rt>標(biāo)簽一同使用。<rt>標(biāo)簽用于定義字符（中文注音或字符）的解釋或發(fā)音。<rp>標(biāo)簽在ruby注釋中使用，以定義不支持<ruby>標(biāo)簽的瀏覽器所顯示的內(nèi)容。<mark>標(biāo)簽<mark>標(biāo)簽主要用來在視覺上向用戶呈現(xiàn)那些需要突出顯示或高亮顯示的文字，典型應(yīng)用是搜索結(jié)果中高亮顯示搜素關(guān)鍵字。<time>標(biāo)簽<time>標(biāo)簽用于定義日期或時間，也可以兩者同時。<meter>標(biāo)簽<meter>標(biāo)簽用于定義度量衡，僅用于已知最大和最小值的度量。<progress>標(biāo)簽<progress>標(biāo)簽用于定義任何類型任務(wù)的運行進度，可以使用<progress>標(biāo)簽顯示JavaScript中時間函數(shù)的進程。常用的文本標(biāo)簽details元素用于描述文檔或文檔某個部分的細節(jié)。summary元素經(jīng)常與details元素配合使用，作為details元素的第一個子元素，用于為details定義標(biāo)題。標(biāo)題是可見的，當(dāng)用戶點擊標(biāo)題時，會顯示或隱藏details中的其他內(nèi)容。details和summary元素例如:下面的案例效果。progress元素progress元素用于定義一個正在完成的進度條，這個進度可以是不確定的，只是表示進度正在進行，但是不清楚還有多少工作量沒有完成progress元素常用屬性值value：已經(jīng)完成的工作量。max：總共有多少工作量。meter元素用于表示指定范圍內(nèi)的數(shù)值。meter元素有多個常用的屬性屬性說明high定義度量的值位于哪個點被界定為高的值。low定義度量的值位于哪個點被界定為低的值。max定義最大值，默認值是1。min定義最小值，默認值是0。optimum定義什么樣的度量值是最佳的值。如果該值高于high屬性，則意味著值越高越好。如果該值低于low屬性的值，則意味著值越低越好。value定義度量的值。meter元素標(biāo)簽的屬性

屬性描述標(biāo)簽的特征?；菊Z法格式<標(biāo)簽名屬性=“屬性值”>內(nèi)容</標(biāo)簽名>標(biāo)記可以擁有多個屬性，屬性之間不分先后順序，標(biāo)簽名與屬性、屬性與屬性之間均以空格分開，任何標(biāo)簽的屬性都有默認值，省略該屬性則取默認值。例：<inputchecked=checkedtype="checkbox"/>HTML5語法的改變例：<inputchecked=checkedtype="checkbox"/>

為了兼容各個瀏覽器，HTML5在設(shè)計和語法方面做了一些變化。

標(biāo)簽不區(qū)分大小寫

例：<b></b>是正確的寫法。<p></P>頭尾標(biāo)簽大小寫不一致，也是正確的寫法。

允許屬性值不使用引號

當(dāng)屬性不包含一些特殊字符（如空字符串、<、>、=、單引號、雙引號）時，屬性值不放在引號中也是正確的。HTML5語法的改變可以省略的標(biāo)簽

可以省略結(jié)束部分的標(biāo)簽開始和結(jié)束均可省略的標(biāo)簽不允許寫結(jié)束標(biāo)簽有dt、dd、li、p、option、colgroup、thead、tbody、tfoot、tr、td、th等。有html、head、body、tbody、thead、colgroup等。

只能使用“<標(biāo)簽/>”形式。有area、base、br、col、hr、img、input、link、meta、param、embed、keygen、track、source等。01HTML5常用標(biāo)簽及其屬性HTML5基礎(chǔ)02HTML5新增的標(biāo)簽及屬性03HTML5新增的語義元素04HTML5新增的屬性HTML5頁面結(jié)構(gòu)<header><nav><article><footer><section><aside>語義元素，就是有意義的元素。用來向瀏覽器和開發(fā)者描述其意義。HTML5提供了新的語義元素來明確一個Web頁面的不同部分。

<body><header>...</header><nav>...</nav><article><section>...</section></article><aside>...</aside><footer>...</footer></body>HTML5頁面結(jié)構(gòu)新增的語義元素標(biāo)簽名描述<header>定義文檔的頭部區(qū)域.<nav>定義導(dǎo)航鏈接的部分。<section>定義文檔中的節(jié)（section、區(qū)段）。<article>定義頁面獨立的內(nèi)容區(qū)域。<aside>定義頁面的側(cè)邊欄內(nèi)容。<figure>規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等）。<figcaption>定義<figure>元素的標(biāo)題。<footer>定義section或document的頁腳。新增的語義元素

header元素

<header>標(biāo)簽用于定義文檔的頁眉（介紹信息）。在一個文檔中，您可以定義多個<header>元素。

案例：<header><h1>歡迎閱讀《大學(xué)生創(chuàng)新創(chuàng)業(yè)讀本》</h1></header>

注意：<header>標(biāo)簽不能被放在<footer>、<address>或者另一個<header>元素內(nèi)部。新增的語義元素

article元素

article元素代表文檔、頁面或者應(yīng)用程序中與上下文不相關(guān)的獨立部分，該元素經(jīng)常被用于定義一篇日志、一條新聞或用戶評論等。案例：<article>在英文中,這個創(chuàng)新Innovation,它這個詞起源于拉丁語。它原意有三層含義：第一,更新。第二,創(chuàng)造新的東西。第三,改變。</article>新增的語義元素

section元素

section元素用于對網(wǎng)站或應(yīng)用程序中頁面上的內(nèi)容進行分塊，一個section元素通常由內(nèi)容和標(biāo)題組成。不要將section元素用作設(shè)置樣式的頁面容器，那是div的特性。如果article元素、aside元素或nav元素更符合使用條件，那么不要使用section元素。沒有標(biāo)題的內(nèi)容區(qū)塊不要使用section元素定義。新增的語義元素

nav元素

<nav>標(biāo)簽定義導(dǎo)航鏈接的部分。在不同設(shè)備上可以制定導(dǎo)航鏈接是否顯示，以適應(yīng)不同屏幕的需求。案例：<nav><ahref="index.html">首頁</a><ahref="intr.html">圖書簡介</a><ahref="ind.html">圖書目錄</a><ahref="con.html">聯(lián)系方式</a></nav>新增的語義元素

footer元素

<footer>標(biāo)簽用于定義區(qū)段（section）或文檔的頁腳。通常，該元素包含作者的姓名、文檔的版權(quán)信息、聯(lián)系方式等等。案例：<footer>江蘇鳳凰教育出版社<br>2019年10月12日</footer>HTML5頁面結(jié)構(gòu)<header><nav><article><footer><section><aside>語義元素，就是有意義的元素。用來向瀏覽器和開發(fā)者描述其意義。HTML5提供了新的語義元素來明確一個Web頁面的不同部分。

header元素

<header>標(biāo)簽用于定義文檔的頁眉（介紹信息）。在一個文檔中，您可以定義多個<header>元素。

案例：<header><h1>歡迎閱讀《大學(xué)生創(chuàng)新創(chuàng)業(yè)讀本》</h1></header>

注意：<header>標(biāo)簽不能被放在<footer>、<address>或者另一個<header>元素內(nèi)部。新增的語義元素

article元素

section元素

nav元素

footer元素

<footer>標(biāo)簽用于定義區(qū)段（section）或文檔的頁腳。通常，該元素包含作者的姓名、文檔的版權(quán)信息、聯(lián)系方式等等。案例：<footer>江蘇鳳凰教育出版社<br>2019年10月12日</footer>新增的屬性HTML5添加了很多新屬性，常用的屬性主要有contenteditable、hidden和spellcheck。這些為全局屬性，任何元素都可以使用。

屬性名描述contenteditable規(guī)定是否可編輯元素的內(nèi)容。hidden規(guī)定元素是否被隱藏。spellcheck對用戶輸入的文本內(nèi)容進行拼寫和語法檢查。01HTML5常用標(biāo)簽及其屬性HTML5基礎(chǔ)02HTML5新增的標(biāo)簽及屬性03HTML5新增的語義元素04HTML5新增的屬性

contenteditable屬性該屬性規(guī)定是否可編輯元素的內(nèi)容，前提是該元素必須可以獲得鼠標(biāo)焦點并且其內(nèi)容不是只讀的。

該屬性有兩個值，true表示可編輯，false表示不可編輯。

contenteditable屬性

tips：

1、可編輯元素是指可以把<table>、<div>等元素變成可編輯狀態(tài)；

2、該屬性“可繼承”，若一個HTML元素的父元素是“可編輯”的，

則它默認也是可編輯的。

hidden屬性

用來設(shè)置元素是否可見。在HTML5中，大多數(shù)元素都支持hidden屬性。

該屬性有兩個值：hidden和默認值。HTML5新增的屬性0102hidden：元素會被隱藏。默認：元素會顯示。元素中的內(nèi)容是通過瀏覽器創(chuàng)建的，頁面裝載后允許使用JavaScript腳本將該屬性取消。

spellcheck屬性主要用于對input元素和textarea文本輸入框，對用戶輸入的文本內(nèi)容進行拼寫和語法檢查。

該屬性有兩個值true（默認值）和false。

spellcheck屬性0102true：默認，會檢測輸入框中的值。false：不檢測。謝謝！CSS3基礎(chǔ)01CSS3發(fā)展史及性能預(yù)覽CSS3基礎(chǔ)02CSS3選擇器03多列布局04CSS3字體05

CSS3新增文本屬性06CSS3顏色CSS3概述

CSS（CascadingStyleSheets，層疊樣式表）是一種將表示樣式應(yīng)用到標(biāo)記的系統(tǒng)。CSS不僅能對網(wǎng)頁頁面進行布局和美化，還能實現(xiàn)一些特殊的網(wǎng)頁效果，在Web開發(fā)中顯得尤為重要。CSS3是CSS技術(shù)的最新升級版本，是由AdobeSystems、Apple、Google、HP、IBM、Microsoft、Sun等需要Web界巨頭聯(lián)合組成的名為CSSWorkingGroup的組織共同協(xié)商策劃的。但目前CSS3的最終標(biāo)準(zhǔn)還沒有確定。CSS3發(fā)展史1996.122004.021998.05至今CSS1CSS2.1CSS2CSS3較為全面地規(guī)定了文檔的顯示樣式選擇器樣式屬性偽類屬性保存方式目前通用的版本，刪除了部分不被瀏覽器所支持的屬性。擴充并改進了更多強大的屬性更多強大的選擇器增強了位置模型布局、表格樣式引入媒體類型擴展偽類屬性添加光標(biāo)樣式完整的、規(guī)范權(quán)威的CSS3標(biāo)準(zhǔn)還沒有塵埃落定，但是各主流瀏覽器已經(jīng)支持其中絕大部分特性。CSS3發(fā)展史

模塊化

CSS3規(guī)范被劃分為若干個獨立的模塊。一方面利于規(guī)范及時更新和發(fā)布，另一方面設(shè)備和廠商可以有選擇地支持一部分模塊的內(nèi)容。

2002.05.15Line模塊2002.11.07Lists模塊2002.11.07Border模塊2003.05.14GeneratedandReplaceContent模塊2003.08.13PresentationLevels模塊2003.08.13Syntax模塊2004.02.24HyperlinkPresentation模塊2004.12.06Speech模塊2005.12.15CascadingandInheritance模塊2007.08.09BasicBox模塊2007.09.05GridPositioning模塊2009.03.20Animations模塊2009.03.203DTransforms模塊2009.06.18Fonts模塊2009.08.04視圖模塊TOBECONTINUED…CSS3性能預(yù)覽

更強大的選擇器

CSS3新增了3個屬性選擇器，用來匹配屬性中包含的特定的值。

CSS3性能預(yù)覽

更多的樣式選擇

CSS3新增了多欄布局、陰影、圓角、邊框圖片、形變、動畫等多個樣式屬性，簡化了前端開發(fā)人員的設(shè)計過程。

CSS3性能預(yù)覽

支持跨平臺、跨設(shè)備

CSS3改進了CSS2的媒體查詢模塊，能根據(jù)設(shè)備不同的寬度與高度、朝向（橫屏、豎屏）、分辨率等設(shè)計不同的樣式規(guī)則。01CSS3發(fā)展史及性能預(yù)覽CSS3基礎(chǔ)02CSS3選擇器03多列布局04CSS3字體05

CSS3新增文本屬性06CSS3顏色CSS3選擇器

選擇器是CSS中一個重要的內(nèi)容，可以大幅度提高開發(fā)人員書寫或修改樣式表的效率。

CSS1和CSS2定義了大部分常用選擇器，這些選擇器能滿足設(shè)計師常規(guī)設(shè)計的需求；但是它們沒有進行系統(tǒng)化，也沒有形成獨立的版塊，不利于擴展。

CSS3增加并完善了選擇器的功能，以便更靈活地匹配頁面元素。個重要的內(nèi)容，可以大幅度提高開發(fā)人員書寫或修改樣式表的效率。CSS2屬性選擇器CSS2定義了4個屬性選擇器。選擇具有attr屬性的E元素，并應(yīng)用rule指定的樣式。*[title]{color:red;}a[href]{color:red;}a[href][title]{color:red;}E[attr]{rule}CSS2屬性選擇器CSS2定義了4個屬性選擇器。選擇具有attr屬性并且值等于value的E元素，并應(yīng)用rule指定的樣式a[href=“”]{color:red}E[attr=value]{rule}CSS2屬性選擇器CSS2定義了4個屬性選擇器。選擇具有attr屬性且屬性值為用空格分隔的多個字符列表，其中任一字符等于value的E元素，并用rule指定的樣式a[href=“”]{color:red}E[attr~=value]{rule}CSS2屬性選擇器CSS2定義了4個屬性選擇器。選擇具有attr屬性且屬性值為用空格分割的多個字符列表，且以value開始的E元素，并用rule指定的樣式span[title|=big]{color:red;}E[attr|=value]{rule}CSS3屬性選擇器CSS3新增了3個屬性選擇器。選擇具有attr屬性且屬性值以value開頭的E元素，并應(yīng)用rule指定的樣式。E[attr^=value]{rule}選擇具有attr屬性且屬性值以value結(jié)尾的E元素，并應(yīng)用rule指定的樣式。E[attr$=value]{rule}選擇具有attr屬性且屬性值任意位置包含value的E元素，并應(yīng)用rule指定的樣式。E[attr*=value]{rule}

案例：添加鏈接文件圖標(biāo)

由于鏈接文檔的類型不同，鏈接文件的擴展名也會不同。使用屬性選擇器匹配a元素中href屬性值最后幾個字符，可以為不同類型的連接添加不同的顯示圖標(biāo)。CSS3

屬性選擇器CSS3結(jié)構(gòu)偽類選擇器

結(jié)構(gòu)偽類是CSS3新設(shè)計的選擇器，利用文檔結(jié)構(gòu)樹實現(xiàn)元素過濾，通過文檔結(jié)構(gòu)的相互關(guān)系來匹配特定的元素，從而減少文檔內(nèi)的class屬性和Id屬性的定義，使得文檔更加簡潔。結(jié)構(gòu)偽類E:rootE:emptychild系列type系列CSS3結(jié)構(gòu)偽類選擇器選擇匹配E所在的文檔的根元素。E:

root在HTML文檔中，根元素就是html元素。此時E:root與html類型選擇器匹配內(nèi)容相同。CSS3結(jié)構(gòu)偽類選擇器選擇匹配E元素，且該元素不含子節(jié)點。E:

empty示例<div>

<p></p>

<p>我們對中國建設(shè)國際一流大學(xué)、培養(yǎng)國際一流人才充滿自信。</p>

<p>我們的胸襟是開放的，包容并蓄。幸福不是從天降，</p>

<p>中國人民取得的成就是很了不起的，不要<span>妄自菲薄</span>，同時要<span>自強不息</span>。</p></div>p:empty

{border:1px

solid

black;

}只能匹配到第一個沒有任何內(nèi)容的p元素。其他p元素含有文本或span等其他元素，文本也屬于節(jié)點哦！CSS3結(jié)構(gòu)偽類選擇器child系列E:nth-child(n)E:first-childE:only-childE:nth-last-child(n)E:last-childCSS3結(jié)構(gòu)偽類選擇器選擇所有在其父元素中第n個位置的匹配E的子元素。child系列提示參數(shù)n可以是數(shù)字（1，2，3……）、關(guān)鍵字（odd、even）和公式（2n、2n+1)，參數(shù)的索引起始值為1。tr:nth-child(3)匹配表格里第3行的tr元素tr:nth-child(even)或tr:nth-child(2n)匹配表格的偶數(shù)行tr:nth-child(odd)或tr:nth-child(2n+1)匹配表格奇數(shù)行案例：表格隔行分色CSS3結(jié)構(gòu)偽類選擇器child系列E:nth-last-child(n)選擇所有在父元素中倒數(shù)第n個位置的匹配E的元素。與E:nth-child(n)計算順序相反，語法和用法完全一樣。E:first-child選擇位于其父元素中第一個位置且匹配E的子元素，相當(dāng)于E:nth-child(1)。E:last-child選擇位于其父元素中最后一個位置且匹配E的子元素，相當(dāng)于E:nth-last-child(1)。CSS3結(jié)構(gòu)偽類選擇器child系列E:only-child選擇其父元素只包含一個子元素，且該子元素匹配E。示例p:only-child匹配<div><p></p></div>中的p元素，但不匹配<div><h1></h1><p></p></div>中的p元素。CSS3結(jié)構(gòu)偽類選擇器type系列E:nth-of-type(n)E:first-of-typeE:only-of-typeE:nth-last-of-type(n)E:last-of-typeCSS3結(jié)構(gòu)偽類選擇器

E:nth-child(n)

E:nth-of-type(n)

E:nth-child(n)：選擇所有在其父元素中第n個位置的匹配E的子元素。所有元素先排序，再匹配E元素。

<div>

<h4>不要妄自菲薄，同時要自強不息</h4>

<p>我們對中國建設(shè)國際一流大學(xué)、培養(yǎng)國際一流人才充滿自信。</p>

<p>我們的胸襟是開放的，包容并蓄。</p>

<p>中國人民取得的成就是很了不起的，不要妄自菲薄，同時要自強不息。</p></div>12345p:nth-child(2){color:red;}先找到第二個元素，然后進行元素匹配，此時第二個元素是h4，與要求的p元素不匹配，所以字體顏色保持不變p:nth-child(3){color:red;}先找到第三個元素，然后進行元素匹配，此時第三個元素是p，與要求的p元素匹配，所以字體顏色變?yōu)榧t色CSS3結(jié)構(gòu)偽類選擇器

E:nth-child(n)

E:nth-of-type(n)

E:nth-of-type(n)：選擇所有在其父元素中同類型第n個位置的匹配E的子元素。所有E元素被分離出來單獨排序，非E子元素不參與排序。<div>

<h4>不要妄自菲薄，同時要自強不息</h4>

<p>我們對中國建設(shè)國際一流大學(xué)、培養(yǎng)國際一流人才充滿自信。</p>

<p>我們的胸襟是開放的，包容并蓄。</p>

<p>中國人民取得的成就是很了不起的，不要妄自菲薄，同時要自強不息。</p></div>123p:nth-of-type(2){color:red;}所有p元素單獨排序，之后匹配第二個p元素。CSS3

UI偽類選擇器UI偽類選擇器指定的樣式只有當(dāng)元素處于某種狀態(tài)下才起作用，在默認狀態(tài)下不起作用。未訪問狀態(tài)a:link錨元素a鼠標(biāo)懸停a:hover選定鏈接a:active已訪問狀態(tài)a:visited擴展到E元素鼠標(biāo)懸停E:hover鼠標(biāo)單擊E:active獲取焦點E:focusCSS3

UI偽類選擇器E:enabled元素處于可用狀態(tài)E:disabled元素處于不可用狀態(tài)E:read-only元素處于只讀狀態(tài)E:read-write元素處于非只讀狀態(tài)E:checked元素處于選取狀態(tài)E:default默認處于選中狀態(tài)的元素E:indeterminate任一選項被選中時整組選框狀態(tài)E:selection元素處于選中狀態(tài)案例：登錄框01CSS3發(fā)展史及性能預(yù)覽CSS3基礎(chǔ)02CSS3選擇器03多列布局04CSS3字體05

CSS3新增文本屬性06多列布局網(wǎng)頁布局

網(wǎng)頁布局是指在網(wǎng)頁中如何對標(biāo)題、導(dǎo)航欄、主要內(nèi)容、腳注等多種構(gòu)成要素進行合理的編排。

在CSS3之前，主要通過float或position屬性進行網(wǎng)頁布局，一個明顯的缺點就是各模塊底部不能對齊。positionfloatCSS3的多列布局屬性可以自動將內(nèi)容按指定的列數(shù)排列，這種布局適合純文檔版式設(shè)計或小模塊的編排，不適合做網(wǎng)頁結(jié)構(gòu)布局。

多列布局基本語法格式columns是多列布局特性的基本屬性，該屬性可以同時定義列數(shù)和每列的寬度。columns:<column-width>|<column-count>

目前Webkit引擎支持-webkit-columns私有屬性，MozillaGecko引擎支持-moz-column-width和-moz-column-count私有屬性，其他引擎暫不支持多列布局。

為了更好的兼容不同內(nèi)核的瀏覽器，CSS3中部分屬性需要添加瀏覽器的私有前綴，將某個樣式以-xx-開頭，具體如下：多列布局-moz--ms--o-只有以Webkit為內(nèi)核的瀏覽器可以解析，如Chrome、Safari。只有以Gecko為內(nèi)核的瀏覽器可以解析，如Firefox。只有以Trident為內(nèi)核的瀏覽器可以解析，如IE。只有以Presto為內(nèi)核的瀏覽器可以解析，如Opera。-webkit-多列布局基本語法格式columns是多列布局特性的基本屬性，該屬性可以同時定義列數(shù)和每列的寬度。columns:<column-width>|<column-count>column-width:<length>

auto<length>直接給定列的寬度（px，em，百分比）auto：根據(jù)瀏覽器計算值自動設(shè)置。1column-count:<integer>

auto<integer>：定義欄目的列數(shù)，取值為大于0的整數(shù)。auto：根據(jù)瀏覽器計算值自動設(shè)置。2多列布局列寬間距column-gap列高column-fill列數(shù)column-width中心線column-countcolumn-rule跨行顯示column-rule

column-gap定義列間距多列布局column-gap:<length>|normal<length>直接給定列的間距（px，em，百分比）normal：初始值，根據(jù)瀏覽器默認設(shè)置進行解析，通常為1em。

column-span定義跨列顯示column-span:1|all1：默認值，只在本欄中顯示all：橫跨所有列多列布局

column-rule定義列分隔線樣式column-rule:column-rule-width|column-rule-style|column-rule-color|transparentcolumn-rule-width:<length>column-rule-style:接受所有線的樣式column-rule-color:接受所有顏色transparent:定義邊框透明

column-fill定義列高度column-fill:auto|balanceauto:各列的高度隨其內(nèi)容的變化而自動變化balance:各列的高度將會根據(jù)內(nèi)容最多的那一列的高度進行統(tǒng)一

案例：純文檔排版《喬布斯演講選段》

多列布局

案例：小模塊排版——旅游城市01CSS3發(fā)展史及性能預(yù)覽CSS3基礎(chǔ)02CSS3選擇器03多列布局04

CSS3字體05

CSS3新增文本屬性06CSS顏色@font-face規(guī)則

@font-face是CSS3的新特性，用于定義服務(wù)器字體。通過@font-face規(guī)則，開發(fā)者便可以使用用戶計算機未安裝的字體。

基本語法格式@font-face{

font-family:<YourWebFontName>;src:<source>[<format>][,<source>[<format>]]*;

[font-weight:<weight>];

[font-style:<style>];}@font-face規(guī)則基本語法格式@font-face{

font-family:<FontName>;src:<source>[<format>][,<source>[<format>]]*;}FontName：自定義的字體名稱，最好是使用下載的默認字體source：自定義的字體的存放路徑，可以是相對路徑也可以是絕對路徑。format：自定義的字體的格式，主要用來幫助瀏覽器識別，主要：truetype、opentype、truetype-aat、embedded-opentype、svg等。

案例：自定義字體

@font-face規(guī)則Web字體圖標(biāo)

在傳統(tǒng)的網(wǎng)頁制作過程中，涉及到圖標(biāo)的問題大多用圖片進行處理，圖片有優(yōu)勢也有不足。使用圖片會增加總文件的大小和很多額外的“http請求”，增大服務(wù)器負擔(dān)。大量圖片需要下載時，增加用戶等待時間，犧牲用戶體驗。圖片通常都是矢量圖，在移動端高分辨率屏上會變的模糊。因此，有時候在“響應(yīng)式設(shè)計”中需要使用圖標(biāo)的最好解決方案就是不去使用圖片，而使用矢量的字體，即圖標(biāo)字體化。Web字體圖標(biāo)

font-awesome一個開源免費的圖標(biāo)工具，當(dāng)前的版本是4.5.0。首先去“/”地址進行下載，下載完畢后解壓目錄如下圖所示。字體文件和css文件“font-awesome.min.css”拷貝到項目中，結(jié)構(gòu)如下圖所示。該工具提供的css文件該工具提供的字體文件Web字體圖標(biāo)應(yīng)用字體圖標(biāo)主要分為兩個步驟：在頁面引入font-awesome.min.css文件。為頁面元素添加相應(yīng)的class,例如“<iclass=”fafa-comments>”,會在頁面顯示如下圖所示的圖標(biāo)。每個圖標(biāo)都有相應(yīng)的class，如果想使用其他的圖標(biāo)可以去地址：http://fontawesome.io/icons/進行查看。01CSS3發(fā)展史及性能預(yù)覽CSS3基礎(chǔ)02CSS3選擇器03多列布局04CSS3字體05

CSS3新增文本屬性06CSS3顏色新增文本屬性

CSS3在CSS2.1基礎(chǔ)上新增了幾個文本屬性：

01text-shadow：定義文本陰影或模糊效果text-overflow：定義省略文本的處理方式02word-wrap：定義文本超過指定容器的邊界時是否斷開轉(zhuǎn)行03

文本陰影新增文本屬性基本語法格式text-shadow：<length><length><length><color>length1水平方向的偏移量length2垂直方向的偏移量length3陰影模糊的偏移量color陰影顏色案例：立體浮雕效果

文本陰影新增文本屬性p{

color:#999;

text-shadow:0.1em0.1em#333;}p{ color:#fff;text-shadow:black0.1em0.1em0.2em;}p{ color:red;text-shadow:004pxwhite,

0-5px4px#ff3,

2px-10px6px#fd3,

-2px-15px11px#f80,2px-25px18px#f20;}p{

color:white;

text-shadow:-1px0black,01pxblack,

1px0black,0-1pxblack;}

溢出文本為避免超長字符的信息破壞模塊的布局，可以使用text-overflow屬性省略多出的字符。新增文本屬性基本語法格式text-overflow:clip|ellipsis|ellipsis-word010203clip：簡單裁剪ellipsis：顯示省略標(biāo)記（…），省略標(biāo)記插入的位置是最后一個字符。ellipsis-word：顯示省略標(biāo)記（…），省略標(biāo)記插入的位置是最后一個詞。

文本換行瀏覽器自帶文本自動換行的功能。在瀏覽器顯示文本時，文本會在瀏覽器或元素右端自動實現(xiàn)換行。CSS3還定義了幾個換行處理的屬性:新增文本屬性0102word-wrap：normal

break-word;

normal表示連續(xù)文本換行；break-word實現(xiàn)強制換行word-break：normal

keep-all

loose

break-strict

break-all;keep-all對于中、日、韓不允許字斷開；break-all非中、日、韓能在任意位置斷開。03white-space：normal

pre

nowrap

pre-line;nowrap強制在同一行中顯示所有文本；pre顯示預(yù)定義文本格式。

溢出文本新增文本屬性案例：消息欄01CSS3發(fā)展史及性能預(yù)覽CSS3基礎(chǔ)02CSS3選擇器03多列布局04CSS3字體05

CSS3新增文本屬性06CSS3顏色設(shè)計顏色樣式RGBopacity設(shè)計顏色樣式rgb(112,173,71)#70AD47新的顏色表示

RGBA顏色值RGBAR：紅色比重（0-255）G：綠色比重（0-255）B：藍色比重（0-255）A：透明度（0-1）示例div{background：rgba(200,125,23,0.5);}新的顏色表示

HSL顏色值HSLH：色調(diào)（0-360）S：飽和度（0%-100%）L：亮度（0%-100%）色調(diào)H：取值為任意數(shù)值，確定不同的顏色，0為紅色，60為黃色，120為綠色等。飽和度S：顏色的深淺程度、鮮艷程度，0%表示灰色，100%顏色最鮮艷。亮度L：0%最暗，表現(xiàn)為黑色，100%最亮，表現(xiàn)為白色。新的顏色表示

HSL顏色值示例div{background：hsl(200,50%,60%);}新的顏色表示

HSLA顏色值HSLAH：色調(diào)（0-360）S：飽和度（0%-100%）L：亮度（0%-100%）A：透明度（0-1）H=120S=50%L=50%A取值遞增謝謝！CSS3常用樣式01CSS3彈性盒布局CSS3常用樣式02CSS3背景設(shè)置03CSS3圓角邊框與漸變04CSS3盒子陰影與倒影彈性盒（FlexibleBox或flexbox）是CSS3的一種新的布局模式。是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時，確保元素擁有恰當(dāng)?shù)男袨榈囊环N布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

什么是彈性盒布局

CSS3彈性盒布局彈性盒子由彈性容器(Flexcontainer)和彈性子元素(Flexitem)組成。彈性容器通過設(shè)置display屬性的值為flex或inline-flex將其定義為彈性容器。彈性容器內(nèi)包含了一個或多個彈性子元素。

注意彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。彈性盒子的組成

CSS3彈性盒布局案例1：彈性子元素的顯示

彈性子元素通常在彈性盒子內(nèi)一行顯示。默認情況每個容器只有一行。

CSS3彈性盒布局設(shè)置

direction

屬性為

rtl

(right-to-left),彈性子元素的排列方式也會改變，頁面布局也跟著改變。案例2：

使用direction屬性修改排列方式

CSS3彈性盒布局

flex-direction屬性

指定了彈性子元素在父容器中的位置。flex-direction屬性基本語法格式flex-direction:row|row-reverse|column|column-reverse;row：橫向從左到右排列（左對齊），默認的排列方式。row-reverse：反轉(zhuǎn)橫向排列（右對齊，從后往前排，最后一項排在最前面。column：縱向排列。column-reverse：反轉(zhuǎn)縱向排列，從下往上排，最后一項排在最上面。

CSS3彈性盒布局案例3：

flex-direction屬性的使用flex-direction:row-reverse;flex-direction:row;flex-direction:column;flex-direction:column-reverse;

CSS3彈性盒布局CSS3背景屬性設(shè)置背景的顯示區(qū)域設(shè)置背景圖像的大小設(shè)置背景顏色和背景圖像設(shè)置背景圖像的裁剪區(qū)域

在網(wǎng)頁設(shè)計中，合理使用背景顏色和背景圖像等來美化頁面，能給讀者帶來良好的用戶體驗。

CSS3背景設(shè)置01CSS3彈性盒布局CSS3常用樣式02

CSS3背景設(shè)置03CSS3圓角邊框與漸變04CSS3盒子陰影與倒影

background-colorbackground-color用來設(shè)置背景顏色。案例1：背景顏色和背景圖像基本語法格式background-color：color|transparent;color：設(shè)置背景顏色?？梢圆捎糜⑽膯卧~、十六進制、RGB、HSL、HSLA和RGBA。transparent：表示透明，默認值。設(shè)置背景顏色和背景圖像

CSS3背景設(shè)置

background-imagebackground-image用來設(shè)置背景背景圖像。案例1：背景顏色和背景圖像基本語法格式background-image：none|url(url);none：無圖像背景。url(url)：使用絕對或相對地址指定背景圖像。還可以用URL形式引入網(wǎng)絡(luò)上的圖像。設(shè)置背景顏色和背景圖像

CSS3背景設(shè)置

案例2：背景圖像大小設(shè)置背景圖像的大小基本語法格式background-size：[<length>|<percentage>|auto]|cover|contain<length>:可以為一個或兩個浮點數(shù)值。只設(shè)置一個值表示寬度，高度等比例縮放。若設(shè)置兩個值，分別表示寬和高。<percentage>:可以為一個或兩個百分比值，表示將圖像的寬度和高度按百分比進行縮放。auto:表示原始尺寸cover:等比縮放到完全覆蓋容器。contain:等比縮放到寬度或高度與容器的寬或高相等。

background-size在CSS3中，background-size屬性用于設(shè)置背景圖像的大小。

CSS3背景設(shè)置在CSS3中，background-origin屬性用于控制背景圖像的起始點，也就是從哪里開始顯示背景圖像。

案例3：背景的顯示區(qū)域設(shè)置背景的顯示區(qū)域基本語法格式background-origin：border-box|padding-box|content-box;border-box：從border區(qū)域（含border）開始顯示背景圖像。padding-box：從padding區(qū)域（含padding）開始顯示背景圖像。content-box：從content區(qū)域開始顯示背景圖像。

background-origin

CSS3背景設(shè)置在CSS3中，background-clip屬性用于定義背景圖像的裁剪區(qū)域。

案例4：背景圖像的裁剪區(qū)域設(shè)置背景圖像的裁剪區(qū)域基本語法格式background-clip：border-box|padding-box|content-box|text;border-box：從border區(qū)域（不含border）開始向外裁剪背景。padding-box：從padding區(qū)域（不含padding）開始向外裁剪背景。content-box：從content區(qū)域開始向外裁剪背景。text：從前景內(nèi)容的形狀（比如文字）作為裁剪區(qū)域向外裁剪。使用該屬性值可以實現(xiàn)使用背景作為填充色之類的遮罩效果。

CSS3背景設(shè)置01CSS3彈性盒布局CSS3常用樣式02CSS3背景設(shè)置03CSS3圓角邊框與漸變04CSS3盒子陰影與倒影

border-radiusCSS3中的border-radius屬性可以將矩形邊框圓角化。CSS3圓角邊框基本語法格式border-radius：參數(shù)1/參數(shù)2[參數(shù)1/參數(shù)2[...]]；參數(shù)1:圓角的水平半徑。參數(shù)2:圓角的垂直半徑。值可以取1到4個，設(shè)置1個值時，四個角具有相同的弧度。設(shè)置2個、3個、4個值時，分別按照左上、右上、右下、左下的順序設(shè)置。

CSS3圓角邊框和漸變案例1：設(shè)置圓角邊框.b1{border-radius:30px;/*設(shè)置一個值時，四個角的半徑都是30px，弧度相同*/}.b2{border-radius:50px;/*四個角的半徑都是50px，顯示出圓形效果*/}.b3{border-radius:50px20px;/*左上與右下使用半徑50px，右上與左下使用半徑20px*/}.b4{border-radius:50px30px10px;/*左上使用半徑50px，右上與左下使用半徑30px，右下使用10px*/}.b5{border-radius:50px30px20px10px;/*左上50px，右上30px，右下20px,左下10px*/}.b6{border-radius:50px/20px;/*四個角的水平半徑都是50px，垂直半徑都是20px*/}.b7{border-radius:50%0;/*左上與右下使用原值的一半，右上與左下值為0，仍保持矩形角*/}.b8{border-radius:50%0px0px;/*左上使用原值的一半，右上、右下與左下值為0，仍保持矩形角*/}

CSS3圓角邊框和漸變在CSS3中，通過漸變屬性可以輕松實現(xiàn)漸變效果。CSS3的漸變屬性主要包括:線性漸變、徑向漸變和重復(fù)漸變。徑向漸變線性漸變重復(fù)漸變CSS3漸變屬性

CSS3圓角邊框和漸變

linear-gradient在線性漸變過程中，起始顏色會沿著一條直線按順序過渡到結(jié)束顏色。線性漸變基本語法格式background-image:linear-gradient(漸變角度，顏色值1，顏色值2...，顏色值n);linear-gradient：說明漸變方式為線性漸變。漸變角度：指水平線和漸變線之間的夾角，逆時針方向計算。0deg將創(chuàng)建一個從下到上的漸變，90deg將創(chuàng)建一個從左到右的漸變。顏色值：用于設(shè)置漸變顏色。其中顏色值1表示起始顏色，顏色值n表示結(jié)束顏色。

CSS3圓角邊框和漸變案例2：線性漸變.b1{background-image:linear-gradient(0deg,#00F,#0F0);}.b2{background-image:linear-gradient(90deg,#00F,#0F0);}.b3{background-image:linear-gradient(45deg,#00F50%,#0F080%);}

CSS3圓角邊框和漸變radial-gradient在徑向漸變過程中，起始顏色會從一個中心點開始，依據(jù)橢圓或圓形形狀進行擴張漸變。徑向漸變基本語法格式background-image:radial-gradient(漸變形狀圓心位置，顏色值1，顏色值2...，顏色值n);radial-gradient：說明漸變方式為徑向漸變。漸變形狀：取值可以是（a）像素值/百分比，用于定義形狀的水平和垂直半徑。（b）circle：指定圓形的徑向漸變。（c）ellipse：指定橢圓形的徑向漸變。圓心位置：用于確定元素漸變的中心位置，使用at加上關(guān)鍵詞或參數(shù)來確定。取值有：像素值/百分比，left，center，right。默認center。顏色值：用于設(shè)置漸變顏色。其中顏色值1表示起始顏色，顏色值n表示結(jié)束顏色。

CSS3圓角邊框和漸變案例3：徑向漸變.b1{background-image:radial-gradient(circleatcenter,#00F,#0F0);}.b2{background-image:radial-gradient(ellipseatleft,#00F,#0F0);}.b3{background-image:radial-gradient(130pxatbottom,#00F,#0F0);}

CSS3圓角邊框和漸變重復(fù)漸變即在一個背景上重復(fù)應(yīng)用漸變模式的情況。重復(fù)漸變包括：重復(fù)線性漸變和重復(fù)徑向漸變。重復(fù)漸變重復(fù)線性漸變語法格式background-image:repeating-linear-gradient(漸變角度，顏色值1，顏色值2...，顏色值n);重復(fù)徑向漸

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

HTML5移動Web開發(fā)任務(wù)教程PPT完整全套教學(xué)課件

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔