表格与表单实战教程

购物车实战

body主体代码

<body>
    <!-- 表格 -->
    <table>
      <!-- 标题 -->
      <caption>
        购物车
      </caption>
      <!-- 头部 -->
      <thead>
        <tr>
          <th>ID</th>
          <th>品名</th>
          <th>单价/元</th>
          <th>单位</th>
          <th>数量</th>
          <th>金额/元</th>
        </tr>
      </thead>
      <!-- 主体 -->
      <tbody>
        <tr>
          <td>SN-1010</td>
          <td>MacBook Pro电脑</td>
          <td>18999</td>
          <td>台</td>
          <td>1</td>
          <td>18999</td>
        </tr>
        <tr>
          <td>SN-1020</td>
          <td>iPhone手机</td>
          <td>4999</td>
          <td>部</td>
          <td>2</td>
          <td>9998</td>
        </tr>
        <tr>
          <td>SN-1030</td>
          <td>智能AI音箱</td>
          <td>399</td>
          <td>只</td>
          <td>5</td>
          <td>1995</td>
        </tr>
        <tr>
          <td>SN-1040</td>
          <td>SSD移动硬盘</td>
          <td>888</td>
          <td>个</td>
          <td>2</td>
          <td>1776</td>
        </tr>
        <tr>
          <td>SN-1050</td>
          <td>黄山毛峰</td>
          <td>999</td>
          <td>斤</td>
          <td>3</td>
          <td>2997</td>
        </tr>
      </tbody>
      <!-- 底部 -->
      <tfoot>
        <tr>
          <td colspan="4">总计:</td>
          <td>13</td>
          <td>35765</td>
        </tr>
      </tfoot>
    </table>
    <!-- 结算按钮 -->
    <div>
      <button>结算</button>
    </div>
  </body>

样式代码

    <style>
      html {
        font-size: 14px;
      }
      table {
        /* 去掉间隙 */
        border-collapse: collapse;
        /* 宽度设置为窗口的70% */
        width: 70%;
        /* 横向居中 */
        margin: auto;
        color: #666;
        /* 字体变细 */
        font-weight: lighter;
        /* 文体居中 */
        text-align: center;
      }
      /* 为单元格添加边框 th为头单元格，td为表体单元格 */
      table thead th,
      table td {
        /* 添加底边框 线粗1px，solid 实线 */
        border-bottom: 1px solid #ccc;
        /* 内边柜 */
        padding: 10px;
      }
      /* 标题样式 */
      table caption {
        /* rem指原始字体的倍数，如原始字体为14px,则1.5rem=14px*1.5=21px */
        font-size: 1.5rem;
        /* 外边柜，这里以table thead 作为参照物 */
        margin-bottom: 15px;
        color: green;
      }
      /* 设置表头栏字体及颜色 */
      table th {
        font-weight: lighter;
        color: green;
      }
      /* 设置表头栏背景色 */
      table thead tr:first-of-type {
        background-color: cyan;
      }
      /* 设置偶数行为背景色为黄色 */
      table tbody tr:nth-of-type(even) {
        background-color: yellow;
      }
      /* 设置鼠标移动到行的悬停效果 移上变换背景色为粉色*/
      table tbody tr:hover {
        background-color: pink;
      }
      /* 设置表底样式 */
      table tfoot td {
        /* 不显示底部边框 */
        border-bottom: none;
        color: coral;
        font-size: 1.2rem;
        font-weight: bolder;
      }
      /* 结算按钮 */
      /* 用分组结构选择器取最后一个DIV */
      body div:last-of-type {
        width: 70%;
        margin: 10px auto;
      }
      /* 用分组结构选择器取第一个DIV 因文档body中只有一个div,所以和最后一个div是同一个*/
      body div:first-of-type button {
        /* 元素靠右，相对父元素 */
        float: right;
        width: 120px;
        height: 32px;
        background-color: seagreen;
        color: white;
        border: none;
        /* cursor设置鼠标样式,pointer为手状 */
        cursor: pointer;
      }
      /* 设置按钮鼠标悬停样式 */
      body div:first-of-type button:hover {
        background-color: coral;
        font-size: 1.1rem;
      }
    </style>

显示效果

购物车实战

登录界面实战

