免费人妻中文不卡无码_日本精品爽爽van在线_久久精品国产99久久丝袜蜜桃_女强人被春药精油按摩bd电影

第 1章 HTML頁面結(jié)構(gòu)構(gòu)建1

項(xiàng)目1-1 個(gè)人簡(jiǎn)介頁面2

項(xiàng)目需求2

知識(shí)儲(chǔ)備2

1．HTML概述2

2．瀏覽器2

3．Visual Studio Code編輯器3

4．標(biāo)簽概述8

5．頁面格式化標(biāo)簽9

6．文本格式化標(biāo)簽10

7．圖像標(biāo)簽11

8．HTML實(shí)體12

項(xiàng)目實(shí)現(xiàn)13

項(xiàng)目1-2 新聞頁面14

項(xiàng)目需求14

知識(shí)儲(chǔ)備14

1．列表14

2．列表嵌套17

3．超鏈接17

4．容器標(biāo)簽18

5．元素18

項(xiàng)目實(shí)現(xiàn)19

本章小結(jié)20

課后習(xí)題20

第 2章 CSS頁面樣式美化22

項(xiàng)目2-1 文章詳情頁面23

項(xiàng)目需求23

知識(shí)儲(chǔ)備23

1．CSS概述23

2．CSS樣式規(guī)則24

3．CSS的引入方式24

4．基礎(chǔ)選擇器25

5．字體屬性25

6．字體圖標(biāo)27

7．文本外觀屬性32

8．CSS注釋34

項(xiàng)目實(shí)現(xiàn)34

項(xiàng)目2-2 下拉菜單頁面36

項(xiàng)目需求36

知識(shí)儲(chǔ)備36

1．復(fù)合選擇器36

2．偽類選擇器38

3．偽元素選擇器39

4．CSS的三大特性40

5．列表樣式屬性42

6．CSS標(biāo)準(zhǔn)盒模型43

7．邊框?qū)傩?4

8．內(nèi)邊距屬性47

9．外邊距屬性48

10．盒子的寬度和高度48

11．box-sizing屬性49

12．display屬性49

項(xiàng)目實(shí)現(xiàn)49

項(xiàng)目2-3 商城首頁51

項(xiàng)目需求51

知識(shí)儲(chǔ)備51

1．背景屬性51

2．漸變53

3．object-fit屬性55

4．浮動(dòng)布局55

5．清除浮動(dòng)56

6．語義化標(biāo)簽60

7．彈性盒布局60

8．元素的定位63

9．層疊等級(jí)屬性65

10．陰影屬性65

項(xiàng)目實(shí)現(xiàn)66

本章小結(jié)68

課后習(xí)題68

第3章 表格和表單70

項(xiàng)目3-1 圖書列表頁面70

項(xiàng)目需求70

知識(shí)儲(chǔ)備71

1．表格標(biāo)簽71

2．CSS控制表格樣式72

3．表格標(biāo)簽屬性73

項(xiàng)目實(shí)現(xiàn)74

項(xiàng)目3-2 安全教育活動(dòng)調(diào)查問卷頁面75

項(xiàng)目需求75

知識(shí)儲(chǔ)備76

1．表單標(biāo)簽76

2．

標(biāo)簽77

3．標(biāo)簽77

4．標(biāo)簽78

