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>
  1. 填空題
<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>
  1. 選擇題
<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>
  1. 多項選擇題
<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>
  1. 判斷題
 <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>

實現效果:

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

推薦閱讀更多精彩內容

  • 當然,還是先說一下本次任務的要求:使用 純html 實現考試頁面(不使用任何 css/js),下圖所示,使用正確合...
    WP啦啦啦閱讀 4,595評論 13 4
  • 任務地址 https://bbs.excellence-girls.org/topic/210/html 開始任務...
    TW李玥閱讀 193評論 0 1
  • 做銷售一定要多動腦子,并不是誰比誰聰明,而是看誰更用心。比你晚來的都開單了,這時候你需要做的就是反思,先去研究一下...
    daoke001閱讀 337評論 0 0
  • 朋友:我分手了 我:奧……不對,what?你才談幾天啊…… 朋友:去他媽的,那個孫子說老子就跟他大兄弟一樣 我:…...
    尚白閱讀 225評論 0 0
  • 早上醒來,媽媽雙手提著我的小外套溫柔地說:“秋天來了,要加衣服哦。”我歪著頭問媽媽:“媽媽,秋天秋天是誰呀,長...
    隨心的夏天閱讀 205評論 34 28