在上一篇博客的中，我们学习了CSS样式表的基本操作，知道在网页制作是采用CSS技术，可以对网页的布局、颜色、背景、宽度、高度、字体等进行控制，使得网页设计布局更加美观漂亮。这一期，我们将要一起来实践一下，用CSS美化纯HTML页面。为了让我们的重心放在CSS的学习上，我们使用之前实践HTML时的做的考试页面进行美化，相关介绍在这里，HTML代码在这里
HTML 效果
纯HTML考试页面
使用CSS美化后效果
美化后考试页面
分析
看到美化后的效果，第一反应就是原来的html代码布局<div>好多要变了，有的要加有的要减，比如第一行考试信息要属于一个div，第二行考生信息是一个div，同时这两行内都不可以有其他div，下面每个大题是一个div，最后提交按钮是一个div。结构分析完毕，下面分析细节：
- 整个页面设置，外间距
margin、内间距padding、宽度width等 - 标题：居中
text-align设置，使用元素选择器就可以 - 考试信息和考生信息可以用同一个类选择器，注意设置边框
boder、字体居中text-align、边框圆角border-radius - 两个框中的提示文字和信息文字用同一个类选择器，设置悬浮
float、宽度百分比width、文字靠左text-align - 两个框中的提示文字为粗体，信息文字正常，同时输入框也有颜色、边框的改变
- 五个大题分别为五个div，可以用同一个类选择器，设置好边框
border、圆角border-radius、间距margin就可以 - 五个大题的题目都加了边框和背景颜色，可以用一个类选择器，设置背景色
background-color、高度height、内间距padding、外间距margin，注意这里，我用的是<h3>标签，所以自带格式，要手动设置margin-top:0 - 每个小题的题目描述字体都加粗
font-weight，并且行距较大line-height - 填空题的输入框设置边框
border、宽度width、高度height - 判断题的正错和错误符号可以使用html特殊符号设置：
&#+标号，并设置颜色color，加粗font-weight即可 - 简答题的多文本输入框可以直接用元素选择器设置，设置宽度
width、高度height、边界border - 最后的按钮用元素选择器设置，设置间距
margin、背景色background-color、字体颜色color、圆角border-radius
我的效果
my考试页面1
my考试页面2
代码
代码可以进入我的GitHub进行查看：HTML文件、CSS文件
