關(guān)于我們
書單推薦
新書推薦
|
Web前端實(shí)用技術(shù)示例教程 讀者對(duì)象:本書可作為高等學(xué)校計(jì)算機(jī)科學(xué)與技術(shù)、軟件工程和網(wǎng)絡(luò)工程等專業(yè)Web 前端課程的教材,也可供相關(guān)人員參考。
本書以問答的方式介紹Web 前端的相關(guān)知識(shí),分為初級(jí)篇、進(jìn)階篇、高級(jí)篇、框架篇;內(nèi)容包括JavaScript、HTML、CSS的基礎(chǔ)知識(shí),邊框效果、背景效果、形狀效果、陰影效果、動(dòng)畫效果,文本、字體技術(shù),選擇器、定時(shí)器,canvas繪圖,定位,圖片、背景美化,ES6框架、Bootstrap框架、React框架。
廖雪花,副教授,四川師范大學(xué)計(jì)算機(jī)科學(xué)學(xué)院計(jì)算機(jī)系主任,長(zhǎng)期從事計(jì)算機(jī)應(yīng)用技術(shù)、系統(tǒng)開發(fā)與集成的教學(xué)工作。
第一部分 初級(jí)篇·············································································································1
1.1 一個(gè)簡(jiǎn)單的HTML5頁(yè)面代碼是什么樣子的?·······················································.2 1.2 <html>、<body>、<head>標(biāo)簽真的可以省略嗎?··················································.2 1.3 如何安裝與使用Sublime Text? ·················································································.4 1.3.1 安裝步驟·········································································································.4 1.3.2 使用·················································································································.5 1.4 什么是tableless design頁(yè)面布局?········································································.11 1.4.1 table布局······································································································.11 1.4.2 DIV+CSS 布局······························································································.13 1.5 什么是行內(nèi)元素與塊級(jí)元素?···············································································.14 1.6 什么是元素套框結(jié)構(gòu)?···························································································.19 1.7 如何選擇正確的列表標(biāo)簽?···················································································.22 1.7.1 無(wú)序列表·······································································································.22 1.7.2 有序列表·······································································································.23 1.7.3 定義列表·······································································································.24 1.8 什么是文檔流?·······································································································.25 1.9 什么是相對(duì)定位?如何相對(duì)定位?········································································.26 1.10 什么是絕對(duì)定位?如何絕對(duì)定位?······································································.28 1.11 如何讓文本水平居中?·························································································.30 1.12 如何讓文本垂直居中?·························································································.31 1.13 如何讓元素顯示在其他元素之上?······································································.33 1.14 如何制作一面照片墻?·························································································.35 1.15 input有多少種?····································································································.37 1.15.1 傳統(tǒng)的10個(gè)輸入控件··············································································.37 1.15.2 新增的13個(gè)輸入控件··············································································.39 1.16 如何組合使用<select>和<o(jì)ption>標(biāo)簽?······························································.43 1.17 為什么<datalist>標(biāo)簽靈活又方便?······································································.45 1.18 顏色有哪幾種標(biāo)識(shí)方式?·····················································································.47 1.18.1 英文單詞表示顏色····················································································.47 1.18.2 十六進(jìn)制表示顏色····················································································.48 1.18.3 RGB表示顏色··························································································.49 1.18.4 HSL表示顏色···························································································.50 1.19 CSS的光標(biāo)功能有哪些?·····················································································.51 1.19.1 新的內(nèi)建光標(biāo)···························································································.51 1.19.2 not-allowed光標(biāo)·······················································································.51 1.19.3 none隱藏光標(biāo)···························································································.52 1.20 如何使用多媒體標(biāo)簽?·························································································.52 1.20.1 <embed>標(biāo)簽····························································································.52 1.20.2 <video>標(biāo)簽······························································································.53 1.20.3 <audio>標(biāo)簽······························································································.54 1.21 CSS屬性在JavaScript中如何使用?···································································.54 1.21.1 讀寫行內(nèi)樣式···························································································.54 1.21.2 使用style對(duì)象··························································································.55 1.21.3 編輯樣式···································································································.58 1.21.4 讀取媒體查詢···························································································.58 1.21.5 使用CSS 事件··························································································.59 1.22 JavaScript定位DOM元素的幾種方式·································································.61 1.22.1 顯示信息交互···························································································.61 1.22.2 控制臺(tái)監(jiān)控·······························································································.63 1.23 Document對(duì)象如何查找定位元素?····································································.64 1.23.1 getElementById( )定位··············································································.64 1.23.2 getElementsByClassName( )定位······························································.64 1.23.3 getElementsByTagName( )定位·································································.65 1.23.4 querySelector( )定位··················································································.67 1.24 JavaScript如何操縱DOM元素節(jié)點(diǎn)?·································································.67 1.24.1 節(jié)點(diǎn)創(chuàng)建 API ····························································································68 1.24.2 頁(yè)面修改API····························································································.69 1.24.3 節(jié)點(diǎn)查詢API····························································································.70 1.25 JavaScript如何操縱DOM元素屬性?·································································.72 1.26 JavaScript數(shù)組的創(chuàng)建方式有哪些?····································································.74 1.26.1 字面量表示法···························································································.74 1.26.2 使用Array( )構(gòu)造函數(shù)··············································································.74 1.26.3 使用Array(n)構(gòu)造函數(shù)·············································································.74 1.27 JavaScript數(shù)組函數(shù)如何使用?············································································.75 1.27.1 pop( )和push( )···························································································.75 1.27.2 shift( )和unshift( ) ······················································································.75 1.27.3 join( ) ··········································································································76 1.27.4 sort( ) ··········································································································76 1.27.5 reverse( ) ·····································································································76 1.27.6 splice( ) ·······································································································77 1.27.7 slice( ) ·········································································································77 1.27.8 concat( ) ······································································································78 1.27.9 indexOf( )和lastIndex( )·············································································.78 1.27.10 every( )和some( ) ·····················································································.78 1.27.11 fill( ) ··········································································································79 1.27.12 filter( )·······································································································79 1.27.13 find( )和findindex( )·················································································.79 1.27.14 map( )········································································································80 1.27.15 toString( )··································································································80 1.28 JavaScript 的Date對(duì)象如何使用?········································································.80 1.28.1 定義Date對(duì)象···························································································.80 1.28.2 獲取Date對(duì)象的各個(gè)時(shí)間元素·······························································.80 1.29 JavaScript的Math對(duì)象如何使用?······································································.82 1.29.1 Math.random( ) ···························································································82 1.29.2 Math.abs( ) ··································································································83 1.29.3 Math.max( )和Math.min( )········································································.83 1.29.4 取整函數(shù)···································································································.83 1.29.5 Math.sqrt( ) ·································································································84 1.29.6 對(duì)數(shù)、指數(shù)、冪函數(shù)················································································.84 1.29.7 其他Math函數(shù)·························································································.84 第二部分 進(jìn)階篇···········································································································85 2.1 如何使用background-clip屬性設(shè)置半透明邊框?················································.86 2.2 如何實(shí)現(xiàn)多重邊框的效果?···················································································.87 2.2.1 box-shadow·····································································································87 2.2.2 outline·············································································································87 2.3 如何改變背景圖的定位?·······················································································.88 2.4 如何設(shè)置邊框內(nèi)圓角效果?···················································································.89 2.5 如何設(shè)置多樣式背景?···························································································.92 2.5.1 生成條紋背景·······························································································.92 2.5.2 修改背景大小·······························································································.93 2.5.3 生成垂直條紋·······························································································.94 2.5.4 生成斜向條紋·······························································································.94 2.5.5 實(shí)現(xiàn)更多角度的漸變條紋············································································.95 2.5.6 使用一種顏色實(shí)現(xiàn)同色系條紋····································································.96 2.6 如何設(shè)置CSS漸變效果?······················································································.97 2.6.1 設(shè)置網(wǎng)格圖案·······························································································.97 2.6.2 設(shè)置波點(diǎn)圖案·······························································································.97 2.6.3 設(shè)置棋盤圖案·······························································································.98 2.7 如何實(shí)現(xiàn)背景的隨機(jī)效果?··················································································100 2.8 如何設(shè)置裝飾性的圖片邊框?··············································································102 2.9 如何設(shè)置靈活的橢圓?··························································································103 2.9.1 設(shè)置自適應(yīng)橢圓··························································································104 2.9.2 設(shè)置自適應(yīng)半橢圓·······················································································105 2.9.3 設(shè)置四分之一橢圓·······················································································106 2.10 什么是偽類?········································································································107 2.10.1 :hover 偽類·······························································································107 2.10.2 :nth-child(n)偽類······················································································107 2.10.3 :nth-of-type(n)偽類···················································································108 2.11 什么是偽元素?····································································································108 2.11.1 ::first-line偽元素······················································································109 2.11.2 ::first-letter偽元素····················································································109 2.11.3 ::before和::after偽元素···········································································109 2.12 如何根據(jù)子元素的數(shù)量來設(shè)置樣式?································································.110 2.13 如何將矩形框修改為平行四邊形框?································································.113 2.14 如何將圖片裁剪成菱形?···················································································.115 2.15 如何實(shí)現(xiàn)文本的連字符斷行?···········································································.118 2.16 如何插入換行?···································································································.118 2.17 如何實(shí)現(xiàn)文本行條紋背景?················································································121 2.18 如何調(diào)整Tab的寬度?························································································122 2.19 如何擴(kuò)大區(qū)域范圍?····························································································123 2.20 如何設(shè)置CSS元素寬度自適應(yīng)內(nèi)部元素?························································124 2.21 如何精確控制表格列寬?····················································································127 2.22 如何設(shè)置連字的字形?························································································129 2.23 什么是圖標(biāo)字體?································································································130 2.24 如何對(duì)&字符進(jìn)行美化?·····················································································132 2.25 如何自定義文本下畫線?····················································································133 2.26 如何實(shí)現(xiàn)多種文字效果?····················································································135 2.26.1 凸起效果··································································································135 2.26.2 描邊效果··································································································136 2.26.3 發(fā)光效果··································································································137 2.26.4 3D效果····································································································138 2.27 什么是JavaScript的順序結(jié)構(gòu)?··········································································139 2.28 什么是JavaScript的分支結(jié)構(gòu)?··········································································139 2.28.1 if語(yǔ)句·······································································································139 2.28.2 if…else語(yǔ)句·····························································································140 2.28.3 多重if…else語(yǔ)句····················································································140 2.28.4 嵌套if…else語(yǔ)句····················································································141 2.28.5 switch case語(yǔ)句·······················································································141 2.29 什么是Java Script的循環(huán)結(jié)構(gòu)?·········································································142 2.29.1 for循環(huán)·····································································································143 2.29.2 while循環(huán)································································································143 2.29.3 do…while循環(huán)·························································································143 2.29.4 for…in循環(huán)······························································································144 2.29.5 break和continue······················································································144 2.30 什么是定時(shí)器?····································································································145 2.30.1 setTimeout (Expression , DelayTime ) ·····················································.145 2.30.2 setInterval ( Expression,DelayTime ) ·······················································.145 2.30.3 clearTimeout (對(duì)象) ··················································································146 2.30.4 clearInteval (對(duì)象) ····················································································146 2.31 canvas繪圖技術(shù)有哪些?····················································································147 2.31.1 <canvas>標(biāo)簽的基本繪圖步驟································································147 2.31.2 canvas 繪圖中的基本方法·······································································148 2.31.3 線型相關(guān)屬性··························································································148 2.31.4 運(yùn)用canvas繪圖······················································································149 2.32 canvas圖像技術(shù)有哪些?····················································································153 2.32.1 drawImage ( )····························································································153 2.32.2 getImageData ( )和putImageData ( ) ·························································156 第三部分 高級(jí)篇·········································································································157 3.1 如何實(shí)現(xiàn)環(huán)形文字效果?······················································································158 3.2 如何實(shí)現(xiàn)切角效果?······························································································159 3.2.1 CSS漸變方式······························································································159 3.2.2 CSS裁剪路徑方式······················································································161 3.3 如何實(shí)現(xiàn)梯形標(biāo)簽頁(yè)的效果?··············································································161 3.4 如何實(shí)現(xiàn)簡(jiǎn)單餅圖效果?······················································································162 3.4.1 transform·······································································································163 3.4.2 SVG··············································································································167 3.5 如何添加多樣式背景投影?··················································································170 3.5.1 背景的單側(cè)投影··························································································170 3.5.2 背景的鄰邊投影··························································································171 3.5.3 背景的雙側(cè)投影··························································································171 3.6 如何給不規(guī)則圖形設(shè)置陰影?··············································································172 3.7 如何給圖片添加染色效果?··················································································173 3.7.1 濾鏡(filter)·······························································································173 3.7.2 混合模式······································································································174 3.8 如何實(shí)現(xiàn)毛玻璃效果?··························································································175 3.9 如何實(shí)現(xiàn)模擬折角效果?······················································································179 3.9.1 45°折角········································································································179 3.9.2 其他角度折角······························································································180 3.10 如何實(shí)現(xiàn)自定義復(fù)選框?····················································································183 3.10.1 自定義復(fù)選框··························································································183 3.10.2 開關(guān)按鈕··································································································185 3.11 如何實(shí)現(xiàn)輪播圖?································································································186 3.12 如何設(shè)置背景的遮罩效果?················································································190 3.12.1 偽元素······································································································190 3.12.2 box-shadow·······························································································191 3.12.3 backdrop ···································································································191 3.13 如何實(shí)現(xiàn)背景的弱化?························································································192 3.14 什么是固定定位?································································································194 3.15 如何設(shè)置背景圖集(一圖多用)?·····································································195 3.16 如何實(shí)現(xiàn)頁(yè)面滾動(dòng)提示?····················································································197 3.17 如何利用CSS實(shí)現(xiàn)圖片對(duì)比?···········································································199 3.18 如何實(shí)現(xiàn)背景覆蓋和內(nèi)容定寬?·········································································202 3.19 如何實(shí)現(xiàn)元素垂直居中?····················································································204 3.20 如何設(shè)置頁(yè)面頁(yè)腳?····························································································206 3.21 如何實(shí)現(xiàn)動(dòng)畫的緩動(dòng)效果?················································································209 3.21.1 實(shí)現(xiàn)彈跳動(dòng)畫的緩動(dòng)效果·······································································209 3.21.2 實(shí)現(xiàn)彈性過渡效果···················································································210 3.22 如何設(shè)置圖片逐幀顯示?····················································································212 3.23 如何設(shè)置文字的閃爍效果?················································································214 3.23.1 CSS 動(dòng)畫實(shí)現(xiàn)··························································································214 3.23.2 普通的閃爍效果·······················································································215 3.24 如何實(shí)現(xiàn)文本內(nèi)容逐個(gè)顯示?············································································216 3.25 如何實(shí)現(xiàn)平滑的動(dòng)畫效果?················································································217 3.26 如何實(shí)現(xiàn)沿環(huán)形路徑平移的動(dòng)畫效果?·····························································219 3.27 什么是CSS變量?·······························································································222 3.27.1 CSS 中聲明一個(gè)變量···············································································222 3.27.2 使用JavaScript操作CSS變量·······························································223 3.28 如何編輯展示后的頁(yè)面?····················································································225 3.29 如何利用CSS Grid實(shí)現(xiàn)響應(yīng)式布局?·······························································226 第四部分 框架篇·········································································································231 4.1 ES6框架··················································································································232 4.1.1 ECMAScript是什么?它與JavaScript有什么關(guān)系?·······························232 4.1.2 ES6中的let、const關(guān)鍵字有什么區(qū)別,如何使用它們?······················232 4.1.3 ES6用什么更簡(jiǎn)單的方法處理字符串?····················································234 4.1.4 Set和Map是什么?有什么作用?····························································236 4.1.5 ES6對(duì)Object類型做了哪些升級(jí)優(yōu)化?···················································241 4.1.6 ES6對(duì)函數(shù)有哪些擴(kuò)展?···········································································243 4.1.7 解構(gòu)賦值的規(guī)則是什么?有哪些用途?····················································246 4.1.8 數(shù)組如何擴(kuò)展?··························································································248 4.1.9 什么是Number?························································································252 4.1.10 JavaScript中如何聲明一個(gè) “類”?··························································254 4.1.11 如何優(yōu)雅地處理異步操作?·····································································257 4.1.12 ES6中的Proxy有什么作用?··································································263 4.1.13 什么是JavaScript Generator?···································································266 4.2 Bootstrap框架·········································································································270 4.2.1 Bootstrap是什么?為什么使用它?···························································270 4.2.2 如何開始使用Bootstrap?·············································································271 4.2.3 如何運(yùn)用Bootstrap進(jìn)行自適應(yīng)?······························································273 4.2.4 如何使用Bootstrap的組件?······································································276 4.2.5 如何使用Bootstrap工具類?······································································289 4.3 React 框架··············································································································292 4.3.1 為什么要使用React?·················································································292 4.3.2 什么是JSX語(yǔ)法?······················································································293 4.3.3 如何創(chuàng)建React項(xiàng)目?················································································294 4.3.4 React如何渲染元素?···················································································296 4.3.5 什么是React組件?如何定義一個(gè)組件?···················································297 4.3.6 如何給React組件添加樣式?····································································299 4.3.7 state與props有何區(qū)別?············································································301 4.3.8 React生命周期有哪些?·············································································302 4.3.9 React元素的事件處理有何不同?·····························································305 4.3.10 React條件渲染如何實(shí)現(xiàn)?·······································································307 4.3.11 key的作用是什么?··················································································309 4.3.12 受控組件與非受控組件有何區(qū)別?·························································310
你還可能感興趣
我要評(píng)論
|