美文网首页
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练习——实现一份试卷

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

  • HTML 实现试卷

    今天来使用纯 HTML 实现一个考试试卷,如下图 实现试卷的头部 代码: 实现效果如下: 实现第一大题 第一答题有...

  • 用HTML实现试卷页面

    用纯HTML实现如下页面: 试卷名称: 试卷卷头 标签为 input 元素定义标注,其中for值与相关 标签id ...

  • HTML之一张试卷

    今天的任务是完成一张试卷,用HTML只做页面,试卷内容如下: 1.实现试卷的头部,代码如下: 2.实现第一题,代码...

  • 简历表格练习

    实现效果: 代码实现; 简历表格练习 姓名 ...

  • js笔记十之for循环练习

    练习 隔行变色(css3实现) HTML CSS 隔行变色(js实现) HTML同上 JS 选项卡 HTML CS...

  • 任务201 HTML

    任务地址 HTML 完成时间 2016-12-8 任务要求的作业 HTML练习——列表与表格HTML练习——实现一...

  • html-UML试卷的实现

    今天我们来写个这样的试卷吧 来,看下这张试卷,恩恩,是纯html滴。怎么开始写呢?我们来分析一下: 一. 结构是...

  • 纯HTML试卷页面的实现

    要实现上面这样的一个试卷界面.我主要是先将试卷分为几部分. 第一部分 主要用 实现,以及用 来实现填空题的形式 第...

  • IFE-仿豆瓣音乐播放器

    任务目的 ● 练习综合运用HTML、CSS、JavaScript实现功能● 熟悉 html5 audio 使用● ...

网友评论

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

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