search

博客列表 >第五课：表格和表单的介绍及作业的理解！

第五课：表格和表单的介绍及作业的理解！

XFY_肆意De...
XFY_肆意De...原创
2020年06月18日 12:03:48697浏览
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       table {
  9.         /* 清空表格之间的间隙 */
  10.         border-collapse: collapse;
  11.         /* 设置容器与容器之间的编剧，并且自动左右居中 */
  12.         margin: 0 auto;
  13.         /* 文字在表格内的内容居中显示 */
  14.         text-align: center;
  15.         width: 70%;
  16.       }
  17.       th,
  18.       td {
  19.         /* 设置表格的线条为1px 实线 颜色 */
  20.         border-bottom: 1px solid #c2c0c0;
  21.         /* 设置文字与表格内的内边距 */
  22.         padding: 10px;
  23.         /* 设置字体的宽度 */
  24.         font-weight: lighter;
  25.       }
  26.       th {
  27.         background-color: #b0c4de;
  28.       }
  29.       tbody tr:hover {
  30.         background-color: #f5f5f5;
  31.       }
  32.       tfoot td {
  33.         border-bottom: none;
  34.         color: red;
  35.         font-size: 1.2rem;
  36.       }
  37.       button {
  38.         /* 设置按钮于右边父容器的距离 */
  39.         margin-right: 10px;
  40.         border: none;
  41.         width: 100px;
  42.         height: 30px;
  43.         /* 让按钮向右漂浮 */
  44.         float: right;
  45.         color: white;
  46.         background-color: #87cefa;
  47.       }
  48.       button:hover {
  49.         width: 120px;
  50.         height: 35px;
  51.       }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <table>
  56.       <!-- 表格的标题 -->
  57.       <caption style="mask-border: 15px; font-size: 1.45rem; color: #b0c4de;">
  58.         购物车
  59.       </caption>
  60.       <!-- 表格的头部份 -->
  61.       <thead>
  62.         <!-- tr决定了一个表格部分里有多个个行，td决定了一个表格里有多个列，th是表头，与td相比多了两个样式。 -->
  63.         <tr>
  64.           <th>商品名称</th>
  65.           <th>商品编码</th>
  66.           <th>商品数量</th>
  67.           <th>商品单价</th>
  68.           <th>商品总价</th>
  69.         </tr>
  70.       </thead>
  71.       <!-- 表格的主体部分 -->
  72.       <tbody>
  73.         <tr>
  74.           <td>华为mate40 pro</td>
  75.           <td>phone-1</td>
  76.           <td>1</td>
  77.           <td>4000</td>
  78.           <td>4000</td>
  79.         </tr>
  80.         <tr>
  81.           <td>iphone 11</td>
  82.           <td>phone-2</td>
  83.           <td>2</td>
  84.           <td>4500</td>
  85.           <td>9000</td>
  86.         </tr>
  88.         <tr>
  89.           <td>荣耀9X</td>
  90.           <td>phone-3</td>
  91.           <td>1</td>
  92.           <td>1500</td>
  93.           <td>1500</td>
  94.         </tr>
  95.       </tbody>
  96.       <!-- 表格的尾部 -->
  97.       <tfoot>
  98.         <tr>
  99.           <td colspan="4" align="right">总计:</td>
  100.           <td align="left">14500</td>
  101.         </tr>
  102.       </tfoot>
  103.     </table>
  104.     <div style="width: 70%; margin: 10px auto;">
  105.       <button>提交结算</button>
  106.     </div>
  107.   </body>
  108. </html>

效果圖：
第五課實戰

表單实践

