简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >前端表格与表单的实战

前端表格与表单的实战

北纬38
北纬38原创
2020年06月18日 16:33:50678浏览

1.表格实现购物车

知识点：

标签 描述
table 定义表格
th 定义表头
tr 定义行
td 定义列
caption 定义标题
thead 定义表格头部
tbody 定义表格主体
tfoot 定义表格底部
display 设置元素显示类型

表格HTML代码：

  1.     <table>
  2.         <!-- 标题 -->
  3.         <caption>京东618购物车</caption>
  4.         <!-- 头部 -->
  5.         <thead>
  6.             <tr>
  7.                 <th>序号</th>
  8.                 <th>名称</th>
  9.                 <th>单价</th>
  10.                 <th>数量</th>
  11.                 <th>总价</th>
  12.             </tr>
  13.         </thead>
  14.             <!-- 主体 -->
  15.         <tbody>
  16.             <tr>
  17.                 <td>1</td>
  18.                 <td>华为P40Pro</td>
  19.                 <td>5800</td>
  20.                 <td>1</td>
  21.                 <td>5800</td>
  22.             </tr>
  23.             <tr>
  24.                 <td>2</td>
  25.                 <td>联想X1笔记本电脑</td>
  26.                 <td>13000</td>
  27.                 <td>1</td>
  28.                 <td>13000</td>
  29.             </tr>
  30.             <tr>
  31.                 <td>3</td>
  32.                 <td>飞利浦理发器</td>
  33.                 <td>240</td>
  34.                 <td>1</td>
  35.                 <td>240</td>
  36.             </tr>
  37.             <tr>
  38.                 <td>4</td>
  39.                 <td>电脑椅</td>
  40.                 <td>2500</td>
  41.                 <td>1</td>
  42.                 <td>2500</td>
  43.             </tr>
  44.         </tbody>
  45.         <!-- 底部 -->
  46.         <tfoot>
  47.             <td colspan="4">合计</td>
  48.             <td>21540</td>
  49.         </tfoot>
  50.     </table>
  51.             <!-- 结算 -->
  52.             <div>
  53.                 <button>结算</button>
  54.             </div>

CSS样式代码：

  1.     <style>
  2.         html{font-size: 20px;}
  3.         /* 去掉单元格间隔 */
  4.         table{
  5.             border-collapse: collapse;
  6.             width: 50%;
  7.             margin: auto;
  8.             color: black;
  9.             font-weight: lighter;
  10.             text-align: center;
  11.         }
  12.         /* 表格线直接加单元格上面 */
  13.         table thead th,
  14.         table td{
  15.             border-bottom: 1px solid #000;
  16.             padding: 20px;
  17.         }
  18.         /* 标题样式 */
  19.         table caption{
  20.             font-size: 1.5rem;
  21.             font-family: STHUPO;
  22.             color: darkred;
  23.             margin-bottom: 18px;
  24.         }
  25.         /* 表头样式 */
  26.         table th{
  27.             color: chocolate;
  28.             background-color: deepskyblue;
  29.         }
  30.         /* 隔行变色 */
  31.         table tbody tr:nth-of-type(even){
  32.             background-color: greenyellow;
  33.         }
  34.         /* 鼠标悬停效果 */
  35.         table tbody tr:hover{
  36.             background-color: orangered;
  37.         }
  38.         /* 底部样式 */
  39.         table tfoot td{
  40.             border-bottom：none;
  41.             color: orangered;
  42.             font-size: 20px;
  43.             font-weight: bolder;
  44.         }
  45.         /* 结算按钮 */
  46.         body div:last-of-type{
  47.             width: 50%;
  48.             margin: 15px auto;
  49.         }
  50.         body div:first-of-type button{
  51.             /* 靠右 */
  52.             float: right;
  53.             width: 120px;
  54.             height: 40px;
  55.             background-color: darkorange;
  56.             color: white;
  57.             border: none;
  58.             font-size: large;
  59.             /* 设置鼠标样式 */
  60.             cursor: pointer;
  61.         }
  62.         body div:first-of-type button:hover{
  63.             background-color: violet;
  64.             font-size: 1.1rem;
  65.         }
  66.     </style>

实例图：

2.换个姿势玩表格

