重温html5+css3新特性第四天：6月7日小结

Html5新增特性;因为前面用div盒子太多，遇到内容就div对浏览器不友好。故新增了header头部，nav导航栏，article，aside大一点的div，footer尾部等等，这些标签都可以多次使用
视频标签：video视频标签（属性src跟地址，加一个controls就能动了，muted静音 loop循环播放），
音频标签，audio（属性和视频差不多）
Inout新增表单type=search（搜索框）repuired属性表示用户必须填写不能为空，placeholder提示文本，autofocus自动获取焦点

CSS3新增特性：属性选择器中括号[ ]，这一点特别的常用，因为可以不借用class或者id就选取特定的元素，中括号里面有很多形式表述来选择特定的元素
结构伪类选择器：比如ul li;first-child{ }，一般用于选择父级元素的一个或者几个子元素
隔行变色小案例：要用到：nth-child（even）就是选取元素的偶数，同理选取奇数
nth-child（n）就是把所有的元素遍历选择，如果2n就是遍历偶数，这类表达式类的选择方式非常好用且强大，但是局限性就是如果选择的第一个li，则第一个子元素必须也是选定的元素，比如说选择的子元素是li，那么子元素的第一个必须是li，如果第一个元素是p或者div它就找不到。
nth-child和nth-of-type区别就是，第一种方式会把所有的子元素排序，序号固定，第二种方式只会把用的到的子元素搜索出来进行排序
伪元素选择器;:用css模拟html的效果创建标签：：before和：：after用这两个选择器创建的元素在文档树是看不到的，不影响结构，使用起来便利，和标签选择器一样权重为1，可以把before和aftere看成盒子，里面不能改变大小，但你是可以定位，可以改颜色等，里面必须有content属性（可以为空）
特别的写法class:hover::before
伪元素使用场景：清除浮动
额外标签法也称为隔墙法，就是在浮动元素后面加一个空的div，加一个样式clear：both
伪元素清除浮动的方法其实就是额外标签法的升级
可以通过box-sizing指定盒子模型，可指定为两种值，如果写成bs：border-box，那么padding和border就不会撑大盒子；如果是content-box（默认值）就和以前一样会撑大盒子
CSS3滤镜filter，其中有一个属性是blur模糊处理
子元素如果要和父元素中宽度保持同一距离，可以用calc函数，比如calc（100%-10px），百分之百指的是父元素宽度或者高度的全部，然后减10像素，通过calc计算后返回值
CSS新增属性过渡：transition，经常和hover搭配使用
transition使用方法，后面可以写四个属性，如果想要多个属性都变化，写一个all就行，谁过渡就给谁追加，比如hover：{ transition ：all 0.5s}
购物车物品剩余数量进度条小案例：加边框改实线，加圆角用b-r，加子元素div，配合hover使用

品优购项目制作：

原型图-效果图-前端设计-后端开发
项目文件夹：css，img，js，upload
首页index.html
css里面有个初始化，不如*[p0,m0]
link引入css
模块化开发，重复使用修改方便，设置公共样式common.css（里面可以放版心宽度颜色等）
网站小图标favicon，就是网站上面那一栏前面的小图片，可以用png图片在网上特定的网站（比特虫）生成.ico文件
SEO优化，也称为搜索引擎优化，帮网站获取更多的流量，要用title标题有书写规范，description网站说明，keyword关键字这三大标签
1.品优购首页制作：快捷导航的制作，先做最大的div或者search，然后放入版心，然后放两个盒子一左一右浮动（一开始可以随便写点东西占个位置），写文字或者a链接，然后设置行高等于盒子高度就能使文字居中；一个竖线也是一个元素，可以用li来做，给li设置宽度为1px然后设置个背景色，再加一个外边距把文字撑开；倒着的小三角用字体图标（阿里那里下载fonts文件然后复制到项目），可以用伪元素把它放到文字的后面
2.第二个导航搜索header栏制作：log图片，右边的搜索框和button按钮设置宽高后加一个浮动就行；搜索框下面的小字用一个盒子先站位，把a链接都放入，然后给链接设置外边距，然后给第一个链接一个行内样式设置颜色；
3.购物车模块可以用div占位，中间放文字，然后用before和after伪类在前面放一个购物车，后面放一个小于号的三角，这里也涉及网站小图标的应用，购物车模块还有一个右上角的数字计数模块，用定位，调边距，调行高，去掉一开始给的背景色（方便定位用的）
4.nav导航部分，用nav标签，nav里面放版心，版心里面放俩盒子，因为是块级盒子会上下显示，所以给它俩都左浮动，左边的盒子设置dt和dd自定义列表，给dt一个宽度和行高，dd里面给一个ul li包裹a链接，然后用伪元素设置鼠标经过背景色改变；详细商品栏dd里面的大于号三角可以通过伪元素：：after加上网站小图标（导入使用font-family和content等）决定，注意子绝父相，因为涉及到定位，用浮动或者给小图标设置边距不知道行不行？；导航部分另一边写个ul li’配合a链接即可
5.底部模块：给一个超大的盒子，然后从垂直方向上看的话，就是三个大盒子垂直占位，
第一个大盒子给版心的样式，然后给个下边框
-----------未完待续