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

26小時(shí)掌握前端html5+css3+項(xiàng)目案例【黑馬程序員】

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

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


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


  課程亮點(diǎn):

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

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

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

  適用人群:

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

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

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

  課程內(nèi)容:

1HTML認(rèn)知

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

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

HTML認(rèn)知-02-了解-初識-瀏覽器

HTML認(rèn)知-03-初識-web標(biāo)準(zhǔn)

HTML認(rèn)知-04-HTML感知

HTML認(rèn)知-05-HTML骨架

HTML認(rèn)知-06-vscode的簡介和使用

HTML認(rèn)知-07-注釋

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

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

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

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

HTML認(rèn)知-12-圖片-基本使用

HTML認(rèn)知-13-圖片-屬性

HTML認(rèn)知-14-絕對路徑

HTML認(rèn)知-15-相對路徑-同級和下級

HTML認(rèn)知-16-相對路徑-上級

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

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

HTML認(rèn)知-19-超鏈接

HTML認(rèn)知-20-綜合案例-招聘

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

HTML認(rèn)知-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-表單-單選功能和默認(rèn)選中

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

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-字符實(shí)體

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

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

3CSS基礎(chǔ)+CSS進(jìn)階

CSS基礎(chǔ)-01-體驗(yàn)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-文本縮進(jìn)

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進(jìn)階-01-選擇器-后代

CSS進(jìn)階-02-選擇器-子代

CSS進(jìn)階-03-選擇器-并集

CSS進(jìn)階-04-選擇器-交集

CSS進(jìn)階-05-選擇器-偽類

CSS進(jìn)階-06-emmet語法

CSS進(jìn)階-07-背景-背景色

CSS進(jìn)階-08-背景-背景圖

CSS進(jìn)階-09-背景-背景平鋪

CSS進(jìn)階-10-背景-背景位置

CSS進(jìn)階-11-背景-background

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

CSS進(jìn)階-13-顯示模式-塊

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

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

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

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

CSS進(jìn)階-18-CSS特性-繼承性

CSS進(jìn)階-19-CSS特性-層疊性

CSS進(jìn)階-20-綜合案例1

CSS進(jìn)階-21-綜合案例2

4Redis教程第三天

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

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

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

CSS盒子模型-04-谷歌-排錯(cuò)

CSS盒子模型-05-PxCook

CSS盒子模型-06-組成

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

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

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

CSS盒子模型-10-尺寸計(jì)算-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-清除默認(rèn)樣式

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-了解-定位-注意事項(xiàng)

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浮動(dòng)

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

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

CSS浮動(dòng)-03-偽元素

CSS浮動(dòng)-04-標(biāo)準(zhǔn)流

CSS浮動(dòng)-05-體驗(yàn)行內(nèi)塊問題

CSS浮動(dòng)-06-作用

CSS浮動(dòng)-07-特點(diǎn)

CSS浮動(dòng)-08-綜合案例-小米布局

CSS浮動(dòng)-09-拓展-CSS屬性順序

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

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

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

CSS浮動(dòng)-13-清除浮動(dòng)-場景搭建

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

CSS浮動(dòng)-15-清除浮動(dòng)-單偽元素

CSS浮動(dòng)-16-清除浮動(dòng)-雙偽元素

CSS浮動(dòng)-17-清除浮動(dòng)-overflow

7學(xué)成在線項(xiàng)目

學(xué)成在線項(xiàng)目-01-準(zhǔn)備工作

學(xué)成在線項(xiàng)目-02-版心和清除默認(rèn)樣式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8小兔仙兒項(xiàng)目

小兔鮮項(xiàng)目主體-01-banner-圖

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

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

小兔鮮項(xiàng)目主體-04-banner-箭頭

小兔鮮項(xiàng)目主體-05-banner-圓點(diǎn)

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

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

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

小兔鮮項(xiàng)目主體-09-新鮮好物-新品文字

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

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

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

小兔鮮項(xiàng)目搭建-01-CSS精靈-作用

小兔鮮項(xiàng)目搭建-02-CSS精靈-使用

小兔鮮項(xiàng)目搭建-03-背景圖縮放

小兔鮮項(xiàng)目搭建-04-盒子陰影

小兔鮮項(xiàng)目搭建-05-過渡

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

小兔鮮項(xiàng)目搭建-07-SEO

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

小兔鮮項(xiàng)目搭建-09-項(xiàng)目目錄

小兔鮮項(xiàng)目搭建-10-項(xiàng)目代碼準(zhǔn)備

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

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

小兔鮮項(xiàng)目搭建-13-header-布局

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

小兔鮮項(xiàng)目搭建-15-搜索

小兔鮮項(xiàng)目搭建-16-購物車

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

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

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

點(diǎn)擊查看更多

猜你喜歡:

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

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

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

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

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

分享到:
在線咨詢 我要報(bào)名
和我們在線交談!