本节CSS代码全注释
如题,写在回答里,请指正
如题,写在回答里,请指正
2016-07-30
同时用了正常的解释和老师的天使爆裂理论
.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'; }
举报