纯HTML试卷页面的实现

要实现上面这样的一个试卷界面.我主要是先将试卷分为几部分.

第一部分

主要用<div>实现,以及用<ol>来实现填空题的形式

<div>    
<h1><strong>统一建模语言理论测试</strong></h1>
</div>
<div>考试科目：统一建模语言</div>
<div>时间：100分钟</div>
<div>得分：</div>
<div>班级（必填）：<input type="text" name="class"></div>
<div>学号（必填）：<input type="text" name="number"></div>
<div>姓名（必填）：<input type="text" name="yourname"></div>
<div>
    一、填空题（每空5分，共20分）
</div>
<ol>
    <li>UML的中文全称是:

        <div>
            <input type="text" name="answer">
        </div>
    </li>
    <li>对象最突出的特征是:
        <div>
            <input type="text" name="answer">
            <input type="text" name="answer"> 
            <input type="text" name="answer">
   </div>
    </li>
</ol>

第二部分

主要用<div>实现换行的冲突,<ol>实现选择的题号,用input标签实现单选

<div>
    二、选择题（每题10分，共20分）
</div>
<ol>
    <li>UML与软件工程的关系是:</li>
    <div>
        <input type="radio" value="1"  name="select1" />
        （A）UML就是软件工程</div>
    <div>
        <input type="radio" value="2"  name="select1" />
        （B）UML参与到软件工程中软件开发过程的几个阶段 </div>
    <div>
        <input type="radio" value="3"  name="select1" />（C）UML与软件工程无关</div>
    <div>
        <input type="radio" value="4"  name="select1" />（D）UML是软件工程的一部分</div>


    <li>Java语言支持:</li>
    <div> <input type="radio" value="1"  name="select2" />（A）单继承</div>
    <div> <input type="radio" value="2"  name="select2" />（B）多继承</div>
    <div><input type="radio" value="3"  name="select2" />（C）单继承和多继承都支持</div>
    <div><input type="radio" value="4"  name="select2" />（D）单继承和多继承都不支持</div>
</ol>

实现如下:

第二部分

第三部分

第三部分则是用代码实现多选框

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

实现如下:

第三部分

第四部分

主要是将最后的判断题和简答题以及计算分数的按钮实现

<div>
    四、判断题（每题10分，共20分）
</div>
<ol>
    <li>用例图只是用于和客户交流和沟通的，用以确定需求。
        <input type="radio" value="1" name="judge" />T
        <input type="radio" value="2" name="judge" />F</li>
    <li>在状态图中，终止状态在一个状态图中允许有任意多个。
        <input type="radio" value="1" name="judge" />T
        <input type="radio" value="2" name="judge" />F</li>
</ol>
<div>
    五、简答题（每题20分，共20分）
</div>
1.简述什么是模型以及模型的表现形式？
<div id="foot"><button type="button">计算分数</button></div>

第五部分

**-
经过以上四个部分的组合,一个完整的纯HTML试卷页面就得到啦!

嘿呦喂!