1.新增选择器
1.1属性选择性
image.png
image.png
image.png
image.png
image.png
image.png
image.png
1.2伪类结构选择器
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
前n个和后n个
image.png
image.png
image.png
//
image.png
区别：
image.png
nth-child(1)效果:哪个都没有选上
image.png
nth-of-type(1)效果：将熊大选上
image.png
image.png
image.png
小结：
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.额外标签
image.png
2.伪元素清除浮动
写法一、
image.png
image.png
写法二、
image.png
image.png
css盒子模型
image.png
image.png
image.png
image.png
image.png
p标签的盒子不会被撑开
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.准备工作：
1.1.图标：
image.png
再在index.html引入文件
1.2.符合SEO搜索
image.png
1.2.1网站title
image.png
1.2.2网站说明
image.png
1.2.3关键字
image.png
image.png
2.首页制作
2.1常用模板命名：
image.png
2.2快捷导航shortcut制作
image.png
image.png
image.png
第二header：
image.png
logo SEO优化：
image.png
注意：
image.png
搜索框
image.png
image.png
image.png
热词部分：
image.png
image.png
购物车：
image.png
image.png
image.png
image.png
nav导航模块：
image.png
image.png
image.png
footer底部模块
footer第一部分：服务信息
image.png
image.png
先放一个大的footer盒子，再放.mod_service盒子80px高，
给了一个下边框，里面有四个小li浮动起来，
每个小li分左右两部分，左边h5放图标，右边放一个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第三部分：版权信息
image.png
image.png
image.png
main模块：
image.png
image.png
左侧轮播：
暂时先只放图片：设置一个div，把图片当背景放进去
image.png
image.png
右侧newsflash新闻快报模块：
分为上中下三个部分，分别设置不同的高度即可
image.png
“上”：news新闻快报模块
image.png
1号盒子又分成左右两个盒子
image.png
image.png
生活服务模块：
image.png
一个div盒子里面ul放了12个小li，12个小li，4个一行排放，最后一个超出div盒子右边界，使用overflow：hidden将多余的部分切掉即可
image.png
今日推荐
image.png
一个大的div分左右两个盒子，1号盒子确定好高、宽，直接用图片替换掉内容；2号盒子里面装了4个li，再把对应图片替换
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