HTML代码部分：

  1. <body>
  2.         <!-- 表格:<table>< -->
  3.             <div class="table">
  4.                 <!-- 标题 -->
  5.                 <div class="table-caption">选拔信息表</div>
  6.                 <!-- 列分组 -->
  7.                 <div class="table-colgroup">
  8.                   <div class="table-col"></div>
  9.                   <div class="table-col"></div>
  10.                   <div class="table-col"></div>
  11.                 </div>
  13.                 <!-- 表头 -->
  14.                 <div class="table-thead">
  15.                   <!-- 行 -->
  16.                   <div class="table-row">
  17.                     <div class="table-cell">ID</div>
  18.                     <div class="table-cell">姓名</div>
  19.                     <div class="table-cell">性别</div>
  20.                   </div>
  21.                 </div>
  23.                 <!-- 主体 -->
  24.                 <div class="table-tbody">
  25.                   <div class="table-row">
  26.                     <div class="table-cell">1</div>
  27.                     <div class="table-cell">张飞</div>
  28.                     <div class="table-cell">男</div>
  29.                   </div>
  30.                   <div class="table-row">
  31.                     <div class="table-cell">2</div>
  32.                     <div class="table-cell">李丹</div>
  33.                     <div class="table-cell">女</div>
  34.                   </div>
  35.                   <div class="table-row">
  36.                     <div class="table-cell">3</div>
  37.                     <div class="table-cell">杜子腾</div>
  38.                     <div class="table-cell">男</div>
  39.                   </div>
  40.                   <div class="table-row">
  41.                     <div class="table-cell">4</div>
  42.                     <div class="table-cell">熊莉</div>
  43.                     <div class="table-cell">女</div>
  44.                   </div>
  45.                 </div>
  47.                 <!-- 底部<tfoot> -->
  48.                 <div class="table-tfoot">
  49.                   <div class="table-row">
  50.                     <div class="table-cell">X</div>
  51.                     <div class="table-cell">Y</div>
  52.                     <div class="table-cell">Z</div>
  53.                   </div>
  54.                 </div>
  55.               </div>
  56. </body>

CSS代码部分：

  1.     <style>
  2.               /* 表格 */
  3.       .table {
  4.         display: table;
  5.         border: 1px solid #000;
  6.         width: 500px;
  7.         text-align: center;
  8.         margin: auto;
  9.       }
  11.       /* 标题 */
  12.       .table-caption {
  13.         display: table-caption;
  14.         margin-bottom: 16px;
  15.         font-size: 1.5rem;
  16.       }
  18.       /* 表头 */
  19.       .table-thead {
  20.         display: table-header-group;
  21.         background-color: darkgrey;
  22.       }
  23.       /* 行 */
  24.       .table-row {
  25.         display: table-row;
  26.       }
  27.       /* 列 */
  28.       .table-cell {
  29.         display: table-cell;
  30.         border: 1px solid #000;
  31.         padding: 10px;
  32.       }
  33.       /* 主体 */
  34.       .table-tbody {
  35.         display: table-row-group;
  36.       }
  37.       /* 底部 */
  38.       .table-tfoot {
  39.         display: table-footer-group;
  40.       }
  41.       /* 列分组样式 */
  42.       .table-colgroup {
  43.         display: table-column-group;
  44.       }
  45.       .table-colgroup .table-col:first-of-type {
  46.         display: table-column;
  47.         background-color: darkslategray;
  48.       }
  49.       .table-colgroup .table-col {
  50.         display: table-column;
  51.         background-color: deepskyblue;
  52.       }
  53.     </style>

实例图：

3.表单实现用户注册

标签 描述
<fieldset>.. < /fieldset> 控件组
placeholder 提示信息
autofocus 自动获取焦点
email类型 <input type="email">
密码类型 <input type="password" name="password">
<legend> ..</legend> 扩展信息
radio 单选
checkbox 复选/多选
日期选择器 <input type="date">
textarea 文本域
file 文件上传
hidden 隐藏域

