一 . 通配符 marigin 0 , padding 0 ,内外边距为0
二. 1. .box {
margin:100px auto
}
让盒子居中.
三 body 部分
1. 三个盒子用无序列表 ul>li*3>a>img 设置
2.图片经常换用img 而不是bgurl
3.文字部分用一个盒子包起来 .content
4. 用两个h1-5设置文字的大小
5.了解更多的'>' 用字体图标, 设置link引入iconfont.css
用i标签
四 CSS 部分
-
a标签 分三个盒子,用图片的宽度撑起盒子的大小 , 设置 宽 高 背景色
-
用子绝父相定位文本, 定位于左下角,设置过渡效果,transition 和 z-index,后者提高权重文字优先于遮罩显示
-
用a标签的伪类,设置遮罩.同样用子绝父相定位, 用bgi:linear-gradient设置半透明遮罩. 用opacity 0 ,隐匿遮罩,设置过渡效果
-
动态效果
4-1. a:hover::after {opacity 1 } ,a标签悬停时出现遮罩
-2 . 图片缩放, img { transform:scale()}
-
用.icon 设置文字图标颜色
