web前端HTML5/CSS3布局與樣式

一.HTML標(biāo)簽

HTMl5、H5標(biāo)簽、智能表單、結(jié)構(gòu)化標(biāo)簽

隨堂項(xiàng)目：

1.文章頁面的結(jié)構(gòu)化布局。包括文章標(biāo)題、正文、圖片、頁面背景、作者、發(fā)表時(shí)間等信息2.利用table標(biāo)簽課程表的實(shí)現(xiàn)3.利用form、input表單標(biāo)簽實(shí)現(xiàn)簡(jiǎn)單登錄注冊(cè)頁面

二.CSS基礎(chǔ)語法常見樣式

CSS3簡(jiǎn)介、.css3引入、常見樣式、文字與文本、顏色

隨堂項(xiàng)目：一般導(dǎo)航欄的制作

三.CSS選擇器 css選擇器、名字選擇器、外號(hào)選擇器、洋蔥式選擇器的用法、偽類選擇器、結(jié)構(gòu)化偽類選擇器、屬性選擇器、兄弟選擇器、子元素選擇器

CSS盒子模型 盒子模型、如何用好盒模型

隨堂項(xiàng)目：導(dǎo)航欄的制作，利用盒子模型拉開間距、hover效果添加后的內(nèi)邊距設(shè)定

四.浮動(dòng)與定位 float、clear、塌陷的父容器、position：一動(dòng)不動(dòng)的(static)，跟著別人跑的(absolute)，以自己為中心的(relative)，固定的(fixed)

隨堂項(xiàng)目：導(dǎo)航欄左右布局的定位、二級(jí)菜單的實(shí)現(xiàn)、回到頂部的按鈕

五.響應(yīng)式布局與頁面優(yōu)化處理 移動(dòng)頁面與PC端頁面布局時(shí)候需要注意點(diǎn)、響應(yīng)式布局的實(shí)現(xiàn)原理、各種瀏覽器對(duì)于CSS樣式的支持情況、頁面優(yōu)化需要注意的地方、解決跨瀏覽器兼容性問題

隨堂項(xiàng)目：移動(dòng)端的用戶注冊(cè)頁面、PC端的用戶注冊(cè)頁面。

六.靜態(tài)頁面切圖實(shí)戰(zhàn)項(xiàng)目

企業(yè)站實(shí)訓(xùn)：1.首頁導(dǎo)航2.banner圖3.模塊展示4.新聞中心5.產(chǎn)品中心5.友情鏈接6.版權(quán)申明

商城站實(shí)訓(xùn)：1.搜索框2.頭部導(dǎo)航3.分類菜單4.banner圖5.分類商品6.幫助中心7.版權(quán)備案

專題站實(shí)訓(xùn)：重點(diǎn)練習(xí)H5變形動(dòng)畫的添加，使頁面有動(dòng)態(tài)交互效果

個(gè)人頁面：根據(jù)自己設(shè)計(jì)的個(gè)人頁面效果圖實(shí)現(xiàn)靜態(tài)頁面，獨(dú)立完成切圖和代碼過程，指導(dǎo)添加動(dòng)態(tài)效果