5．標(biāo)簽79<br><br> 6．<select>、<optgroup>、<option><br><br> 標(biāo)簽80<br><br> 項(xiàng)目實(shí)現(xiàn)81<br><br> 本章小結(jié)83<br><br> 課后習(xí)題83<br><br> 第4章 JavaScript與視頻、音頻85<br><br> 項(xiàng)目4-1 視頻播放器85<br><br> 項(xiàng)目需求85<br><br> 知識(shí)儲(chǔ)備86<br><br> 1．JavaScript概述86<br><br> 2．JavaScript的引入方式86<br><br> 3．JavaScript常用的輸入和輸出語句87<br><br> 4．JavaScript注釋87<br><br> 5．變量88<br><br> 6．?dāng)?shù)據(jù)類型89<br><br> 7．運(yùn)算符89<br><br> 8．函數(shù)91<br><br> 9．分支結(jié)構(gòu)92<br><br> 10．循環(huán)結(jié)構(gòu)94<br><br> 11．DOM簡(jiǎn)介95<br><br> 12．獲取元素95<br><br> 13．操作元素96<br><br> 14．事件97<br><br> 15．注冊(cè)事件98<br><br> 16．Math對(duì)象98<br><br> 17．<video>標(biāo)簽100<br><br> 18．video對(duì)象100<br><br> 項(xiàng)目實(shí)現(xiàn)102<br><br> 項(xiàng)目4-2 音頻播放器105<br><br> 項(xiàng)目需求105<br><br> 知識(shí)儲(chǔ)備106<br><br> 1．<audio>標(biāo)簽106<br><br> 2．a(chǎn)udio對(duì)象107<br><br> 項(xiàng)目實(shí)現(xiàn)107<br><br> 本章小結(jié)111<br><br> 課后習(xí)題111<br><br> 第5章 階段項(xiàng)目——在線學(xué)習(xí)平臺(tái)113<br><br> 任務(wù)5-1 項(xiàng)目開發(fā)準(zhǔn)備113<br><br> 項(xiàng)目分析113<br><br> 項(xiàng)目目錄結(jié)構(gòu)114<br><br> 任務(wù)5-2 快捷導(dǎo)航模塊115<br><br> 任務(wù)需求115<br><br> 任務(wù)實(shí)現(xiàn)115<br><br> 任務(wù)5-3 導(dǎo)航欄模塊115<br><br> 任務(wù)需求115<br><br> 任務(wù)實(shí)現(xiàn)116<br><br> 任務(wù)5-4 側(cè)邊導(dǎo)航欄模塊116<br><br> 任務(wù)需求116<br><br> 任務(wù)實(shí)現(xiàn)116<br><br> 任務(wù)5-5 輪播圖模塊116<br><br> 任務(wù)需求116<br><br> 任務(wù)實(shí)現(xiàn)116<br><br> 任務(wù)5-6 精品書籍推薦模塊116<br><br> 任務(wù)需求116<br><br> 任務(wù)實(shí)現(xiàn)117<br><br> 任務(wù)5-7 版權(quán)聲明模塊117<br><br> 任務(wù)需求117<br><br> 任務(wù)實(shí)現(xiàn)117<br><br> 本章小結(jié)117<br><br> 第6章 Canvas繪圖與CSS<br><br> 動(dòng)畫118<br><br> 項(xiàng)目6-1 水果銷量餅圖頁面118<br><br> 項(xiàng)目需求118<br><br> 知識(shí)儲(chǔ)備119<br><br> 1．認(rèn)識(shí)畫布119<br><br> 2．使用畫布119<br><br> 3．繪制線條120<br><br> 4．線條的樣式121<br><br> 5．路徑122<br><br> 6．填充路徑123<br><br> 7．繪制文本124<br><br> 8．繪制圓或弧線125<br><br> 項(xiàng)目實(shí)現(xiàn)125<br><br> 項(xiàng)目6-2 鮮花列表頁面128<br><br> 項(xiàng)目需求128<br><br> 知識(shí)儲(chǔ)備129<br><br> 1．過渡屬性129<br><br> 2．二維變形130<br><br> 3．三維變形132<br><br> 項(xiàng)目實(shí)現(xiàn)134<br><br> 項(xiàng)目6-3 課程宣傳頁面138<br><br> 項(xiàng)目需求138<br><br> 知識(shí)儲(chǔ)備139<br><br> 動(dòng)畫屬性139<br><br> 項(xiàng)目實(shí)現(xiàn)142<br><br> 本章小結(jié)146<br><br> 課后習(xí)題146<br><br> 第7章 移動(dòng)Web屏幕適配148<br><br> 項(xiàng)目7-1 線上問診頁面148<br><br> 項(xiàng)目需求148<br><br> 知識(shí)儲(chǔ)備149<br><br> 1．屏幕分辨率和設(shè)備像素比149<br><br> 2．視口150<br><br> 3．媒體查詢151<br><br> 4．二倍圖154<br><br> 5．rem單位155<br><br> 6．rem適配方案156<br><br> 7．Less158<br><br> 項(xiàng)目實(shí)現(xiàn)162<br><br> 項(xiàng)目7-2 音樂屋首頁頁面165<br><br> 項(xiàng)目需求165<br><br> 知識(shí)儲(chǔ)備166<br><br> 1．流式布局166<br><br> 2．vw單位和vh單位167<br><br> 項(xiàng)目實(shí)現(xiàn)168<br><br> 本章小結(jié)173<br><br> 課后習(xí)題174<br><br> 第8章 Bootstrap基礎(chǔ)入門175<br><br> 項(xiàng)目8-1 需求定制列表頁面175<br><br> 項(xiàng)目需求175<br><br> 知識(shí)儲(chǔ)備176<br><br> 1．Bootstrap概述176<br><br> 2．Bootstrap的特點(diǎn)176<br><br> 3．Bootstrap的組成177<br><br> 4．Bootstrap的下載和引入177<br><br> 5．Bootstrap布局容器181<br><br> 6．Bootstrap柵格系統(tǒng)182<br><br> 7．Bootstrap工具類184<br><br> 項(xiàng)目實(shí)現(xiàn)186<br><br> 項(xiàng)目8-2 用戶注冊(cè)頁面189<br><br> 項(xiàng)目需求189<br><br> 知識(shí)儲(chǔ)備190<br><br> 1．表單控件樣式類190<br><br> 2．表單布局方式192<br><br> 3．文本格式類194<br><br> 4．文本顏色類194<br><br> 5．背景顏色類195<br><br> 6．邊框樣式類196<br><br> 項(xiàng)目實(shí)現(xiàn)197<br><br> 本章小結(jié)200<br><br> 課后習(xí)題200<br><br> 第9章 Bootstrap組件應(yīng)用202<br><br> 項(xiàng)目9-1 輪播圖頁面202<br><br> 項(xiàng)目需求202<br><br> 知識(shí)儲(chǔ)備203<br><br> 1．什么是組件203<br><br> 2．Bootstrap組件的基本使用方法204<br><br> 3．輪播組件205<br><br> 4．定位樣式類207<br><br> 項(xiàng)目實(shí)現(xiàn)208<br><br> 項(xiàng)目9-2 課程介紹頁面210<br><br> 項(xiàng)目需求210<br><br> 知識(shí)儲(chǔ)備211<br><br> 1．浮動(dòng)樣式類211<br><br> 2．圖像樣式類211<br><br> 3．陰影樣式類212<br><br> 4．Bootstrap Icons圖標(biāo)庫213<br><br> 5．列表樣式類215<br><br> 6．卡片組件216<br><br> 7．按鈕組件218<br><br> 項(xiàng)目實(shí)現(xiàn)220<br><br> 項(xiàng)目9-3 下拉菜單導(dǎo)航欄頁面223<br><br> 項(xiàng)目需求223<br><br> 知識(shí)儲(chǔ)備224<br><br> 1．導(dǎo)航欄組件224<br><br> 2．下拉菜單組件227<br><br> 項(xiàng)目實(shí)現(xiàn)230<br><br> <br><br> 本章小結(jié)232<br><br> 課后習(xí)題233<br><br> 第 10章 綜合項(xiàng)目——在線鮮花<br><br> 商城235<br><br> 任務(wù)10-1 項(xiàng)目開發(fā)準(zhǔn)備235<br><br> 項(xiàng)目分析235<br><br> 項(xiàng)目初始化237<br><br> 任務(wù)10-2 快捷導(dǎo)航模塊238<br><br> 任務(wù)需求238<br><br> 任務(wù)實(shí)現(xiàn)238<br><br> 任務(wù)10-3 導(dǎo)航欄模塊239<br><br> 任務(wù)需求239<br><br> 任務(wù)實(shí)現(xiàn)239<br><br> 任務(wù)10-4 輪播圖模塊239<br><br> 任務(wù)需求239<br><br> 任務(wù)實(shí)現(xiàn)240<br><br> 任務(wù)10-5 服務(wù)模塊240<br><br> 任務(wù)需求240<br><br> 任務(wù)實(shí)現(xiàn)241<br><br> 任務(wù)10-6 鮮花推薦模塊241<br><br> 任務(wù)需求241<br><br> 任務(wù)實(shí)現(xiàn)242<br><br> 任務(wù)10-7 送長(zhǎng)輩鮮花模塊242<br><br> 任務(wù)需求242<br><br> 任務(wù)實(shí)現(xiàn)243<br><br> 任務(wù)10-8 曬單評(píng)價(jià)模塊244<br><br> 任務(wù)需求244<br><br> 任務(wù)實(shí)現(xiàn)245<br><br> 任務(wù)10-9 服務(wù)條款模塊245<br><br> 任務(wù)需求245<br><br> 任務(wù)實(shí)現(xiàn)246<br><br> 任務(wù)10-10 版權(quán)聲明模塊246<br><br> 任務(wù)需求246<br><br> 任務(wù)實(shí)現(xiàn)246<br><br> 本章小結(jié)246 </div> </div> <div id="eimusis" class="clear"></div> <script type="text/javascript"> function tab(a,b,c) { for(i=1;i<=b;i++){ if(c==i) { // 判斷選擇模塊 document.getElementById(a+"_mo_"+i).style.display = "block"; // 顯示模塊內(nèi)容 document.getElementById(a+"_to_"+i).className = "no"; // 改變菜單為選中樣式 } else{ // 沒有選擇的模塊 document.getElementById(a+"_mo_"+i).style.display = "none"; // 隱藏沒有選擇的模塊 document.getElementById(a+"_to_"+i).className = "q"; // 清空沒有選擇的菜單樣式 } } } </script> <div id="ocy0gwg" class="b-comment"> <div id="eokmwqy" class="mt"> <span> 你還可能感興趣</span> </div> </div> <div id="geyy8se" class="d-comment"> <ul> <li><a href="bookshow.asp?id=2464287" target="_blank"><img src="http://pic.book1993.com/pic//uploadfile/202212/9787111714057.jpg" alt="Vue.js 快速入門實(shí)戰(zhàn)" name="Pic" onerror="showImgDelay(this,'/uploadfile/202212/9787111714057.jpg',2);" width="144" height="144"></a><br><a href="bookshow.asp?id=2464287" title="Vue.js 快速入門實(shí)戰(zhàn)" target="_blank">Vue.js 快速入門實(shí)戰(zhàn)</a></li><li><a href="bookshow.asp?id=1966924" target="_blank"><img src="http://pic.book1993.com/pic//uploadfile/202011/9787302563495.jpg" alt="Web前端開發(fā)項(xiàng)目實(shí)踐教程" name="Pic" onerror="showImgDelay(this,'/uploadfile/202011/9787302563495.jpg',2);" width="144" height="144"></a><br><a href="bookshow.asp?id=1966924" title="Web前端開發(fā)項(xiàng)目實(shí)踐教程" target="_blank">Web前端開發(fā)項(xiàng)目實(shí)踐教程</a></li><li><a href="bookshow.asp?id=2048849" target="_blank"><img src="http://pic.book1993.com/pic//uploadfile/202103/9787111673699.jpg" alt="網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程（第2版）" name="Pic" onerror="showImgDelay(this,'/uploadfile/202103/9787111673699.jpg',2);" width="144" height="144"></a><br><a href="bookshow.asp?id=2048849" title="網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程（第2版）" target="_blank">網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程（第2版）</a></li><li><a href="bookshow.asp?id=2700365" target="_blank"><img src="http://pic.book1993.com/pic//uploadfile/202407/9787302659150.jpg" alt="Web前端開發(fā)基礎(chǔ)" name="Pic" onerror="showImgDelay(this,'/uploadfile/202407/9787302659150.jpg',2);" width="144" height="144"></a><br><a href="bookshow.asp?id=2700365" title="Web前端開發(fā)基礎(chǔ)" target="_blank">Web前端開發(fā)基礎(chǔ)</a></li><li><a href="bookshow.asp?id=1868186" target="_blank"><img src="http://pic.book1993.com/pic//uploadfile/202006/20200624134632503250.jpg" alt="零基礎(chǔ)學(xué)網(wǎng)頁UI設(shè)計(jì)" name="Pic" onerror="showImgDelay(this,'/uploadfile/202006/20200624134632503250.jpg',2);" width="144" height="144"></a><br><a href="bookshow.asp?id=1868186" title="零基礎(chǔ)學(xué)網(wǎng)頁UI設(shè)計(jì)" target="_blank">零基礎(chǔ)學(xué)網(wǎng)頁UI設(shè)計(jì)</a></li><li><a href="bookshow.asp?id=2615189" target="_blank"><img src="http://pic.book1993.com/pic//uploadfile/202402/9787302643357.jpg" alt="微課學(xué)Axure RP 10互聯(lián)網(wǎng)產(chǎn)品策劃與原型設(shè)計(jì)" name="Pic" onerror="showImgDelay(this,'/uploadfile/202402/9787302643357.jpg',2);" width="144" height="144"></a><br><a href="bookshow.asp?id=2615189" title="微課學(xué)Axure RP 10互聯(lián)網(wǎng)產(chǎn)品策劃與原型設(shè)計(jì)" target="_blank">微課學(xué)Axure RP 10互聯(lián)網(wǎng)產(chǎn)品策劃與原型設(shè)計(jì)</a></li> </ul> </div> <div id="mmic0ua" class="b-comment"> <div id="eomyukg" class="mt"> <span> 我要評(píng)論</span> </div> </div> <div id="aiqmiuq" class="c-comment"> <form method="post" name="comment" action="/book_comment.asp"> <table border="0" cellspacing="1" cellpadding="3" class="commentlist"> <input name=id type=hidden value="2917492"> <input name=title type=hidden value=" 響應(yīng)式Web開發(fā)項(xiàng)目教程"> <tr> <th>您的姓名</th> <td><input type="text" name="name" size="20" maxlength="20" class="form" />  驗(yàn)證碼：<input name="verifycode" type="text" size="7" style=" height:18px;" /> <img src="safecode.asp?" onClick="this.src+=Math.random()" alt="圖片看不清？點(diǎn)擊重新得到驗(yàn)證碼" style="cursor:hand;" height="18" /></td> </tr> <tr> <th>留言內(nèi)容</th> <td><textarea name="content" id="content" cols="46" rows="3" class="form-textarea" wrap=physical onKeyDown="checkMaxInput(this.form)" onKeyUp="checkMaxInput(this.form)" style="overflow:auto">