本节CSS代码全注释
如题，写在回答里，请指正
Nehpets
2016-07-30
7 回答
同时用了正常的解释和老师的天使爆裂理论
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | .page { /* 包裹层div .page 脱离文档流，悬浮起来，准备扩张。第一个天使飞天，准备爆裂 */ position: absolute; /* 设置包裹层div的扩张范围，此处意思是设置为全屏范围。大招全开，天使全屏爆裂 */ left: 0; top: 0; right: 0; bottom: 0; } .list { /* 每个格子都左浮动 */ float: left; /* 每个格子的宽高 */ height: 33.3%; width: 33.3%; /* 将.list::before 中设置的遮罩层和 .list::after 中设置的内容层的扩张范围，限制为，仅限于.list 这个div中 */ position: relative; } .list::before { /* 在每个格子前设置一个内容为空的元素，这里就是每个格子的遮罩层，用来覆盖每一个格子，此为第二个天使*/ content: ''; /* 遮罩层脱离文档流，悬浮起来，准备扩张。第二个天使飞天，准备爆裂 */ position: absolute; /* 遮罩层的扩张范围，不再是填满容器了，而是距离格子所在的容器 div .list 上下左右各10px*/ left: 10px; right: 10px; top: 10px; bottom: 10px; /* 圆角边框 */ border-radius: 10px; /* 背景色 */ background-color: #cad5eb; } .list::after { /* 在每个格子后设置一个内容为 attr(data-index) 的元素，这个是格子的内容层，用来显示 div 属性中 data-index 的值。此为第三个天使 */ content: attr(data-index); /* 格子的内容层悬浮起来，准备扩张。第三个天使飞天，准备爆裂 */ position: absolute; /* 内容层的高度 */ height: 30px; /* 内容层的扩张范围，填满格子所在的容器 div .list */ left: 0; right: 0; top: 0; bottom: 0; /* 配合 height: 30px 和 font: 24px/30px bold; 内容层的高度等于文字行高，实现文字垂直居中 */ margin: auto; /* 文字水平居中 */ text-align: center; /* 文字大小、行高、字体 */ font: 24px/30px bold 'microsoft yahei'; } |
举报
0/150
提交
取消
