html测试题小结

程序员文章站 2022-03-13 12:41:11

...

编程题

20 分/题,共 60 分

注册表单,要求
(1) 有单行文本框,密码框,单选按钮,复选框, 文本域,下拉列表,按钮等
(2) 全部使用grid布局实现


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>试题：注册表单</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        font-size: 100px;
      }
      body {
        width: 100vw;
        height: 100vh;
        font-size: 0.16rem;
        display: grid;
        grid-template-columns: 1fr 5rem 1fr;
        background-color: rgb(44, 59, 72);
      }
      .register {
        padding: 0.5rem 0.4rem;
        grid-area: 1/2/2/3;
        margin-top: 50%;
        margin-bottom: auto;
        border: 1px solid #000;
        background-color: rgb(255, 255, 255);
      }
      .register > div {
        margin: 0.15rem 0.6rem 0.15rem;
      }
      .register .btn {
        margin-top: 0.3rem;
        margin-bottom: 0;
      }
      .label {
        margin-right: 0.1rem;
      }
      .label:hover,
      .radio:hover {
        cursor: pointer;
        color: rgb(3, 169, 243);
      }
      .input {
        width: 2rem;
      }
      .btn > button {
        display: block;
        margin: 0 auto;
        padding: 0.05rem 0.5rem;
        border: none;
        font-weight: bold;
        color: #fff;
        background-color: rgb(3, 169, 243);
      }
      .btn > button:hover {
        cursor: pointer;
        background-color: rgb(53, 186, 245);
      }
    </style>
  </head>
  <body>
    <!-- 有单行文本框,密码框,单选按钮,复选框, 文本域,下拉列表,按钮等 -->
    <form class="register">
      <div>
        <label for="user">用户名：</label>
        <input type="text" name="user" id="user" class="input" />
      </div>
      <div>
        <label for="pass">密　码： </label>
        <input type="password" name="pass" id="pass" class="input" />
      </div>
      <div class="sex">
        <label>性　别：</label>
        <input type="radio" name="sex" id="man" class="radio" />
        <label for="man" class="label">男</label>
        <input type="radio" name="sex" id="wom" class="radio" />
        <label for="wom" class="label">女</label>
      </div>
      <div class="like">
        <label>爱　好：</label>
        <input type="checkbox" name="football" id="football" class="radio" />
        <label for="football" class="label">足球</label>
        <input
          type="checkbox"
          name="basketball"
          id="basketball"
          class="radio"
        />
        <label for="basketball" class="label">篮球</label>
        <input
          type="checkbox"
          name="Volleyball"
          id="Volleyball"
          class="radio"
        />
        <label for="Volleyball" class="label">排球</label>
      </div>
      <div>
        <label>籍　贯：</label>
        <select id="jg" class="input">
          <option value="0">请选择</option>
          <option value="1">广西</option>
          <option value="2">湖北</option>
          <option value="3">天津</option>
        </select>
      </div>
      <div class="btn"><button>提　交</button></div>
    </form>
  </body>
</html>

html测试题小结

