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