美文网首页
第一期学习路线:任务一----作业二(完成一个小表单)

第一期学习路线:任务一----作业二(完成一个小表单)

作者: YF_dawn | 来源:发表于2016-12-03 19:06 被阅读0次

    1.任务目的:

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


    2.任务过程:

    步骤一:观察试卷要求,确定需要使用的标签包括有列表标签以及所有的表单内容。首先进行题目以及考生信息的内容填写,当需要输入时,我选择使用单行输入< input>,type="text" ,以此来进行考生信息的填写。

    代码>


    Paste_Image.png

    运行结果>


    Paste_Image.png

    步骤二:进行大题题目的编写。当我需要使用有序列表时发现有序列表的序号没有汉子样式(即type没有“一”)。所以我放弃使用有序列表,改成使用普通标题的形式。接下来就是一道大题一道大题的进行标签搭建。首先是第一大题。

    代码>


    Paste_Image.png

    运行结果>


    步骤三:接下来进行选择题的编写。使用的标签内容都有表单的输入type为"radio",name起成一样的,在外部使用有序列表标签。多项选择题则使的type则用"checkbox“,(判断题同单选题)

    代码


    Paste_Image.png

    运行结果

    Paste_Image.png

    步骤四:填空题,使用< textara >标签即可。最后使用type为"submit"的input进行分数计算。value为”计算分数“。最后的最后使用< hr>标签进行分隔线。

    代码


    Paste_Image.png

    运行结果


    Paste_Image.png

    源代码以及结果

    源代码


    Paste_Image.png
    Paste_Image.png

    结果


    Paste_Image.png

    相关文章

      网友评论

          本文标题:第一期学习路线:任务一----作业二(完成一个小表单)

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