购物车明细表,要求
(1) 使用<table>编写
(2) 要求有编号,分类, 品名,单价,数量,金额,总计等字段
(3) 要求用到colspan, rowspan等行与列的合并操作
(4) 表格样式全部采用css控制,布局方式任选flex/grid


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>试题：购物车明细表</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        font-size: 100px;
      }
      body {
        font-size: 0.16rem;
      }
      .container {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-flow: wrap;
        place-content: space-around;
        background-color: rgb(44, 59, 72);
      }
      .table_container {
        border: 1px solid rgb(87, 142, 190);
        background-color: white;
      }
      .table_container h3 {
        padding: 0.08rem 0.15rem;
        color: white;
        background-color: rgb(87, 142, 190);
      }
      .table_container table {
        margin: 0.3rem 0.2rem 0.3rem 0.2rem;
      }
      .table_container table tbody tr:hover {
        background-color: rgb(245, 245, 245);
      }
      .table_container th,
      .table_container td {
        padding: 0.06rem;
        text-align: left;
      }
      .table_container td:nth-of-type(1) {
        min-width: 0.6rem;
      }
      .table_container td:nth-of-type(2) {
        min-width: 0.9rem;
      }
      .table_container td:nth-of-type(3) {
        min-width: 1.4rem;
      }
      .table_container td:nth-of-type(n + 4) {
        min-width: 0.8rem;
      }
      .table_container tbody tr:nth-of-type(2n + 1) {
        /* 这句和下句加边框都没效果，请老师指点 */
        border-top: 1px solid rgb(221, 221, 221);
        border-bottom: 1px solid rgb(221, 221, 221);
        background-color: rgb(249, 249, 249);
      }
      .table_container tr:last-of-type td:first-of-type {
        padding: 0.1rem;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="table_container">
        <h3>购物车明细表</h3>
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>分类</th>
              <th>品名</th>
              <th>单价（元）</th>
              <th>数量</th>
              <th>金额（万元）</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>手机</td>
              <td>华为p80</td>
              <td>8000</td>
              <td>600</td>
              <td>480</td>
            </tr>
            <tr>
              <td>2</td>
              <td>手机</td>
              <td>华为p80</td>
              <td>8000</td>
              <td>600</td>
              <td>480</td>
            </tr>
            <tr>
              <td>3</td>
              <td>手机</td>
              <td>华为p80</td>
              <td>8000</td>
              <td>600</td>
              <td>480</td>
            </tr>
            <tr>
              <td>4</td>
              <td>手机</td>
              <td>华为p80</td>
              <td>8000</td>
              <td>600</td>
              <td>480</td>
            </tr>
            <tr>
              <td>5</td>
              <td>手机</td>
              <td>华为p80</td>
              <td>8000</td>
              <td>600</td>
              <td>480</td>
            </tr>
            <tr>
              <td>6</td>
              <td>手机</td>
              <td>华为p80</td>
              <td>8000</td>
              <td>600</td>
              <td>480</td>
            </tr>
            <tr>
              <td colspan="5">合计</td>
              <td>2880</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

html测试题小结

添加商品的模态框,要求
(1) 使用position:fixed实现
(2) 商品添加使用表单,要有分类,品名,单价,数量等字段
(3) JS 部分可直接复制课堂上的代码即可, 不必编写


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>试题3：添加商品的模态框</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
        box-sizing: border-box;
      }
      html {
        font-size: 100px;
      }
      body {
        width: 100vw;
        height: 100vh;
        font-size: 0.16rem;
      }
      .top {
        height: 0.8rem;
        padding: 0.22rem 0.2rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: rgb(28, 43, 54);
      }
      .top h2 {
        color: white;
      }
      .top button {
        position: fixed;
        top: 0.25rem;
        right: 0.2rem;
        font-weight: bold;
        padding: 0.05rem 0.2rem;
        color: white;
        border: none;
        background-color: rgb(28, 43, 54);
      }
      .top button:hover {
        color: sandybrown;
        cursor: pointer;
        background-color: rgb(87, 142, 190);
      }
      .modal {
        display: none;
      }
      .modal_bg {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgb(28, 43, 54, 0.6);
      }
      .shop_form {
        min-width: 2.6rem;
        min-height: 2.9rem;
        position: fixed;
        top: 30%;
        bottom: 30%;
        left: 10%;
        right: 10%;
        border: 2px solid rgb(87, 142, 190);
        background-color: white;
      }
      .shop_form h3 {
        color: ivory;
        padding: 0.1rem 0.15rem;
        background-color: rgb(87, 142, 190);
      }
      .shop_form ul {
        min-width: 2rem;
        position: fixed;
        top: 40%;
        left: 20%;
      }
      .shop_form ul li {
        margin: 0.12rem 0;
      }
      .shop_form input[type="text"] {
        margin-left: 0.12rem;
        padding: 0.04rem 0.1rem;
        border: 1px solid rgb(170, 170, 170);
        outline: none;
      }
      .shop_form input[type="text"]:focus {
        background-color: rgb(238, 238, 238);
      }
      .shop_form .add_btn {
        margin-top: 0.3rem;
        margin-left: 0.7rem;
        padding: 0.04rem 0.25rem;
        font-weight: bold;
        border: none;
        color: white;
        background-color: rgb(87, 142, 190);
      }
      .shop_form .add_btn:hover {
        cursor: pointer;
        background-color: rgb(53, 126, 189);
      }
    </style>
  </head>
  <body>
    <div class="top">
      <h2>逛逛开心汇维护后台</h2>
      <button onclick="document.querySelector('.modal').style.display='block'">
        添加商品
      </button>
    </div>
    <div class="modal">
      <div
        class="modal_bg"
        onclick="this.parentNode.style.display='none'"
      ></div>
      <form action="" class="shop_form">
        <h3>添加商品</h3>
        <ul>
          <li>
            <label for="sort">分类</label
            ><input type="text" name="sort" id="sort" />
          </li>
          <li>
            <label for="wares">品名</label
            ><input type="text" name="wares" id="wares" />
          </li>
          <li>
            <label for="price">单价</label
            ><input type="text" name="price" id="price" />
          </li>
          <li>
            <label for="number">数量</label
            ><input type="text" name="number" id="number" />
          </li>
          <li>
            <button class="add_btn">添　加</button>
          </li>
        </ul>
      </form>
    </div>
  </body>
</html>

html测试题小结

上一篇： JS获取表单元素、dom树遍历增删改、操作元素内容、自定义属性、操作css、事件小结

下一篇： window下maven的安装和配置阿里镜像源

html测试题小结

编程题

HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线

html5的自定义data-*属性与jquery的data()方法的使用

Html5 FileReader实现即时上传图片功能实例代码

HTML5+CSS3实现拖放(Drag and Drop)示例

html5+svg学习指南之SVG基础知识

HTML5使用drawImage()方法绘制图像

Html5新特性用canvas标签画多条直线附效果截图

html5摇一摇代码优化包括DeviceMotionEvent等等

HTML5 创建canvas元素示例代码

HTML5进度条特效