web前端HTML5/CSS3布局與樣式：

web前端HTML5/CSS3布局與樣式

一.HTML標(biāo)簽

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

隨堂項目：

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

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

CSS3簡介、.css3引入、常見樣式、文字與文本、顏色

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

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

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

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

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

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

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

隨堂項目：移動端的用戶注冊頁面、PC端的用戶注冊頁面。

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

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

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

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

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