首頁技術(shù)文章正文

26小時掌握前端html5+css3+項目案例【黑馬程序員】

更新時間:2021-12-02 來源:黑馬程序員 瀏覽量:

采用實戰(zhàn)式教學(xué),一線大廠的綜合案例,用最短的路徑講解每個技術(shù)點,每章節(jié)都自成閉環(huán)。 課程中和課程尾配備兩個實戰(zhàn)項目,項目一類型是企業(yè)站,快速的將基礎(chǔ)知識點進行反復(fù)練習(xí);項目二類型是電商站,基于項目一升級難度,掌握更復(fù)雜的網(wǎng)頁效果的開發(fā)流程和布局標(biāo)準。嚴格按照專業(yè)的開發(fā)流程:專業(yè)的測量工具,做到100%還原設(shè)計稿;編碼規(guī)范對標(biāo)一線大廠開發(fā)標(biāo)準,做到從頭到尾的專業(yè)開發(fā)。讓同學(xué)們學(xué)習(xí)中即可切身體會一線大廠的開發(fā)流程和標(biāo)準。


視頻下載/資料下載指路http://yun.itheima.com/course/946.html
在線觀看bilibili.com/video/BV1Kg411T7t9?spm_id_from=333.999.0.0


  課程亮點:

1. 實戰(zhàn)式教學(xué):每章節(jié)案例都取自一線大廠;

2. 多元化項目:項目選型涵蓋企業(yè)站、電商站、門戶網(wǎng)站等等;

3. 專業(yè)的開發(fā)流程:專業(yè)的測量工具,做到100%還原設(shè)計稿;編碼規(guī)范對標(biāo)一線大廠開發(fā)標(biāo)準,做到從頭到尾的專業(yè)開發(fā)。

  適用人群:

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

2. 對目前職業(yè)有進一步提升需求,希望從事前端行業(yè)高薪崗位的在職人員

3. 對前端開發(fā)感興趣,希望快速入門前端開發(fā)的相關(guān)人員

  課程內(nèi)容:

1HTML認知

基礎(chǔ)班導(dǎo)學(xué)-精講與實戰(zhàn)

HTML認知-01-初識-網(wǎng)頁組成和本質(zhì)

HTML認知-02-了解-初識-瀏覽器

HTML認知-03-初識-web標(biāo)準

HTML認知-04-HTML感知

HTML認知-05-HTML骨架

HTML認知-06-vscode的簡介和使用

HTML認知-07-注釋

HTML認知-08-標(biāo)簽組成和關(guān)系

HTML認知-09-標(biāo)題和段落

HTML認知-10-換行和水平線標(biāo)簽

HTML認知-11-文本格式化標(biāo)簽

HTML認知-12-圖片-基本使用

HTML認知-13-圖片-屬性

HTML認知-14-絕對路徑

HTML認知-15-相對路徑-同級和下級

HTML認知-16-相對路徑-上級

HTML認知-17-音頻標(biāo)簽

HTML認知-18-視頻標(biāo)簽

HTML認知-19-超鏈接

HTML認知-20-綜合案例-招聘

HTML認知-21-綜合案例-跳轉(zhuǎn)-index

HTML認知-22-綜合案例-跳轉(zhuǎn)-其他頁面

2HTML基礎(chǔ)

HTML基礎(chǔ)-01-列表-使用場景

HTML基礎(chǔ)-02-列表-無序和有序

HTML基礎(chǔ)-03-列表-自定義

HTML基礎(chǔ)-04-表格-使用

HTML基礎(chǔ)-05-表格-表格標(biāo)題和表頭單元格

HTML基礎(chǔ)-06-表格-結(jié)構(gòu)標(biāo)簽

HTML基礎(chǔ)-07-表格-合并單元格

HTML基礎(chǔ)-08-表單-應(yīng)用場景

HTML基礎(chǔ)-09-表單-input基本使用

HTML基礎(chǔ)-10-表單-input-占位符(提示信息)

HTML基礎(chǔ)-11-表單-單選功能和默認選中

HTML基礎(chǔ)-12-表單-上傳多個文件

HTML基礎(chǔ)-13-表單-按鈕-input

HTML基礎(chǔ)-14-表單-按鈕button

HTML基礎(chǔ)-15-表單-下拉菜單

HTML基礎(chǔ)-16-表單-文本域

HTML基礎(chǔ)-17-表單-label標(biāo)簽

HTML基礎(chǔ)-18-語義化標(biāo)簽

HTML基礎(chǔ)-19-字符實體

HTML基礎(chǔ)-20-綜合案例-學(xué)生信息表

HTML基礎(chǔ)-21-綜合案例-表單

3CSS基礎(chǔ)+CSS進階

