HTML练习——实现一份试卷

2016-12-09  本文已影响173人  谭雅翔

练习:

使用纯html实现考试页面(不使用任何css/js),使用正确合适的标签做出如下的页面效果。内容需要完全一样,但页面样式仅供参考:


试卷

分析

按内容将页面划分:

  1. 整个页面的header,剩下的由于都有提交的部分,放到一个form中,作为一个article:


    整体header
  2. 在form/article中,把这部分当作header,因为题目无论怎么换,个人信息都需要填:


    article中的header
  3. 剩下的题目,按大题分成section,没过section中用<ol>承载题目:

    article中的section
  4. 最后,提交按钮作为article/form的footer:


    article中的footer

那么页面的整体结构如下:

页面结构

结果

简书markdown编辑器太凶残了,我就不粘代码了,整体代码在这里,还有效果
html文件中的标签比较多,主要是为了兼顾下个练习中对CSS的使用。

上一篇下一篇

猜你喜欢

热点阅读