整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天發(fā)了一篇干貨，似乎沒人看，好吧，我們來說說技術(shù)吧。
HTML5專題是隨性更新，不一定每天更新這個(gè)專題。
一個(gè)HTML5文檔的最簡單結(jié)構(gòu)是：
結(jié)構(gòu)
相比常規(guī)的html更為精簡
<header><section><footer><nav><article><aside>
1、頁眉header、整個(gè)頁面的頭部
2、正文article、博文或者新聞的展現(xiàn)
3、頁腳footer、一般用于呈現(xiàn)頁面底部的相關(guān)信息，可以放在body最下面，也可以放在article的最下面，只要記住它的作用是呈現(xiàn)其他信息，且不能相互嵌套
4、導(dǎo)航nav、可以出現(xiàn)在header，也可以出現(xiàn)在footer，也可以出現(xiàn)在section，只要保證語義化，即用作導(dǎo)航功能，如配合footer就可以表示為如下形式
5、側(cè)邊欄aside、用于頁面上一些與主題聯(lián)系不大而相對獨(dú)立的區(qū)域，通常用于邊欄，例如展示以下內(nèi)容：快速鏈接、最多訪問、登錄注冊等
6、文檔中的節(jié)section、通常表示一段專題性的內(nèi)容，一般會(huì)帶有標(biāo)題，應(yīng)用的典型場景有文章的章節(jié)、標(biāo)簽對話框中的標(biāo)簽頁、或者論文中有編號(hào)的部分，section可以說語義化強(qiáng)于div，但是弱于article，也可以這么說吧，article標(biāo)簽是特殊的section，section是特殊的div，語義遞減。對于 section 和 article 的區(qū)分乍看比較難，其實(shí)重點(diǎn)就是看看這段內(nèi)容脫離了整體是不是還能作為一個(gè)完整的、獨(dú)立的內(nèi)容而存在，這里面的重點(diǎn)又在完整身上。因?yàn)槠鋵?shí)說起來 section 包含的內(nèi)容也能算作獨(dú)立的一塊，但是它只能算是組成整體的一部分，article 才是一個(gè)完整的整體。
那么section所用到的結(jié)構(gòu)可以如下幾種形式：
①
②
通過上面可以看出，section可以應(yīng)用的場景很多，但是需要注意的就是保證語義化。
通過第三點(diǎn)所列出的標(biāo)簽，可以對網(wǎng)站的大綱做一個(gè)總結(jié)，并不代表正確的大綱就是如此，但是可以起到借鑒作用。
當(dāng)然了，頁面結(jié)構(gòu)的設(shè)計(jì)完全取決于開發(fā)人員，但是為了更好的體現(xiàn)HTML5的語義化原則，清楚的認(rèn)識(shí)每個(gè)標(biāo)簽所代表的語義就很重要，這里所列出的文檔結(jié)構(gòu)只是一種代表，在<section>里面可以包含更多的新的標(biāo)簽，諸如<figure><video><hgroup>等，都需要根據(jù)需求來確定。
對于使用不支持HTML5的瀏覽器的用戶，同樣有解決的辦法：
可以在<head></head>內(nèi)部以注釋的形式(這樣的注釋只對IE(包括那些國產(chǎn)的IE內(nèi)核的瀏覽器)有效)引用這樣一個(gè)js，它托管在Google開源服務(wù)器上，它可以讓IE8及以下版本的ie也支持那些新的html5標(biāo)簽(包括IE6).
以上全部還必須使用CSS形成自己的樣式，所謂語義，僅僅是開發(fā)人員在查看的頁面的時(shí)候可以很清晰的知道頁面結(jié)構(gòu)，何處為頭部何處為內(nèi)容。
更多前端小知識(shí)，盡在https://blog.imcyk.com
網(wǎng)頁設(shè)計(jì)與制作》
大作業(yè)報(bào)告
學(xué)院：**學(xué)院
姓名：
學(xué)號(hào)：
專業(yè):
摘要：宮崎駿（Miyazaki Hayao，1941年1月5日-），日本知名動(dòng)畫導(dǎo)演、動(dòng)畫師及漫畫家， 出生于東京都文京區(qū)，1963年進(jìn)入東映動(dòng)畫公司，1985年與高煙勛共同創(chuàng)立古卜力工作案，其出品的動(dòng)漫電影以精湛的技術(shù)、動(dòng)人的故事和溫暖的風(fēng)格在世界動(dòng)漫界獨(dú)樹一幟，能與美國迪士尼、 夢工廠的作品相比肩，受到全世界不分種族、不分國籍、不分文化的各類觀眾的一致好評。其動(dòng)國作品大多涉及人類與自然之間的關(guān)系、和平主義及女權(quán)運(yùn)動(dòng)。宮崎駿在日本動(dòng)畫界占有超重里級 的地位，更在全球動(dòng)畫界具有無可替代的地位，迪士尼稱他為“動(dòng)畫界的黑澤明，《時(shí)代周刊》評價(jià)他為全球最具影響力的人物。
下面是我對web簡單的一個(gè)應(yīng)用，利用dreamwave工具，和photoshop軟件設(shè)計(jì)了一個(gè)具有個(gè)人風(fēng)格的個(gè)人網(wǎng)站，首先我先從網(wǎng)站設(shè)計(jì)的方向和目的、網(wǎng)站設(shè)計(jì)中涉及的知識(shí)點(diǎn)、網(wǎng)站設(shè)計(jì)的整個(gè)流程出發(fā)，然后通過自己設(shè)計(jì)的這個(gè)個(gè)人網(wǎng)站作品來說明并演示一個(gè)完整的網(wǎng)站制作過程。本論文詳細(xì)的介紹了整個(gè)網(wǎng)站設(shè)計(jì)的全過程。雖然還有一些不足之處，但頁面整體比較美觀大方，具有線上店鋪風(fēng)格，效果良好。
設(shè)計(jì)主要包括以下幾個(gè)版塊：
1.人物介紹板塊
2.采訪視頻板塊
3.手稿欣賞板塊
4.主要作品模塊
網(wǎng)站規(guī)劃思想
宮崎駿（Miyazaki Hayao，1941年1月5日-），日本知名動(dòng)畫導(dǎo)演、動(dòng)畫師及漫畫家， 出生于東京都文京區(qū)，1963年進(jìn)入東映動(dòng)畫公司，1985年與高煙勛共同創(chuàng)立古卜力工作案，其出品的動(dòng)漫電影以精湛的技術(shù)、動(dòng)人的故事和溫暖的風(fēng)格在世界動(dòng)漫界獨(dú)樹一幟，能與美國迪士尼、 夢工廠的作品相比肩，受到全世界不分種族、不分國籍、不分文化的各類觀眾的一致好評。其動(dòng)國作品大多涉及人類與自然之間的關(guān)系、和平主義及女權(quán)運(yùn)動(dòng)。宮崎駿在日本動(dòng)畫界占有超重里級 的地位，更在全球動(dòng)畫界具有無可替代的地位，迪士尼稱他為“動(dòng)畫界的黑澤明，《時(shí)代周刊》評價(jià)他為全球最具影響力的人物。
作為宮崎駿的動(dòng)畫迷，我結(jié)合課上所需的HTML網(wǎng)頁知識(shí)設(shè)計(jì)一個(gè)介紹宮崎駿的網(wǎng)頁，包含圖文、視頻等多種素材可以選擇。
網(wǎng)站的目錄結(jié)構(gòu)如下：
css ------存放CSS文件
imgs ------存放圖片文件
js -------存放js文件
index.html -----------人物介紹頁面
yinyue.html -----------采訪視頻頁面
shougao.html ---------手稿欣賞頁面
liuyan.html---------主要作品頁面
綜合知識(shí)的運(yùn)用情況
2、使用鏈接：為方便讀者的查閱，在各頁面n****欄都設(shè)置了頁面鏈接。
3、插入跳轉(zhuǎn)菜單為了使讀者能快捷的回到自己感興趣的頁面，于是在各個(gè)頁面都插入了跳轉(zhuǎn)菜單。
網(wǎng)頁中涉及的知識(shí)點(diǎn)
1、可視化網(wǎng)站設(shè)計(jì)制作軟件dreamweaver的熟練使用，站點(diǎn)的創(chuàng)建、導(dǎo)入以及管理；
2、主頁的創(chuàng)建和設(shè)置，模塊的保存與應(yīng)用和子網(wǎng)頁的創(chuàng)建、完成；
3、用photoshop軟件對圖片素材進(jìn)行必要的處理；
4、網(wǎng)站整體布局和超鏈接的添加；
遇到的問題及解決辦法
難點(diǎn):
1.body背景圖片顯示問題
2.頁面美觀度不夠高，Dreamewver CS6軟件應(yīng)用不夠熟練，軟件中所涉及得制作方法以及工具沒有更好的應(yīng)用。
解決辦法：
1.配色原則：避免網(wǎng)頁雜、亂，有時(shí)候單一色彩不為也是一種獨(dú)特，用色柔和，減少視覺混亂，對比度強(qiáng)的色彩不能應(yīng)用于一般網(wǎng)站。
2.字體問題：字體是整個(gè)網(wǎng)頁最醒目的部分，若字體不協(xié)調(diào)會(huì)給人一種枯燥的感覺，避免用雜色字體，防止瀏覽者眼花繚亂。
3.制作習(xí)慣：制作一個(gè)網(wǎng)頁首要的是完美的構(gòu)思，應(yīng)該先構(gòu)思好再動(dòng)手制作，素材搜集完整，根據(jù)主題選材，不能脫離主題，確保所用材料與主題相關(guān)。
4.完整性：網(wǎng)站的基本格式完整，相關(guān)鏈接，友情鏈接必不可少，這也增加了網(wǎng)頁的方便性
5.合適選取適當(dāng)尺寸的背景圖片非常重要
網(wǎng)頁截圖
首頁（index.html）:使用了
HTML5結(jié)構(gòu)標(biāo)簽，對宮崎駿的事跡進(jìn)行了高度概括。
頭部:（一個(gè)頂部圖片和n****）
中間:
尾部:
2 采訪視頻:使用video標(biāo)簽嵌入一個(gè)本地mp4視頻
3手稿欣賞:使用無框線的三行兩列的表格對手稿進(jìn)行布局排列
4 主要作品：使用帶有框線和背景色的表格對主要作品進(jìn)行羅列，內(nèi)部文字居中，超鏈接加藍(lán)色下劃線。
心得與體會(huì)：
建立一個(gè)網(wǎng)站就像蓋一幢大樓一樣，它是一個(gè)系統(tǒng)工程，有自己特定的工作流程，你只有遵循這個(gè)步驟，按部就班地一步步來，才能設(shè)計(jì)出一個(gè)滿意的網(wǎng)站。首先，我們要確立網(wǎng)站主題。網(wǎng)站主題就是你建立的網(wǎng)站所要包含的主要內(nèi)容，一個(gè)網(wǎng)站必須要有一個(gè)明確的主題。特別是對于像我這樣的個(gè)人網(wǎng)站，你不可能像綜合網(wǎng)站那樣做得內(nèi)容大而全，包羅萬象。你沒有這個(gè)能力，也沒這個(gè)精力。網(wǎng)站的主題無定則，只要是你感興趣的，任何內(nèi)容都可以，但主題要鮮明，在你的主題范圍內(nèi)內(nèi)容做到大而全、精而深。
然后，我們要找材料。明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。常言道：“巧婦難為無米之炊”。要想讓自己的網(wǎng)站有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集得材料越多，以后制作網(wǎng)站就越容易。材料既可以從圖書、報(bào)紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁的素材。
找到材料后，我們還要規(guī)劃網(wǎng)站。一個(gè)網(wǎng)站設(shè)計(jì)得成功與否，很大程度上決定于設(shè)計(jì)者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設(shè)計(jì)師設(shè)計(jì)大樓一樣，圖紙?jiān)O(shè)計(jì)好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時(shí)駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個(gè)性、有特色，具有吸引力。如何規(guī)劃網(wǎng)站的每一項(xiàng)具體內(nèi)容，我們在下面會(huì)有詳細(xì)介紹。
做好以上三步之后，我們就要選擇合適的制作工具。盡管選擇什么樣的工具并不會(huì)影響你設(shè)計(jì)網(wǎng)頁的好壞，但是一款功能強(qiáng)大、使用簡單的軟件往往可以起到事半功倍的效果。網(wǎng)頁制作涉及的工具比較多，首先就是網(wǎng)頁制作工具了，在這里，我們一般都是用有“網(wǎng)絡(luò)三劍客”之稱的Dreamweaver、Fireworks、flash來制作網(wǎng)頁，對于圖片部分的處理，個(gè)人覺得Photoshop比較好用。
最后，我們就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實(shí)了，這是一個(gè)復(fù)雜而細(xì)致的過程，一定要按照先大后小、先簡單后復(fù)雜來進(jìn)行制作。所謂先大后小，就是說在制作網(wǎng)頁時(shí)，先把大的結(jié)構(gòu)設(shè)計(jì)好，然后再逐步完善小的結(jié)構(gòu)設(shè)計(jì)。所謂先簡單后復(fù)雜，就是先設(shè)計(jì)出簡單的內(nèi)容，然后再設(shè)計(jì)復(fù)雜的內(nèi)容，以便出現(xiàn)問題時(shí)好修改。在制作網(wǎng)頁時(shí)要多靈活運(yùn)用模板，這樣可以大大提高制作效率。網(wǎng)頁做好之后，就要發(fā)布到Web服務(wù)器上，才能夠讓全世界的朋友觀看，還要不斷地進(jìn)行宣傳，這樣才能讓更多的朋友認(rèn)識(shí)它。
以上就是我對于網(wǎng)頁制作的一些個(gè)人心得，由于本人的技術(shù)還不是很成熟，還存在很多的不足(如：背景過于單調(diào)和網(wǎng)頁布置不合理)。選擇學(xué)習(xí)這門課是很正確的選擇，雖然在以后不會(huì)再有機(jī)會(huì)去上了，但我還是會(huì)通過各種方式繼續(xù)頁設(shè)計(jì)和制作的，同時(shí)很感謝帶我入門的徐兵老師，讓我有機(jī)會(huì)去學(xué)習(xí)有關(guān)網(wǎng)頁的知識(shí)，謝謝！
HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》
本書內(nèi)容
《HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》秉承“思政引領(lǐng)，立德樹人”的教育理念，自然融入多維度、深層次的思政元素，全面對標(biāo)企業(yè)和行業(yè)需求；引入現(xiàn)代Web前端開發(fā)的核心技術(shù)，如Flex布局、Grid布局，以及人工智能編程插件，同時(shí)融入企業(yè)開發(fā)實(shí)踐，確保學(xué)習(xí)內(nèi)容與實(shí)際工作緊密相關(guān)。全書以一個(gè)完整案例為主線，結(jié)合綜合項(xiàng)目實(shí)戰(zhàn)操作，體現(xiàn)育人、應(yīng)用和創(chuàng)新三項(xiàng)能力。《HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》配套提供課程思政元素、案例源代碼、PPT課件、課后習(xí)題與答案、微課視頻、教案、教學(xué)大綱、章節(jié)測試、云題庫、實(shí)驗(yàn)報(bào)告、學(xué)習(xí)通在線課程、企業(yè)高頻面試題、學(xué)科競賽真題等豐富的教學(xué)資源，并設(shè)有QQ群提供線上學(xué)習(xí)跟蹤和指導(dǎo)服務(wù)。
《HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》共分14章，系統(tǒng)地講解Web前端開發(fā)的核心技術(shù)，主要內(nèi)容包括Web前端開發(fā)概述、HTML5基礎(chǔ)、HTML5頁面元素和屬性、表單、CSS3基礎(chǔ)、CSS3修飾頁面元素、CSS3高級選擇器、CSS3盒子模型、浮動(dòng)與定位、CSS3高級應(yīng)用、網(wǎng)頁布局、Flex布局、Grid布局等，并提供“大學(xué)生參軍入伍專題網(wǎng)站”和“文創(chuàng)商城”兩個(gè)實(shí)戰(zhàn)案例。
本書作者
盧欣欣，副教授。長期從事高校教學(xué)工作，專注Web應(yīng)用開發(fā)，項(xiàng)目開發(fā)經(jīng)驗(yàn)豐富。主講《Web程序設(shè)計(jì)》《高級程序設(shè)計(jì)》《軟件開發(fā)綜合實(shí)踐》等課程，先后主編教材2部，參編教材3部。在慕課網(wǎng)上線的《企業(yè)網(wǎng)站綜合布局實(shí)戰(zhàn)》課程學(xué)習(xí)人數(shù)超15萬人。
崔仲遠(yuǎn)，副教授，畢業(yè)于北京交通大學(xué)。長期從事高校教學(xué)工作和軟件項(xiàng)目開發(fā)工作，實(shí)戰(zhàn)開發(fā)經(jīng)驗(yàn)豐富。先后承擔(dān)《網(wǎng)頁特效設(shè)計(jì)》《Web前端基礎(chǔ)》《跨平臺(tái)腳本開發(fā)技術(shù)》等多門課程的教學(xué)任務(wù)，發(fā)表學(xué)術(shù)論文多篇，主編教材2部，參編教材3部、專著1部。主持省級教改項(xiàng)目1項(xiàng)、科研項(xiàng)目1項(xiàng)。
本書讀者
《HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》既可作為本專科院校計(jì)算機(jī)相關(guān)專業(yè)的Web程序設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)與制作等課程的教材，也可作為Web應(yīng)用開發(fā)人員的自學(xué)手冊和技術(shù)參考書。
本書目錄
第1章 Web前端開發(fā)概述 1
1.1 Web前端開發(fā)職責(zé) 1
1.2 Web前端開發(fā)相關(guān)概念 2
1.3 Web前端開發(fā)相關(guān)技術(shù) 3
1.3.1 Web標(biāo)準(zhǔn) 3
1.3.2 HTML 4
1.3.3 CSS 4
1.3.4 JavaScript 5
1.4 Web前端開發(fā)工具 5
1.4.1 代碼編輯工具：VSCode 6
1.4.2 代碼運(yùn)行工具：瀏覽器 8
1.4.3 開發(fā)者工具 9
1.4.4 人工智能輔助編程工具 10
1.5 網(wǎng)站設(shè)計(jì)與開發(fā)流程 11
1.6 實(shí)戰(zhàn)案例：網(wǎng)頁顯示“社會(huì)主義核心價(jià)值觀” 12
1.7 本章小結(jié) 13
第2章 HTML5基礎(chǔ) 14
2.1 HTML5語法基礎(chǔ) 14
2.1.1 HTML文檔結(jié)構(gòu) 14
2.1.2 HTML標(biāo)簽語法 17
2.1.3 HTML注釋 18
2.2 文本控制標(biāo)簽 19
2.2.1 標(biāo)題標(biāo)簽 19
2.2.2 段落標(biāo)簽 20
2.2.3 換行標(biāo)簽 20
2.2.4 文本格式化標(biāo)簽 21
2.2.5 特殊字符 22
2.3 圖像標(biāo)簽 23
2.3.1 網(wǎng)頁常用圖像格式 23
2.3.2 圖像標(biāo)簽的使用 24
2.3.3 相對路徑與絕對路徑 26
2.4 超鏈接標(biāo)簽 27
2.4.1 文本鏈接 27
2.4.2 圖像鏈接 28
2.4.3 書簽（錨點(diǎn)）鏈接 28
2.4.4 其他鏈接 30
2.5 列表 30
2.5.1 有序列表 31
2.5.2 無序列表 32
2.5.3 定義列表 34
2.5.4 嵌套列表 35
2.6 表格 36
2.6.1 表格結(jié)構(gòu) 36
2.6.2 表格標(biāo)簽 37
2.7 視頻和音頻標(biāo)簽 41
2.7.1 視頻標(biāo)簽 41
2.7.2 音頻標(biāo)簽 42
2.8 其他標(biāo)簽 42
2.8.1 預(yù)格式化標(biāo)簽 42
2.8.2 水平線標(biāo)簽 43
2.8.3 行內(nèi)容器標(biāo)簽 43
2.9 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”兵役登記頁面 44
2.10 本章小結(jié) 46
第3章 HTML5頁面元素和屬性 47
3.1 文檔結(jié)構(gòu)標(biāo)簽 47
3.1.1標(biāo)簽 47
3.1.2標(biāo)簽 49
3.1.3標(biāo)簽 50
3.1.4標(biāo)簽 51
3.1.5標(biāo)簽 53
3.1.6標(biāo)簽 53
3.1.7和標(biāo)簽 54
3.1.8標(biāo)簽 55
3.2 交互元素 55
3.2.1 標(biāo)簽 55
3.2.2 標(biāo)簽 56
3.2.3標(biāo)簽 57
3.3 文本層次語義標(biāo)簽 58
3.3.1 標(biāo)簽 58
3.3.2 標(biāo)簽 59
3.3.3 標(biāo)簽 60
3.4 全局屬性 61
3.5 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”頁面結(jié)構(gòu) 62
3.6 本章小結(jié) 64
第4章 表單 65
4.1 表單概述 65
4.2標(biāo)簽 67
4.3 標(biāo)簽 68
4.3.1 單行文本框 69
4.3.2 密碼框 69
4.3.3 文件域 70
4.3.4 單選按鈕和復(fù)選框 71
4.3.5 隱藏域 73
4.3.6 按鈕 73
4.3.7 HTML5新增輸入元素 76
4.4 標(biāo)簽 78
4.5 標(biāo)簽 79
4.6 選擇列表標(biāo)簽 80
4.7 多行文本框標(biāo)簽 83
4.8 表單常用屬性 84
4.9 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”網(wǎng)上咨詢表單 86
4.10 本章小結(jié) 88
第5章 CSS3基礎(chǔ) 89
5.1 CSS概述 89
5.2 CSS語法規(guī)則 90
5.3 CSS樣式的引入方法 91
5.3.1 行內(nèi)樣式表 91
5.3.2 內(nèi)部樣式表 92
5.3.3 外部樣式表 93
5.4 CSS基本選擇器 94
5.4.1 標(biāo)簽選擇器 94
5.4.2 ID選擇器 95
5.4.3 類選擇器 95
5.4.4 通用選擇器 97
5.5 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”公共樣式表制作 97
5.6 本章小結(jié) 98
第6章 CSS3修飾頁面元素 99
6.1 CSS字體樣式 99
6.1.1 字體粗細(xì)屬性 99
6.1.2 字體風(fēng)格屬性 100
6.1.3 字體大小屬性 101
6.1.4 字體族屬性 103
6.1.5 字體屬性 106
6.2 CSS文本樣式 107
6.2.1 行高屬性 107
6.2.2 顏色屬性 109
6.2.3 文本水平對齊屬性 110
6.2.4 首行縮進(jìn)屬性 111
6.2.5 文本修飾屬性 111
6.2.6 字符間距屬性 112
6.2.7 字間距屬性 113
6.2.8 字母大小寫屬性 114
6.2.9 文本陰影效果屬性 115
6.3 CSS表格樣式 116
6.4 CSS表單樣式 118
6.4.1 單行文本框美化 119
6.4.2 按鈕美化 120
6.4.3 下拉列表美化 120
6.5 CSS列表樣式 122
6.6 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”在線咨詢頁面 123
6.7 本章小結(jié) 126
第7章 CSS3高級選擇器 127
7.1 組合選擇器 127
7.1.1 交集選擇器 127
7.1.2 并集選擇器 128
7.1.3 后代選擇器 129
7.1.4 子元素選擇器 130
7.1.5 相鄰兄弟選擇器 131
7.1.6 通用兄弟選擇器 132
7.2 屬性選擇器 133
7.3 偽類選擇器 134
7.4 偽元素選擇器 136
7.5 CSS三大特性 138
7.6 本章小結(jié) 141
第8章 CSS3盒子模型 142
8.1 盒子模型概述 142
8.1.1 認(rèn)識(shí)盒子模型 142
8.1.2
標(biāo)簽 144
8.2 盒子模型的相關(guān)屬性 144
8.2.1 內(nèi)容區(qū)域的寬度和高度 144
8.2.2 邊框 145
8.2.3 內(nèi)邊距 152
8.2.4 外邊距 153
8.3 陰影 155
8.4 box-sizing 156
8.5 背景屬性 158
8.5.1 背景顏色 158
8.5.2 背景圖像 158
8.5.3 圖像平鋪方式 158
8.5.4 背景圖像位置 160
8.5.5 背景圖像固定 161
8.5.6 背景圖像大小 161
8.5.7 背景裁剪 163
8.5.8 背景復(fù)合屬性 164
8.5.9 CSS精靈圖 165
8.6 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”登錄頁面 166
8.7 本章小結(jié) 169
第9章 浮動(dòng)與定位 170
9.1 標(biāo)準(zhǔn)文檔流 170
9.2 元素的分類 171
9.2.1 塊級元素、行內(nèi)元素與行內(nèi)塊元素 171
9.2.2 元素的類型轉(zhuǎn)換 172
9.3 元素的浮動(dòng) 173
9.3.1 設(shè)置浮動(dòng) 174
9.3.2 清除浮動(dòng) 176
9.4 元素的定位 180
9.4.1 定位的概念 180
9.4.2 定位屬性 181
9.4.3 靜態(tài)定位 181
9.4.4 相對定位 182
9.4.5 絕對定位 183
9.4.6 固定定位 186
9.4.7 粘性定位 187
9.4.8 層疊等級屬性 188
9.5 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”輪播圖效果 190
9.6 本章小結(jié) 192
第10章 CSS3高級應(yīng)用 193
10.1 變換 193
10.1.1 旋轉(zhuǎn) 194
10.1.2 傾斜 195
10.1.3 縮放 196
10.1.4 平移 197
10.1.5 變換原點(diǎn) 198
10.2 過渡 200
10.3 動(dòng)畫 202
10.4 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”CSS3高級應(yīng)用 205
10.5 本章小結(jié) 208
第11章 網(wǎng)頁布局 209
11.1 網(wǎng)頁布局概述 209
11.1.1 網(wǎng)頁布局的概念 209
11.1.2 網(wǎng)頁布局的流程 210
11.1.3 常見的網(wǎng)頁布局方法 211
11.2 網(wǎng)頁布局命名規(guī)范 211
11.3 常見布局的實(shí)現(xiàn) 212
11.3.1 單列布局 212
11.3.2 兩列常規(guī)布局 214
11.3.3 三列常規(guī)布局 216
11.3.4 兩列自適應(yīng)等高布局 217
11.3.5 三列自適應(yīng)布局 219
11.4 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”首頁主體部分 223
11.5 本章小結(jié) 225
第12章 Flex布局 226
12.1 Flex布局概述 226
12.2 Flex布局相關(guān)概念 227
12.3 容器屬性 227
12.3.1 display屬性 228
12.3.2 flex-direction屬性 228
12.3.3 flex-wrap屬性 230
12.3.4 justify-content屬性 232
12.3.5 align-items屬性 233
12.3.6 align-content屬性 235
12.4 項(xiàng)目屬性 236
12.4.1 order屬性 236
12.4.2 flex-grow屬性 237
12.4.3 flex-shrink屬性 239
12.4.4 flex-basis屬性 240
12.4.5 flex屬性 241
12.5 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”導(dǎo)航條 242
12.6 本章小結(jié) 244
第13章 Grid布局 245
13.1 Grid布局概述 245
13.2 Grid布局相關(guān)概念 246
13.3 容器屬性 246
13.3.1 display屬性 247
13.3.2 劃分網(wǎng)格 248
13.3.3 行間隔和列間隔 252
13.3.4 項(xiàng)目對齊方式 253
13.4 項(xiàng)目屬性 255
13.4.1 grid-column和grid-row屬性 255
13.4.2 grid-area屬性 257
13.5 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”視頻展播列表 258
13.6 本章小結(jié) 260
第14章 Web前端項(xiàng)目綜合實(shí)踐——文創(chuàng)商城 261
14.1 項(xiàng)目概述 261
14.2 需求分析 262
14.3 原型設(shè)計(jì) 262
14.4 公共部分的設(shè)計(jì)與實(shí)現(xiàn) 265
14.4.1 重置樣式 265
14.4.2 頁面頭部 265
14.4.3 頁面底部 268
14.4.4 懸浮側(cè)邊欄 270
14.5 首頁的設(shè)計(jì)與實(shí)現(xiàn) 271
14.5.1 甄選好物版塊 271
14.5.2 國博文房版塊 274
14.6 商品列表頁的設(shè)計(jì)與實(shí)現(xiàn) 277
14.6.1 商品類型篩選 277
14.6.2 分頁導(dǎo)航 278
14.7 商品詳情頁的設(shè)計(jì)與實(shí)現(xiàn) 279
14.8 本章小結(jié) 283
編輯推薦
1HTML5與CSS3是Web前端開發(fā)的兩大核心技術(shù)，它們不僅是Web前端開發(fā)工程師必須掌握的技能，也是高校一門重要的Web前端課程內(nèi)容
2《HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》以“從項(xiàng)目中來到項(xiàng)目中去”為主旨，從Web前端開發(fā)的基本概念入手，系統(tǒng)介紹HTML5、CSS3網(wǎng)頁編程技巧。
3《HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》采取“知識(shí)點(diǎn)講解+示例解析+案例詳講+高頻面試題+實(shí)踐操作+學(xué)科競賽真題”的遞進(jìn)式教學(xué)模式，引導(dǎo)讀者理解理論知識(shí)，掌握開發(fā)方法，學(xué)會(huì)復(fù)雜的網(wǎng)站設(shè)計(jì)技能，全面提升讀者的Web前端開發(fā)能力。
4《HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》配套資源非常豐富，包括思政元素、案例源代碼、PPT課件、微課視頻、習(xí)題與答案、教案、教學(xué)大綱、章節(jié)測試、云題庫、實(shí)驗(yàn)報(bào)告、學(xué)習(xí)通在線課程，能幫助讀者快速掌握HTML5與CSS3前端技術(shù)。
本文摘自《HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》，獲出版社和作者授權(quán)發(fā)布。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
