HTML之考试页面的实现（二）

      上一篇由于自己的粗心都没有发现要求的考试页面题目之间存在着缩进，经@Oliver_Le同学的提醒才发现了这个问题，头脑里最开始第一个反应是通过margin-left属性来实现，然后意识到不能使用CSS,经过思考决定通过有序列表来实现缩进。

1. 试卷描述以及个人相关信息的实现

<section>
    <h1>统一建模语言理论测试</h1>
    <p >考试科目：统一建模语言</p>
    <p>时间：100分钟</p>
    <p>得分：</p>
    <label>班级(必填): <input type="text"/></label>
    <br />
    <label>学号(必填): <input type="text"/></label>
    <br />
    <label>姓名(必填): <input type="text"/></label>
</section>

2. 填空题

<section>
    <h3>一、填空题（每空5分，共20分）</h3>
    <ol>
      <li>UML的中文全称是：<br />
        <input type="text"/>
      </li>
      <li>对象最突出的特征是：<br />
        <input type="text"/> <input type="text"/> <input type="text"/>
      </li>
    </ol>
</section>

3. 选择题

<section>
    <h3>二、选择题（每题10分，共20分）</h3>
    <ol>
      <li>UML与软件工程的关系是： <br />
        <input type="radio"/><label>(A)UML就是软件工程</label><br />
        <input type="radio"/><label>(B)UML参与到软件工程中软件开发过程的几个阶段</label><br />
        <input type="radio"/><label>(C)UML与软件工程无关</label><br />
        <input type="radio"/><label>(D)UML是软件工程的一部分</label>
      </li>
      <li>Java语言支持：<br />
        <input type="radio"/><label>(A)单继承</label><br />
        <input type="radio"/><label>(B)多继承</label><br />
        <input type="radio"/><label>(C)单继承和多继承都支持</label> <br />
        <input type="radio"/><label>(D)单继承和多继承都不支持</label>
      </li>
    </ol>
</section>

4. 多项选择题

<section>
    <h3>三、多项选择题（每题10分，共20分）</h3>
    <ol>
      <li>用例的粒度分为以下哪三种：<br />
        <input type="checkbox"/><label>(A)概述级</label><br />
        <input type="checkbox"/><label>(B)需求级</label><br />
        <input type="checkbox"/><label>(C)用户目标级</label><br />
        <input type="checkbox"/><label>(D)子功能级</label>
      </li>
      <li>类图由以下哪三部分组成：<br />
        <input type="checkbox" /><label>(A)名称(Name)</label><br />
        <input type="checkbox" /><label>(B)属性(Attribute)</label><br />
        <input type="checkbox" /><label>(C)操作(Operation)</label><br />
        <input type="checkbox" /><label>(D)方法(Function)</label>
      </li>
    </ol>
  </section>

5. 判断题

 <section>
    <h3>四、判断题（每题10分，共20分)</h3>
    <ol>
      <li>用例图只是用于和客户交流和沟通的，用于确定需求。
        <input type="radio"/><input type="radio"/><br />
      </li>
      <li>在状态图中,终止状态在一个状态图中允许有任意多个。
        <input type="radio" /><input type="radio" />
      </li>
    </ol>
</section>

6.简答题及按钮的实现

 <section>
    <h3>五、简答题（每题20分，共20分）</h3>
    <ol>
      <li>简述什么是模型以及模型的表现形式？
        <textarea rows="5" ></textarea>
      </li>
    </ol>
    <p><button type="submit">计算分数</button></p>
 </section>

实现效果：