body主体代码

  <body>
    <h3>用户注册</h3>
    <!-- form+input.... -->
    <!-- form:表单固定元素名，action提交目标，method为提交方式，常用的值有post、get -->
    <form action="" method="POST">
      <!--fieldset 控件组 -->
      <fieldset>
        <!-- legeng为本控件组定义个标题，与fieldset配合使用，不用legeng,默认为无标题 -->
        <legend>基本信息(必填)</legend>
        <div>
          <!-- label:标签控件，for属性的值为需绑定控件的ID值，可以与其它控件绑定，绑定后，点击label控件，
             则焦点转换到被绑定的控件上。for为空时则不绑定任何控件，独立显示，点击无效 -->
          <label for="my-username">账号:</label>
          <!-- input:文本录入控件
              type常用属性值:text(文本)、email(邮箱)、password(密码)、date(日期)、radio(单选框)、
              checkbox(复选框)、search(搜索框，与datalist配合使用时，可显示下拉提示效果) -->
          <input
            type="text"
            id="my-username"
            name="username"
            placeholder="6-15位字符"
            autofocus
          />
        </div>
        <div>
          <label for="email-id">邮箱:</label>
          <input
            type="email"
            name="email"
            id="email-id"
            placeholder="demo@example.com"
          />
        </div>
        <!-- 密码 -->
        <div>
          <label for="pwd-1">密码:</label>
          <!-- placeholder显示提示条件，当文本框为空值时显示 -->
          <input type="password"" name="password1" id="pwd-1"
          placeholder="不少于6位且字母+数字" />
        </div>
        <div>
          <label for="pwd-2">确认:</label>
          <input type="password" name="password2" id="pwd-2" />
        </div>
      </fieldset>
      <fieldset>
        <legend>扩展信息(选填)</legend>
        <div>
          <label
            >生日:
            <input type="date" name="birthday" />
          </label>
        </div>
        <!-- 以下单选按钮用DIV包装后，起到一组按钮的效果 -->
        <div>
          <!-- 单选按钮 -->
          <label for="secret">性别:</label>
          <!-- 单选按钮中的name属性名必须相同 -->
          <input type="radio" name="gender" value="male" id="male" /><label
            for="male"
            >男</label
          >
          <input type="radio" name="gender" value="female" id="female" /><label
            for="female"
            >女</label
          >
          <input
            type="radio"
            name="gender"
            value="secret"
            id="secret"
            checked
          /><label for="secret">保密</label>
        </div>
        <div>
          <!-- 复选框 -->
          <label for="programme">爱好</label>
          <!-- 因为复选框返回是一个或多个值，最方便后端用数组来处理， 所以将name名称设置为数组形式便于后端脚本处理 -->
          <!-- checkbox的name属性值强烈建议加“[]”,为后端处理做准备 -->
          <input type="checkbox" name="hobby[]" id="game" value="game" /><label
            for="game"
            >打游戏</label
          >
          <!-- checked 默认选中 -->
          <input
            type="checkbox"
            name="hobby[]"
            value="shoot"
            id="shoot"
          /><label for="shoot">摄影</label>
          <input
            type="checkbox"
            name="hobby[]"
            value="programme"
            id="programme"
            checked
          /><label for="programme">编程</label>
        </div>
        <div>
          <!-- 选项列表 -->
          <label for="brand">手机:</label>
          <!-- search：搜索框，与下面的datalist(数据列表)配合使用，起到提示效果 -->
          <input type="search" list="phone" name="brand" id="brand" />
          <datalist id="phone">
            <option value="apple"> </option>
            <option value="huawei" label="华为"></option>
            <option value="mi" label="小米"> </option>
          </datalist>
        </div>
      </fieldset>
      <fieldset>
        <legend>其它信息(选填)</legend>
        <!--文件上传-->
        <div>
          <label for="uploads">上传头像:</label>
          <input
            type="file"
            name="user_pic"
            id="uploads"
            accept="image/png, image/jpeg, image/gif"
          />
        </div>
        <!--文本域-->
        <div>
          <label for="resume">简历:</label>
          <!--注意文本域没有value属性-->
          <textarea
            name="resume"
            id="resume"
            cols="30"
            rows="5"
            placeholder="不超过100字"
          ></textarea>
        </div>
      </fieldset>
      <!-- 隐藏域, 例如用户的Id, 注册，登录的时间。。。。
         隐藏域是为后端取数存数准备的，无须显示但必须存在的数据可以用隐藏域
        用JS控制后，也可实现显示/隐藏效果 -->
      <input type="hidden" name="user_id" value="123" />
      <p>
        <!-- submit为提交按钮控件，现在流行直接加button,不建议用submit,因样式控制没有button方便 -->
        <input type="submit" value="提交" class="btn" />
        <button class="btn">提交</button>
      </p>
    </form>
  </body>

样式代码

<style>
      body {
        color: #555;
      }
      h3 {
        /* 文本居中 */
        text-align: center;
      }
      form {
        width: 450px;
        /* 外边距 */
        margin: 30px auto;
        border-top: 1px solid #aaa;
      }
      form fieldset {
        border: 1px solid seagreen;
        background-color: lightcyan;
        box-shadow: 2px 2px 4px #bbb;
        border-radius: 10px;
        margin: 20px;
      }
      form fieldset legend {
        background-color: rgb(178, 231, 201);
        /* border-radius：给元素添加圆角边框 */
        border-radius: 10px;
        color: seagreen;
        padding: 5px 15px;
      }
      form div {
        margin: 5px;
      }
      form p {
        text-align: center;
      }
      form .btn {
        width: 80px;
        height: 30px;
        border: none;
        background-color: seagreen;
        color: #ddd;
      }
      /* 按钮鼠标悬停样式 */
      form .btn:hover {
        background-color: coral;
        color: white;
        cursor: pointer;
      }
      /* 文本框得到焦点后的样式 */
      input:focus {
        background-color: rgb(226, 226, 175);
      }
    </style>

显示效果

登录界面实战

批改老师：

WJ

批改状态：合格

老师批语：写的非常不错，格式也工整！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

前端入门如何安装VSCODE+PHPSTUDY 认识MarkDown

2020-06-11 16:14:24