目录
1、精灵图
精灵图步骤
1.测量布局的大小,设置为盒子的宽高
2.测量局部的坐标值,设置为背景定位的负值
2、背景大小 background-size
contain 背景图片等比列缩放,背景图片显示完整,有可能铺不满盒子
cover 背景图片等比列缩放,背景图片显示不完整,铺满盒子
px像素:第一个值为宽,第二个值为高
只写一个值代表宽,另一个默认auto,高等比列缩放
百分比:参考盒子的百分比
背景尺寸的连写前面必须写背景定位的值
单独写尺寸时要写在background下面,否则默认值auto将其覆盖
3、盒子阴影 box-shadow
第1个值水平偏移量,正值向右,负值向左
第2个值垂直偏移量,正值向下,负值向上
第3个值虚化范围
第4个值阴影大小
第5个值阴影颜色
默认值外阴影outset,inset内阴影
4、文字阴影 text-shadow
第1个值水平偏移量
第2个值垂直偏移量
第3个值虚化范围
第4个值阴影颜色
5、过渡属性 transition
transition: all 1s; all全部属性过渡 1s过渡时间
过渡是属性值慢慢变化的过程,过渡是从默认状态到结束效果,需要触发条件
单个属性过渡,多个属性之间用逗号隔开
6、书写顺序
1.布局属性 display,position,float,clear,visibility,overflow
2.盒子模型+背景 width,height,margin,padding,border,background
3.文本内容属性 color,font,text-decoration,text-align,line-height
4.点缀属性 cuesor,border-radius,text-shadow,box-shadow
5.类选择器一般不超过3个
7、seo 搜索引擎优化
通过一系列的技术手段获得一个好的自然排名
seo三大标签title,description,keywords
description 网页描述 网页中心思想 网站重要产品和服务的高度概括,一段话
keywords 关键词 网站重要产品和服务的高度概括,一个一个词