HTML之考試頁面的實現

???????當然,還是先說一下本次任務的要求:使用 純html 實現考試頁面(不使用任何 css/js),下圖所示,使用正確合適的標簽做出如下的頁面效果。內容需要完全一樣,但頁面樣式僅供參考。

template.png

???????首先還是對考試頁面進行一個分析,我們可以將其劃分為6大章節,分別為:試卷描述以及個人相關信息、 填空題、 選擇題、多項選擇題、判斷題、 簡答題。每個章節我們可以用<section></section>進行定義,下面我們來具體實現每個章節。

  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>
  1. 填空題的實現
<section>
    <h3>一、填空題(每空5分,共20分)</h3>
    <p>1.UML的中文全稱是:</p>
    <input type="text"/>
    <p>2.對象最突出的特征是:</p>
    <input type="text"/> <input type="text"/> <input type="text"/>
    </section>
  1. 選擇題的實現
<section>
    <h3>二、選擇題(每題10分,共20分)</h3>
    <p>1.UML與軟件工程的關系是:</p>
    <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>
    <br />
    <p>2.Java語言支持:</p>
    <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>
   </section>
  1. 多項選擇題的實現
<section>
    <h3>三、多項選擇題(每題10分,共20分)</h3>
    <p>1.用例的粒度分為以下哪三種:</p>
    <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>
    <br />
    <p>2.類圖由以下哪三部分組成:</p>
    <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>
</section>
  1. 判斷題的實現
<section>
    <p>四、判斷題(每題10分,共20分)</p>
    <label>1.用例圖只是用于和客戶交流和溝通的,用于確定需求。 <input type="radio"/><input type="radio"/></label>
    <br />
    <label>2.在狀態圖中,終止狀態在一個狀態圖中允許有任意多個。 <input type="radio" /><input type="radio" /></label>
</section>
  1. 簡答題的實現
<section>
    <p>五、簡答題(每題20分,共20分)</p>
    <label>1.簡述什么是模型以及模型的表現形式?<textarea rows="5" ></textarea></label>
    <p><button type="submit">計算分數</button></p>
</section>

我們來看一下實現后的效果:

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容