HTML代码部分

  1. <body>
  2.     <h3>用户注册</h3>
  3.     <!-- form+input -->
  4.     <form action="" method="POST">
  5.         <!-- 控件组 -->
  6.         <fieldset>
  7.             <legend>基本信息（必填）</legend>
  8.             <div>
  9.                 <label for="my-username">账号:</label>
  10.                 <input
  11.                   type="text"
  12.                   id="my-username"
  13.                   name="username"
  14.                   placeholder="6-15位字符"
  15.                   autofocus
  16.                 />
  17.               </div>
  18.               <div>
  19.                 <label for="email-id">邮箱:</label>
  20.                 <input
  21.                   type="email"
  22.                   name="email"
  23.                   id="email-id"
  24.                   placeholder="demo@example.com"
  25.                 />
  26.               </div>
  27.               <!-- 密码 -->
  28.               <div>
  29.                 <label for="pwd-2">密码:</label>
  30.                 <input type="password"" name="password1" id="pwd-2"
  31.                 placeholder="不少于8位且字母+数字" />
  32.               </div>
  33.               <div>
  34.                 <label for="pwd-1">确认:</label>
  35.                 <input type="password" name="password2" id="pwd-1" />
  36.               </div>
  37.               <div>
  38.                 <label>
  39.                     电话: <input type="phone" name="手机"placeholder="11位数手机号码"required/>
  40.                 </label>
  41.               </div>
  42.             </fieldset>
  44.             <fieldset>
  45.               <legend>扩展信息(选填)</legend>
  46.               <div>
  47.                 <label>
  48.                     姓名: <input type="text" name="fullName" />
  49.               </label>
  50.               </div>
  51.               <div>
  52.                 <label>
  53.                     生日: <input type="date" name="birthday" />
  54.                 </label>
  55.               </div>
  56.               <div>
  57.                 <!-- 单选按钮 -->
  58.                 <label for="secret">性别:</label>
  59.                 <!-- 单选按钮中的name属性名必须相同 -->
  60.                 <input type="radio" name="gender" value="male" id="male" />
  61.                 <label for="male">男</label>
  62.                 <input type="radio" name="gender" value="female" id="female" />
  63.                 <label for="female">女</label>
  64.                 <input type="radio" name="gender" value="secret" id="secret"checked/>
  65.                 <label for="secret">保密</label>
  66.               </div>
  67.               <div>
  68.                 <!-- 复选框 -->
  69.                 <label for="programme">爱好</label>
  70.                 <!-- 因为复选框返回是一个或多个值，最方便后端用数组来处理， 所以将name名称设置为数组形式便于后端脚本处理 -->
  71.                 <input type="checkbox" name="hobby[]" id="game" value="game" />
  72.                 <label for="game">游泳</label>
  73.                 <input
  74.                   type="checkbox"
  75.                   name="hobby[]"
  76.                   value="shoot"
  77.                   id="shoot"
  78.                 /><label for="shoot">阅读</label>
  79.                 <input
  80.                   type="checkbox"
  81.                   name="hobby[]"
  82.                   value="programme"
  83.                   id="programme"
  84.                   checked
  85.                 /><label for="programme">编程</label>
  86.               </div>
  88.               <div>
  89.                 <!-- 选项列表 -->
  90.                 <label for="brand">手机:</label>
  91.                 <input type="search" list="phone" name="brand" id="brand" />
  92.                 <datalist id="phone">
  93.                   <option value="OPPO"> </option>
  94.                   <option value="huawei" label="华为"></option>
  95.                   <option value="mi" label="小米"> </option>
  96.                 </datalist>
  97.               </div>
  98.             </fieldset>
  100.             <fieldset>
  101.               <legend>其它信息(选填)</legend>
  102.               <!--文件上传-->
  103.               <div>
  104.                 <label for="uploads">上传头像:</label>
  105.                 <input
  106.                   type="file"
  107.                   name="user_pic"
  108.                   id="uploads"
  109.                   accept="image/png, image/jpeg, image/gif"
  110.                 />
  111.               </div>
  113.               <!--文本域-->
  114.               <div>
  115.                 <label for="resume">简历:</label>
  116.                 <!--注意文本域没有value属性-->
  117.                 <textarea
  118.                   name="resume"
  119.                   id="resume"
  120.                   cols="30"
  121.                   rows="5"
  122.                   placeholder="不超过300字"
  123.                 ></textarea>
  124.               </div>
  125.             </fieldset>
  127.             <!-- 隐藏域, 例如用户的Id, 注册，登录的时间。。。。 -->
  128.             <input type="hidden" name="user_id" value="123" />
  130.             <p>
  131.               <input type="submit" value="提交" class="btn" />
  132.               <button class="btn">提交</button>
  133.             </p>
  134.         </fieldset>
  135.     </form>
  136. </body>

CSS样式代码：

  1.     <style>
  2.         body {
  3.           color: #555;
  4.         }
  5.         h3 {
  6.           text-align: center;
  7.         }
  8.         form {
  9.           width: 450px;
  10.           margin: 30px auto;
  11.           border-top: 1px solid #aaa;
  12.         }
  13.         form fieldset {
  14.           border: 1px solid seagreen;
  15.           background-color: lightcyan;
  16.           box-shadow: 2px 2px 4px #bbb;
  17.           border-radius: 10px;
  18.           margin: 20px;
  19.         }
  20.         form fieldset legend {
  21.           background-color: rgb(178, 231, 201);
  22.           border-radius: 10px;
  23.           color: seagreen;
  24.           padding: 5px 15px;
  25.         }
  27.         form div {
  28.           margin: 5px;
  29.         }
  31.         form p {
  32.           text-align: center;
  33.         }
  34.         form .btn {
  35.           width: 80px;
  36.           height: 30px;
  37.           border: none;
  38.           background-color: seagreen;
  39.           color: #ddd;
  40.         }
  41.         form .btn:hover {
  42.           background-color: coral;
  43.           color: white;
  44.           cursor: pointer;
  45.         }
  47.         input:focus {
  48.           background-color: rgb(226, 226, 175);
  49.         }
  50.       </style>

实例图：

4.总结：

  • 表格: 注意布局格式
  • 表单：注意控件元素搭配
  • 整体上还是比较复杂的，后期可能会用到的比较多，还是要花时间多练习才能熟练使用。
上一条：盒模型常用元素属性之大小、位置下一条：CSS盒模型理解与盒子垂直水平居中
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多