本課程從前端開發(fā)環(huán)境開始講解，課程內(nèi)容既包含企業(yè)中制作網(wǎng)頁(yè)的基礎(chǔ)知識(shí)，又包含企業(yè)PC端網(wǎng)頁(yè)和移動(dòng)端網(wǎng)頁(yè)的制作流程，通過每日案例、學(xué)成在線和小兔鮮兒、極速問診、酷我手機(jī)網(wǎng)頁(yè)、騰訊全端等多個(gè)項(xiàng)目掌握多端網(wǎng)頁(yè)制作技巧，輕松學(xué)習(xí)HTML5和CSS3。

　　課程共分為：HTML5基礎(chǔ)、HTML5進(jìn)階、CSS3基礎(chǔ)、CSS3進(jìn)階、CSS3盒子模型、Flex 布局、Flex實(shí)戰(zhàn)項(xiàng)目-學(xué)成在線、定位和高級(jí)技巧、綜合實(shí)戰(zhàn)項(xiàng)目-小兔鮮兒、平面與空間轉(zhuǎn)換、動(dòng)畫、移動(dòng)端網(wǎng)頁(yè)布局、響應(yīng)式網(wǎng)頁(yè)布局。

  課程亮點(diǎn)  

　　1.全網(wǎng)更全面、實(shí)用的前端基礎(chǔ)課教程，內(nèi)容包含 PC 端和移動(dòng)端網(wǎng)頁(yè)制作;

　　2.內(nèi)容更貼合企業(yè)開發(fā)：采用流行布局方案 Flex，弱化過舊知識(shí)浮動(dòng)；講解開發(fā)最常用的移動(dòng)端適配方案，rem和vw/vh；使用LESS預(yù)處理器開發(fā)頁(yè)面; 使用 PxCook 測(cè)量工具，100%還原設(shè)計(jì)稿;

　　3.每日課程都配備企業(yè)實(shí)際案例;

　　4.每日作業(yè)齊全：既學(xué)又習(xí);

　　5.豐富的配套資料：代碼、講義、筆記、大綱等;

  適用人群  

　　· 對(duì)前端開發(fā)感興趣的在校生及應(yīng)屆畢業(yè)生;

　　· 對(duì)目前職業(yè)有進(jìn)一步提升需求，希望從事前端行業(yè)高薪崗位的在職人員;

　　· 對(duì)前端開發(fā)感興趣，希望快速入門前端開發(fā)的相關(guān)人員;

  課程內(nèi)容  

　　2023新版前端基礎(chǔ)入門教程HTML5+CSS3+移動(dòng)Web(滑動(dòng)查看)

　　第1節(jié) - 01-前端基礎(chǔ)導(dǎo)學(xué)課程

　　第2節(jié) - 02-第一天課程介紹

　　第3節(jié) - 03-標(biāo)簽語(yǔ)法

　　第4節(jié) - 04-HTML的基本骨架

　　第5節(jié) - 05-標(biāo)簽的關(guān)系

　　第6節(jié) - 06-注釋

　　第7節(jié) - 07-排版標(biāo)簽-標(biāo)題和段落

　　第8節(jié) - 08-換行和水平線標(biāo)簽

　　第9節(jié) - 09-文本格式化標(biāo)簽

　　第10節(jié) - 10-圖像標(biāo)簽

　　第11節(jié) - 11-路徑-相對(duì)和絕對(duì)

　　第12節(jié) - 12-超鏈接標(biāo)簽

　　第13節(jié) - 13-多媒體標(biāo)簽-音頻和視頻

　　第14節(jié) - 14-綜合案例1-個(gè)人簡(jiǎn)介

　　第15節(jié) - 15-綜合案例2-vue簡(jiǎn)介

　　第16節(jié) - 16-第二天課程介紹

　　第17節(jié) - 17-列表-無(wú)序和有序和定義列表

　　第18節(jié) - 18-表格-基本使用與表格結(jié)構(gòu)標(biāo)簽

　　第19節(jié) - 19-合并單元格

　　第20節(jié) - 20-表單-input標(biāo)簽

　　第21節(jié) - 21-表單-下拉菜單

　　第22節(jié) - 22-表單-文本域

　　第23節(jié) - 23-表單-label標(biāo)簽

　　第24節(jié) - 24-表單-按鈕

　　第25節(jié) - 25-div和span標(biāo)簽和字體實(shí)體

　　第26節(jié) - 26-綜合案例1-體育新聞列表

　　第27節(jié) - 27-綜合案例2-注冊(cè)信息

　　第28節(jié) - 28-第三天課程介紹

　　第29節(jié) - 29-體驗(yàn)CSS

　　第30節(jié) - 30-CSS引入方式

　　第31節(jié) - 31-選擇器-標(biāo)簽和類

　　第32節(jié) - 32-選擇器-id和通配符

　　第33節(jié) - 33-畫盒子

　　第34節(jié) - 34-字體修飾屬性-大小和粗細(xì)和傾斜

　　第35節(jié) - 35-行高

　　第36節(jié) - 36-字體族

　　第37節(jié) - 37-font屬性

　　第38節(jié) - 38-文本修飾屬性-縮進(jìn)和對(duì)齊和修飾線

　　第39節(jié) - 39-文字顏色

　　第40節(jié) - 40-調(diào)試工具

　　第41節(jié) - 41-綜合案例一-新聞詳情

　　第42節(jié) - 42-綜合案例二-CSS簡(jiǎn)介

　　第43節(jié) - 43-第四天課程介紹

　　第44節(jié) - 44-復(fù)合選擇器

　　第45節(jié) - 45-偽類選擇器.

　　第46節(jié) - 46-CSS三大特性