0.<fieldset></fieldset>标签为美化标签!
1.利用label 标签对绑定实行绑定！且绑定规则为label的属性名<label for="id"></label>和<ipput id="id">绑定
2.input内的search类型常用作感兴趣的搜索!.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         fieldset {
  9.             width: 30%;
  10.             margin: 0 auto;
  11.             border: 3px solid #AFEEEE;
  12.             border-radius: 15px 30px 15px 30px;
  13.             background-color: #AFEEEE;
  14.             text-align: left;
  15.         }
  16.         input {
  17.             border: none;
  18.         }
  19.         input::placeholder {
  20.             font-size: 13px;
  21.         }
  22.         legend {
  23.             width: 200px;
  24.             font-size: large;
  25.             text-align: center;
  26.             border: 1px solid #AFEEEE;
  27.             border-radius: 15px 30px 15px 30px;
  28.             background-color: springgreen;
  29.         }
  30.         form div {
  31.             margin-top: 10px;
  32.         }
  33.         button {
  34.             display: block;
  35.             margin: 20px auto;
  36.             width: 100px;
  37.             height: 30px;
  38.             border: none;
  39.             background-color: #AFEEEE;
  40.         }
  41.         button:hover {
  42.             width: 110px;
  43.             height: 35px;
  44.             cursor: pointer;
  45.             color: white;
  46.         }
  47.         .ptl {
  48.             text-align: left;
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53.     <div>
  54.         <!-- 这是一个表单标签 -->
  55.         <form>
  56.             <!-- 表示一个控件组 -->
  57.             <fieldset>
  58.                 <!-- 控件组的标题 -->
  59.                 <legend>注册信息(必填)</legend>
  60.                 <div>
  61.                     <!-- 点击文字即可和绑定id的控件获取焦点 -->
  62.                     <label for="mu-username">账号:</label>
  63.                     <!-- type="text"表示是一个文本格式的输入框 -->
  64.                     <input type="text" id="mu-username" name="username" placeholder="账户需由4-10位英文加数字 autofocus">
  65.                 </div>
  66.                 <div>
  67.                     <label for="">邮箱:</label>
  68.                     <!-- type="email"这是一个邮箱格式的输入框 -->
  69.                     <input type="email" name="email" id="email-id" placeholder="请输入邮箱">
  70.                 </div>
  71.                 <div>
  72.                     <label for="psd-1">密码:</label>
  73.                     <!-- type="password"表示这是一个密码域 -->
  74.                     <input type="password" id="psd-1" name="password-1" placeholder="请您输入密码">
  75.                 </div>
  76.                 <div>
  77.                     <label for="pad-2">确定:</label>
  78.                     <input type="password" id="pad-2" name="password-20" placeholder="确定密码">
  79.                 </div>
  80.             </fieldset>
  81.             <fieldset style="margin-top: 30px;">
  82.                 <legend>扩展信息(选填)</legend>
  83.                 <div>
  84.                     <label for="">生日:</label>
  85.                     <!-- type="date"是一个时间选择，一般作用于获取出生年月日 -->
  86.                     <input type="date" name="birthday">
  87.                 </div>
  88.                 <div>
  89.                     <label for="secret">性别:</label>
  90.                     <label for="male">男</label>
  91.                     <!-- type="radio"表示这个控件是一个单选按钮，只能选择一个 -->
  92.                     <input type="radio" name="gender" value="male" id="male">
  93.                     <label for="female">女</label>
  94.                     <input type="radio" name="gender" value="female" id="female">
  95.                     <label for="secret">保密</label>
  96.                     <input type="radio" name="gender" value="secret" id="secret">
  97.                 </div>
  98.                 <div>
  99.                     <!-- type="checkbox"是一个复选按钮，可以选择多个 -->
  100.                     <label>爱好:</label>
  101.                     <label for="game">打游戏</label>
  102.                     <input type="checkbox" name="hobby[]" id="game" value="game">
  103.                     <label for="shoot">摄影</label>
  104.                     <input type="checkbox" name="hobbyp[]" id="shoot" value="shoot">
  105.                     <label for="progarmme">编程</label>
  106.                     <input type="checkbox" name="hobby[]" id="progarmme" value="progarmme">
  107.                 </div>
  108.                 <div>
  109.                     <label for="brand">手机:</label>
  110.                     <!-- type="search"表示这是一个下拉菜单 -->
  111.                     <input type="search" list="phone" name="brand" id="brand">
  112.                     <datalist id="phone">
  113.                         <option value="apple">苹果</option>
  114.                         <option value="huawei" label="华为"></option>
  115.                         <option value="mi" label="小米"> </option>
  116.                     </datalist>
  117.                 </div>
  118.             </fieldset>
  119.             <fieldset style="margin-top: 30px;">
  120.                 <legend>头像与个性签名</legend>
  121.                 <div>
  122.                     <label for="uploads">上传头像</label>
  123.                     <!-- type="file"是文件域，一般用于上传文件 -->
  124.                     <input type="file" name="user_pic" id="uploads" accept="image/png, image/jpeg, image/gif">
  125.                 </div>
  126.                 <div>
  127.                     <label for="resume">简历:</label>
  128.                     <!-- textarea标签是一个文本域，可以理解为是多个文本框合在一起的 -->
  129.                     <textarea name="resume" id="resume" cols="30" rows="5" placeholder="不超过100字"></textarea>
  130.                 </div>
  131.     </div>
  132.     </fieldset>
  133.     </form>
  134.     <button class="btn">提交</button>
  135.     </div>
  136. </body>
  137. </html>

效果：

上一条：盒模型及其大小计算方式和对齐方式下一条：前端选择器的认识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议