1.新增選擇器
1.1屬性選擇性
image.png
image.png
image.png
image.png
image.png
image.png
image.png
1.2偽類結(jié)構(gòu)選擇器
image.png
image.png
image.png
image.png
image.png
image.png
//選偶數(shù)行或者奇數(shù)行
image.png
image.png
image.png
//公式
image.png
image.png
//
image.png
image.png
image.png
前n個和后n個
image.png
image.png
image.png
//
image.png
區(qū)別：
image.png
nth-child(1)效果:哪個都沒有選上
image.png
nth-of-type(1)效果：將熊大選上
image.png
image.png
image.png
小結(jié)：
image.png
image.png
1.3 偽元素選擇器
image.png
image.png
image.png
image.png
偽元素使用場景
image.png
image.png
image.png
image.png
給圖片加上罩層：
image.png
image.png
image.png
image.png
偽元素使用場景：清除浮動
1.額外標(biāo)簽
image.png
2.偽元素清除浮動
寫法一、
image.png
image.png
寫法二边篮、
image.png
image.png
css盒子模型
image.png
image.png
image.png
image.png
image.png
p標(biāo)簽的盒子不會被撐開
css3其他屬性
filter濾鏡
image.png
image.png
image.png
image.png
其他特性
image.png
需求：子盒子永遠比父盒子寬度小30px；
image.png
image.png
image.png
過渡（transition）
image.png
image.png
image.png
image.png
image.png
想要樣式都改變：
image.png
image.png
image.png
案例：進度條
image.png
image.png
image.png
image.png
image.png
image.png
項目：
1.準(zhǔn)備工作：
1.1.圖標(biāo)：
image.png
再在index.html引入文件
1.2.符合SEO搜索
image.png
1.2.1網(wǎng)站title
image.png
1.2.2網(wǎng)站說明
image.png
1.2.3關(guān)鍵字
image.png
image.png
2.首頁制作
2.1常用模板命名：
image.png
2.2快捷導(dǎo)航shortcut制作
image.png
image.png
image.png
第二header：
image.png
logo SEO優(yōu)化：
image.png
注意：
image.png
搜索框
image.png
image.png
image.png
熱詞部分：
image.png
image.png
購物車：
image.png
image.png
image.png
image.png
nav導(dǎo)航模塊：
image.png
image.png
image.png
footer底部模塊
footer第一部分：服務(wù)信息
image.png
image.png
先放一個大的footer盒子，再放.mod_service盒子80px高，
給了一個下邊框站叼，里面有四個小li浮動起來臊岸，
每個小li分左右兩部分焦除，左邊h5放圖標(biāo)，右邊放一個div英古，叫service_txt淀衣，
上放h4文字，右下放p段落
image.png
image.png
image.png
footer第二部分：幫助信息部分
image.png
先放一個大的mod_help盒子召调，有底邊框膨桥，然后里面放6個列表dl蛮浑，清除浮動使之在同一行；最后一個列表寬度為80px只嚣；每個dl里面有dt和dd沮稚。
image.png
image.png
footer第三部分：版權(quán)信息
image.png
image.png
image.png
main模塊：
image.png
image.png
左側(cè)輪播：
暫時先只放圖片：設(shè)置一個div，把圖片當(dāng)背景放進去
image.png
image.png
右側(cè)newsflash新聞快報模塊：
分為上中下三個部分册舞，分別設(shè)置不同的高度即可
image.png
“上”：news新聞快報模塊
image.png
1號盒子又分成左右兩個盒子
image.png
image.png
生活服務(wù)模塊：
image.png
一個div盒子里面ul放了12個小li蕴掏，12個小li，4個一行排放调鲸，最后一個超出div盒子右邊界盛杰，使用overflow：hidden將多余的部分切掉即可
image.png
今日推薦
image.png
一個大的div分左右兩個盒子，1號盒子確定好高藐石、寬即供，直接用圖片替換掉內(nèi)容；2號盒子里面裝了4個li于微，再把對應(yīng)圖片替換
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
