案例 鼠标划入特效

项目维护
四个文件 css js images html
div
id 仅能出现一次
class 起名字
style 只能用于当前标签
每个浏览器解析标签的不同
css magrin 外边距 为零
margin-bottom
复合样式
单一样式

学会布局
整体入手
局部分析
调整位置
添加样式
box-sodwon
阴影 x 偏移量 y 偏移量 阴影羽化值 阴影颜色

命令规则
1.见名只意 小写英文
2.不能以数字开头
3.以下划线来分割，适当缩写

border 10px solid（实线） #fff
默认流式布局

为什么不用浮动？
1.霸道 破坏盒子模型
2.破坏性
3。兼容性问题
4.包裹性

display： inline-block
1.能够使用文本样式
把换行解析成空格了？怎么解决
结束和开始不闭合

screenshot.png

常用的方法
letter-space 文字间距 -5px？？？
word-space -5px
让空格不解析
font-size

透明值
background： rgba（255，255，255，255.7）

css3变幻
写动画用css3实现，就不用js实现
tranform：translate位移 scale硕放 rotate旋转
translates x轴 y轴
overflow hidden 超出隐藏

hover 动态伪类选择器
改变元素的样式
transition 过度时间 transition： 0.3s；
鼠标划入改变样式

抖动效果
@keyframes

animation：move 0.9s；
@keyframes move {
0%（是0.9s的0%）{
transform：translateY（-404px）；
}
40%{
transform：tranlateY（-）
}
}

企业标准
模块化 组件化 插件化 可拔插化
模块化
降低耦合度