CSS练习——美化试卷

练习:

使用CSS美化前面做的纯HTML页面，实现以下效果（仅供参考，不要求100%一样）：

CSS练习

分析

默认没有css的情况下，html中的普通元素应该成流式布局。而观察这张图，可以得出以下结论：

1. 整体页面居中，两边的margin大于顶部和底部。
2. 主标题居中。
3. 页面内容按我们之前划分的section成块分布，有边界，边界有圆角。
4. 前两个块中的元素布局改变，可以用float或inline-block实现。
5. 题目section中的小header有背景色，且margin为0。
6. 所有题目的题干、个人信息的label部分字体偏大，且加粗。
7. 判断题的input后面添加了指定颜色的“✔”和“✖”，可以使用:after或:before实现。
8. 最后一个textarea布局改变，同样可用float或inline-block实现。

结果

html代码在这里，css在这里，还有效果在这里。

备注

1. CSS中的第一部分是CSS reset，减小不同浏览器的默认渲染造成的差距；
2. 添加“✔”和“✖”的时候单独在html中对应的input标签后面加了一对空span，因为:after和:before对input这种自闭合标签无效（chrome的bug情况除外）
3. chrome默认字体解析特殊符号会出错，“✔”和“✖”会变成方框，因此在css中限定了字体：

font-family: "Lucida Grande", Lucida Sans Unicode, Hiragino Sans GB, WenQuanYi Micro Hei, Verdana, Aril, sans-serif;