美文网首页
html+css静态试卷的实现

html+css静态试卷的实现

作者: 张鸽 | 来源:发表于2017-05-25 14:13 被阅读0次

    用html和css实现一个静态试卷
    自己做的试卷效果(分开截图):





    试卷用到知识点:
    1.设置表格宽度及列宽(方便上下对齐)

    <table width="1200px">
    <tr>
    <td width="220px">班级:</td>
    <td width="220px">姓名:</td>
    </tr>
    </table>
    

    2.html有序列表

    <ol>
    <li>java</li>
    <li>javascript</li>
    </ol>
    

    3.文本框,文本域

    <input type="text" size="20">
    <textarea name="5" rows="5" cols="130"></textarea>
    

    4.单选框,复选框

    <input name="2-1" type="radio" value="">(C)UML与软件工程无关
    <input name="2-1" type="radio" value="">(D)UML是软件工程的一部分
    
    <input name="3-1" type="checkbox" value="">(A)概述级
    <input name="3-1" type="checkbox" value="">(B)需求级
    

    5.块引用以及缩进

    <blockquote>
        <dl>
            <dt>1.UML的中文全称是:</dt>
            <dd class="text"><label><input type="text" size="20"></label></dd>
            <dt>2.对象最突出的特征是:</dt>
            <dd class="text"><label><input type="text" size="20">
                <input type="text" size="20">
                <input type="text" size="20"></label></dd>
        </dl>
    </blockquote>
    

    6.css边框

    .ed {
          border: 2px darkgrey solid;
          border-radius: 4px;
          margin-top: 20px;
          line-height: 35px;
        }
    

    7.css标题框

     .topic {
          padding-left: 10px;
          padding-top: 20px;
          height: 50px;
          background-color: rgba(188, 188, 188, 0.81);
            }
    

    相关文章

      网友评论

          本文标题:html+css静态试卷的实现

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