CSS基礎(chǔ)-01-體驗css

CSS基礎(chǔ)-02-CSS引入方式

CSS基礎(chǔ)-03-選擇器-標(biāo)簽

CSS基礎(chǔ)-04-選擇器-類

CSS基礎(chǔ)-05-選擇器-id

CSS基礎(chǔ)-06-選擇器-通配符

CSS基礎(chǔ)-07-文字基本樣式

CSS基礎(chǔ)-08-文字-字體

CSS基礎(chǔ)-09-拓展-層疊性

CSS基礎(chǔ)-10-font復(fù)合屬性

CSS基礎(chǔ)-11-文本縮進

CSS基礎(chǔ)-12-水平對齊方式

CSS基礎(chǔ)-13-文本修飾線

CSS基礎(chǔ)-14-行高

CSS基礎(chǔ)-15-谷歌調(diào)試工具

CSS基礎(chǔ)-16-拓展-顏色取值

CSS基礎(chǔ)-17-拓展-標(biāo)簽居中

CSS基礎(chǔ)-18-綜合案例1-標(biāo)題完成

CSS基礎(chǔ)-19-綜合案例1-新聞-內(nèi)容

CSS基礎(chǔ)-20-綜合案例2-圖片完成

CSS基礎(chǔ)-21-綜合案例2-產(chǎn)品-文字效果

CSS進階-01-選擇器-后代

CSS進階-02-選擇器-子代

CSS進階-03-選擇器-并集

CSS進階-04-選擇器-交集

CSS進階-05-選擇器-偽類

CSS進階-06-emmet語法

CSS進階-07-背景-背景色

CSS進階-08-背景-背景圖

CSS進階-09-背景-背景平鋪

CSS進階-10-背景-背景位置

CSS進階-11-背景-background

CSS進階-12-背景圖和img的區(qū)別

CSS進階-13-顯示模式-塊

CSS進階-14-顯示模式-行內(nèi)

CSS進階-15-顯示模式-行內(nèi)塊

CSS進階-16-顯示模式-轉(zhuǎn)換

CSS進階-17-拓展-標(biāo)簽嵌套

CSS進階-18-CSS特性-繼承性

CSS進階-19-CSS特性-層疊性

CSS進階-20-綜合案例1

CSS進階-21-綜合案例2

4Redis教程第三天

CSS盒子模型-01-優(yōu)先級-基本測試

CSS盒子模型-02-優(yōu)先級-疊加計算

CSS盒子模型-03-優(yōu)先級-計算題

CSS盒子模型-04-谷歌-排錯

CSS盒子模型-05-PxCook

CSS盒子模型-06-組成

CSS盒子模型-07-瀏覽器效果

CSS盒子模型-08-內(nèi)容width和height

CSS盒子模型-09-border使用方法

CSS盒子模型-10-尺寸計算-border

CSS盒子模型-11-案例

CSS盒子模型-12-新浪導(dǎo)航-布局div

CSS盒子模型-13-新浪導(dǎo)航-內(nèi)容a

CSS盒子模型-14-padding-多值

CSS盒子模型-15-尺寸-border和padding

CSS盒子模型-16-新浪導(dǎo)航-padding優(yōu)化

CSS盒子模型-17-內(nèi)減模式

CSS盒子模型-18-外邊距

CSS盒子模型-19-清除默認樣式

CSS盒子模型-20-版心居中

CSS盒子模型-21-綜合案例-新聞列表-div布局

CSS盒子模型-22-綜合案例-新聞列表-標(biāo)題

CSS盒子模型-23-綜合案例-新聞列表-內(nèi)容

CSS盒子模型-24-外邊距-問題

CSS盒子模型-25-行內(nèi)元素的垂直內(nèi)外邊距

5CSS定位裝飾

CSS定位裝飾-01-定位-作用和使用步驟

CSS定位裝飾-02-定位-相對relative

CSS定位裝飾-03-了解-定位-注意事項

CSS定位裝飾-04-定位-絕對absolute-參照瀏覽器

CSS定位裝飾-05-定位-子絕父相

CSS定位裝飾-06-案例-學(xué)成在線-hot

CSS定位裝飾-07-定位-居中

CSS定位裝飾-08-定位-位移居中

CSS定位裝飾-09-案例-二維碼

CSS定位裝飾-10-案例-banner

CSS定位裝飾-11-定位-固定

CSS定位裝飾-12-定位-顯示層級

CSS定位裝飾-13-vertical-align-01

CSS定位裝飾-14-vertical-align-02

CSS定位裝飾-15-光標(biāo)類型

CSS定位裝飾-16-圓角邊框-基本使用

CSS定位裝飾-17-圓角邊框-工作場景