　　第47節(jié) - 47-Emmet寫法

　　第48節(jié) - 48-背景屬性-拆分寫法

　　第49節(jié) - 49-背景屬性-復(fù)合寫法

　　第50節(jié) - 50-顯示模式

　　第51節(jié) - 51-綜合案例一-熱詞

　　第52節(jié) - 52-綜合案例二-banner效果

　　第53節(jié) - 53-第五天課程介紹

　　第54節(jié) - 54-結(jié)構(gòu)偽類選擇器

　　第55節(jié) - 55-偽元素選擇器

　　第56節(jié) - 56-PxCook用法

　　第57節(jié) - 57-盒子模型-組成

　　第58節(jié) - 58-盒子模型-邊框線

　　第59節(jié) - 59-盒子模型-內(nèi)邊距

　　第60節(jié) - 60-盒子模型-尺寸計(jì)算

　　第61節(jié) - 61-版心居中

　　第62節(jié) - 62-清除默認(rèn)樣式

　　第63節(jié) - 63-內(nèi)容溢出overflow屬性

　　第64節(jié) - 64-外邊距問題-合并和塌陷

　　第65節(jié) - 65-行內(nèi)元素垂直內(nèi)外邊距

　　第66節(jié) - 66-圓角與盒子陰影

　　第67節(jié) - 67-綜合案例一-產(chǎn)品卡片

　　第68節(jié) - 68-綜合案例二-新浪新聞

　　第69節(jié) - 69-第六天課程介紹

　　第70節(jié) - 70-標(biāo)準(zhǔn)流

　　第71節(jié) - 71-浮動(dòng)-基本使用與布局

　　第72節(jié) - 72-浮動(dòng)-清除浮動(dòng)

　　第73節(jié) - 73-浮動(dòng)-總結(jié)

　　第74節(jié) - 74-flex布局-體驗(yàn)

　　第75節(jié) - 75-flex布局-組成

　　第76節(jié) - 76-flex布局-主軸與側(cè)軸對(duì)齊方式

　　第77節(jié) - 77-flex布局-修改主軸方向

　　第78節(jié) - 78-flex布局-彈性伸縮比

　　第79節(jié) - 79-flex布局-彈性換行與行對(duì)齊方式

　　第80節(jié) - 80-綜合案例-抖音解決方案

　　第81節(jié) - 81-第七天課程介紹

　　第82節(jié) - 82-準(zhǔn)備工作-項(xiàng)目目錄與版心

　　第83節(jié) - 83-網(wǎng)頁(yè)制作思路

　　第84節(jié) - 84-header區(qū)域-整體布局

　　第85節(jié) - 85-header區(qū)域-logo

　　第86節(jié) - 86-header區(qū)域-導(dǎo)航

　　第87節(jié) - 87-header區(qū)域-搜索區(qū)域

　　第88節(jié) - 88-header區(qū)域-用戶區(qū)域

　　第89節(jié) - 89-banner區(qū)域

　　第90節(jié) - 90-精品推薦區(qū)域

　　第91節(jié) - 91-推薦課程區(qū)域

　　第92節(jié) - 92-前端開發(fā)工程師區(qū)域

　　第93節(jié) - 93-版權(quán)區(qū)域

　　第94節(jié) - 94-第八天課程介紹

　　第95節(jié) - 95-定位-相對(duì)和絕對(duì)和固定

　　第96節(jié) - 96-堆疊順序z-index

　　第97節(jié) - 97-定位總結(jié)

　　第98節(jié) - 98-CSS精靈-基本使用

　　第99節(jié) - 99-案例-CSS精靈-京東服務(wù)

　　第100節(jié) - 100-字體圖標(biāo)-下載和使用

　　第101節(jié) - 101-字體圖標(biāo)-上傳

　　第102節(jié) - 102-垂直對(duì)齊方式vertical-align

　　第103節(jié) - 103-過渡屬性

　　第104節(jié) - 104-修飾屬性-透明度與光標(biāo)類型

　　第105節(jié) - 105-綜合案例-淘寶輪播圖

　　第106節(jié) - 106-第九天課程介紹

　　第107節(jié) - 107-搭建項(xiàng)目目錄

　　第108節(jié) - 108-網(wǎng)頁(yè)頭部SEO三大標(biāo)簽

　　第109節(jié) - 109-Favicon圖標(biāo)與版心

　　第110節(jié) - 110-快捷導(dǎo)航

　　第111節(jié) - 111-頭部-布局

　　第112節(jié) - 112-頭部-logo

　　第113節(jié) - 113-頭部-導(dǎo)航

　　第114節(jié) - 114-頭部-搜索

　　第115節(jié) - 115-頭部-購(gòu)物車

　　第116節(jié) - 116-底部-布局

　　第117節(jié) - 117-底部-服務(wù)區(qū)域

　　第118節(jié) - 118-底部-幫助中心

　　第119節(jié) - 119-底部-版權(quán)

　　第120節(jié) - 120-banner區(qū)域

　　第121節(jié) - 121-新鮮好物區(qū)域

　　第122節(jié) - 122-人氣推薦

　　第123節(jié) - 123-熱門品牌區(qū)域

　　第124節(jié) - 124-生鮮-標(biāo)題

　　第125節(jié) - 125-生鮮-內(nèi)容布局

　　第126節(jié) - 126-生鮮-產(chǎn)品內(nèi)容

　　第127節(jié) - 127-生鮮-過渡效果

　　第128節(jié) - 128-最新專題-布局

　　第129節(jié) - 129-最新專題-內(nèi)容

　　第130節(jié) - 130-最新專題-定位文字

　　未完待續(xù)，黑馬老師996更新中......