美文网首页
HTML练习——实现一份试卷

HTML练习——实现一份试卷

作者: 谭雅翔 | 来源:发表于2016-12-09 20:23 被阅读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的使用。

    相关文章

      网友评论

          本文标题:HTML练习——实现一份试卷

          本文链接:https://www.haomeiwen.com/subject/isysmttx.html