CSS定位裝飾-18-溢出顯示效果-overflow

CSS定位裝飾-19-顯示隱藏-基本使用

CSS定位裝飾-20-案例-二維碼顯示隱藏

CSS定位裝飾-21-透明屬性opacity

6CSS浮動

CSS浮動-01-結(jié)構(gòu)偽類-基本用法

CSS浮動-02-結(jié)構(gòu)偽類-公式

CSS浮動-03-偽元素

CSS浮動-04-標(biāo)準流

CSS浮動-05-體驗行內(nèi)塊問題

CSS浮動-06-作用

CSS浮動-07-特點

CSS浮動-08-綜合案例-小米布局

CSS浮動-09-拓展-CSS屬性順序

CSS浮動-10-綜合案例-小米產(chǎn)品-左右結(jié)構(gòu)

CSS浮動-11-綜合案例-小米產(chǎn)品-li

CSS浮動-12-綜合案例-導(dǎo)航

CSS浮動-13-清除浮動-場景搭建

CSS浮動-14-清除浮動-額外標(biāo)簽

CSS浮動-15-清除浮動-單偽元素

CSS浮動-16-清除浮動-雙偽元素

CSS浮動-17-清除浮動-overflow

7學(xué)成在線項目

學(xué)成在線項目-01-準備工作

學(xué)成在線項目-02-版心和清除默認樣式

學(xué)成在線項目-03-header布局

學(xué)成在線項目-04-logo和nav布局

學(xué)成在線項目-05-nav內(nèi)容完成

學(xué)成在線項目-06-搜索-布局和文本框

學(xué)成在線項目-07-搜索-按鈕

學(xué)成在線項目-08-用戶區(qū)域

學(xué)成在線項目-09-banner-布局

學(xué)成在線項目-10-banner-left完成

學(xué)成在線項目-11-banner-right-標(biāo)題

學(xué)成在線項目-12-banner-right-內(nèi)容

學(xué)成在線項目-13-banner-right-全部課程

學(xué)成在線項目-14-精品推薦

學(xué)成在線項目-15-精品課程-標(biāo)題

學(xué)成在線項目-16-精品課程內(nèi)容

學(xué)成在線項目-17-版權(quán)區(qū)域-布局

學(xué)成在線項目-18-版權(quán)區(qū)域-內(nèi)容

8小兔仙兒項目

小兔鮮項目主體-01-banner-圖

小兔鮮項目主體-02-banner-側(cè)導(dǎo)航-布局

小兔鮮項目主體-03-banner-側(cè)導(dǎo)航-文字內(nèi)容

小兔鮮項目主體-04-banner-箭頭

小兔鮮項目主體-05-banner-圓點

小兔鮮項目主體-06-新鮮好物-標(biāo)題

小兔鮮項目主體-07-新鮮好物-內(nèi)容-布局

小兔鮮項目主體-08-新鮮好物-內(nèi)容完成

小兔鮮項目主體-09-新鮮好物-新品文字

小兔鮮項目主體-10-生鮮-標(biāo)題-布局

小兔鮮項目主體-11-生鮮區(qū)域

小兔鮮項目主體-12-生鮮-內(nèi)容-布局

小兔鮮項目搭建-01-CSS精靈-作用

小兔鮮項目搭建-02-CSS精靈-使用

小兔鮮項目搭建-03-背景圖縮放

小兔鮮項目搭建-04-盒子陰影

小兔鮮項目搭建-05-過渡

小兔鮮項目搭建-06-骨架標(biāo)簽

小兔鮮項目搭建-07-SEO

小兔鮮項目搭建-08-favicon-標(biāo)題圖標(biāo)

小兔鮮項目搭建-09-項目目錄

小兔鮮項目搭建-10-項目代碼準備

小兔鮮項目搭建-11-快捷導(dǎo)航-布局

小兔鮮項目搭建-12-快捷導(dǎo)航-內(nèi)容

小兔鮮項目搭建-13-header-布局

小兔鮮項目搭建-14-logo和導(dǎo)航

小兔鮮項目搭建-15-搜索

小兔鮮項目搭建-16-購物車

小兔鮮項目搭建-17-版權(quán)-布局

小兔鮮項目搭建-18-版權(quán)-li內(nèi)容完成

小兔鮮項目搭建-19-版權(quán)底部

點擊查看更多

猜你喜歡:

30天精通JavaWeb IDEA版【黑馬程序員】

Web前端HTML5+CSS3+移動Web全套【黑馬程序員最新課程】

jQuery和vue的區(qū)別是什么?【前端面試題】

Dreamweaver屬性面板和常用功能介紹【web前端】

黑馬程序員web前端培訓(xùn)

分享到:
在線咨詢 我要報名
和我們在線交談!