search

博客列表 >表格实现购物车及表单实现

表格实现购物车及表单实现

leverWang
leverWang原创
2020年06月17日 17:59:121407浏览

购物车

效果图

  1. <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.             text-align: center;
  10.             width: 50%;
  11.             margin: 0 auto;
  12.             border-collapse: collapse;
  13.         }
  15.         table>caption {
  16.             margin-bottom: 20px;
  17.             font-size: 1.5rem;
  18.         }
  20.         th,
  21.         td {
  22.             border-bottom: 1px solid rgb(99, 99, 99);
  23.             padding: 10px 0;
  24.             color: #4e4e4e;
  25.             font-weight: lighter;
  26.         }
  28.         tbody>tr:nth-last-of-type(2n) {
  29.             background: rgba(194, 194, 194, .2);
  30.         }
  32.         tbody>tr:hover {
  33.             background: lightpink;
  34.         }
  36.         table>thead {
  37.             background: rgba(0, 129, 168, .1);
  38.         }
  39.     </style>
  40. </head>
  42. <body>
  44.     <table>
  45.         <caption>清单</caption>
  46.         <thead>
  47.             <tr>
  48.                 <th>ID</th>
  49.                 <th>商品名称</th>
  50.                 <th>数量</th>
  51.                 <th>价格</th>
  52.             </tr>
  53.         </thead>
  55.         <tbody>
  56.             <tr>
  57.                 <td>1</td>
  58.                 <td>罗技（Logitech）M185</td>
  59.                 <td>1</td>
  60.                 <td>59</td>
  61.             </tr>
  63.             <tr>
  64.                 <td>2</td>
  65.                 <td>罗技（Logitech）MK275</td>
  66.                 <td>1</td>
  67.                 <td>100</td>
  68.             </tr>
  72.             <tr>
  73.                 <td>3</td>
  74.                 <td>技嘉(GIGABYTE)RTX2070</td>
  75.                 <td>1</td>
  76.                 <td>6600</td>
  77.             </tr>
  79.             <tr>
  80.                 <td>4</td>
  81.                 <td>戴尔（DELL）U2720QM</td>
  82.                 <td>1</td>
  83.                 <td>4200</td>
  84.             </tr>
  86.             <tr>
  87.                 <td>5</td>
  88.                 <td>英特尔（Intel）i9-10900K</td>
  89.                 <td>1</td>
  90.                 <td>4499</td>
  91.             </tr>
  92.         </tbody>
  94.         <tfoot>
  95.             <tr>
  96.                 <td colspan="2">总计:</td>
  97.                 <td>5</td>
  98.                 <td>15517</td>
  99.             </tr>
  100.         </tfoot>
  104.     </table>
  106. </body>
  108. </html>

表单实现

效果图

  1. <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.         * {
  9.             padding: 0;
  10.             margin: 0;
  11.         }
  13.         .reg {
  14.             width: 30%;
  15.             margin: 0 auto;
  16.             background: #e6e6e6;
  17.             border-radius: 10px;
  18.             margin-top: 30px;
  19.         }
  21.         h1 {
  22.             font: 1.2rem;
  23.             padding: 10px;
  24.             display: block;
  25.             text-align: center;
  26.             color: #FFF;
  27.             background: #008079;
  28.             border-radius: 5px 5px 0px 0px;
  29.             border-bottom: 1px solid #89AF4C;
  30.             margin-bottom: 20px;
  32.         }
  34.         input,
  35.         button {
  36.             outline: none;
  37.         }
  39.         textarea {
  40.             width: 100%;
  41.             border: 1px solid #e6e6e6;
  42.             margin-bottom: 15px;
  43.             border-radius: 5px;
  44.             padding-left: 10px;
  45.             margin-top: 10px;
  46.             padding-top: 15px;
  47.         }
  49.         input[type="search"],
  50.         input[type="email"],
  51.         input[type="text"] {
  52.             width: 80%;
  53.             height: 40px;
  54.             line-height: 40px;
  55.             border: 1px solid #e6e6e6;
  56.             margin-bottom: 15px;
  57.             border-radius: 5px;
  58.             padding-left: 10px;
  59.         }
  61.         textarea:focus,
  62.         input[type="search"]:focus,
  63.         input[type='email']:focus,
  64.         input[type='text']:focus {
  65.             border-color: #66afe9;
  66.             outline: 0;
  67.             box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
  68.         }
  70.         .reg-form {
  71.             padding: 20px;
  72.         }
  74.         label>span {
  75.             display: inline-block;
  76.             width: 84px;
  77.         }
  79.         .radio_type {
  80.             width: 20px;
  81.             height: 20px;
  82.             appearance: none;
  83.             position: relative;
  84.         }
  86.         .radio_type:before {
  87.             content: '';
  88.             width: 20px;
  89.             height: 20px;
  91.             display: inline-block;
  92.             border-radius: 50%;
  94.         }
  96.         .radio_type:checked:before {
  97.             content: '';
  98.             width: 20px;
  99.             height: 20px;
  100.             border: 1px solid #008079;
  101.             background: #008079;
  102.             display: inline-block;
  103.             border-radius: 50%;
  104.             vertical-align: middle;
  105.         }
  107.         .radio_type:checked:after {
  108.             content: '';
  109.             width: 10px;
  110.             height: 5px;
  111.             border: 2px solid white;
  112.             border-top: transparent;
  113.             border-right: transparent;
  114.             text-align: center;
  115.             display: block;
  116.             position: absolute;
  117.             top: 6px;
  118.             left: 5px;
  119.             vertical-align: middle;
  120.             transform: rotate(-45deg);
  121.         }
  123.         .radio_type:checked+label {
  124.             color: #008079;
  125.         }
  127.         .radio_type+label {
  128.             line-height: 20px;
  129.             display: inline-block;
  130.             margin-left: 5px;
  131.             margin-right: 15px;
  132.             color: #333;
  133.         }
  135.         .mb15 {
  136.             margin-bottom: 15px;
  137.         }
  139.         input[type="checkbox"] {
  140.             width: 20px;
  141.             height: 20px;
  142.         }
  144.         button,
  145.         input[type="submit"],
  146.         input[type="reset"] {
  147.             padding: 15px 30px;
  148.             border: none;
  149.             background: #008079;
  150.             color: #fff;
  151.             border-radius: 5px;
  152.             margin-left: 15px;
  153.         }
  155.         .btn {
  156.             text-align: center;
  157.         }
  158.     </style>
  159. </head>
  161. <body>
  162.     <div class="reg">
  163.         <h1>注册</h1>
  164.         <form action="" method="post" class="reg-form">
  165.             <label for="uname">
  166.                 <span> 账号：</span> <input type="text" id="uname" name="uname" placeholder="5-10位中文或字母" required>
  167.             </label>
  168.             <label for="pwd">
  169.                 <span> 密码：</span> <input type="text" id="pwd" name="pwd" placeholder="6-20位字母+数字" required>
  170.             </label>
  171.             <label for="repwd">
  172.                 <span> 确认密码：</span> <input type="text" id="repwd" name="repwd" placeholder="确认密码" required>
  173.             </label>
  174.             <label for="email">
  175.                 <span> 邮箱：</span> <input type="email" id="email" name="email" placeholder="example@example.com" required>
  176.             </label>
  178.             <div class="mb15">
  179.                 <label for="male"> <span>性别:</span></label>
  180.                 <input class="radio_type" type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
  181.                 <input class="radio_type" type="radio" name="gender" value="2" id="female"><label for="female ">女</label>
  182.             </div>
  184.             <div class="mb15">
  185.                 <label for="other"><span>爱好:</span></label>
  186.                 <input type="checkbox" name="checkboox[]" id="basketball" value="basketball"> <label for="basketball">篮球</label>
  187.                 <input type="checkbox" name="checkboox[]" id="shoot" value="shoot"> <label for="shoot">摄影</label>
  188.                 <input type="checkbox" name="checkboox[]" id="other" value="other"> <label for="other">其他</label>
  189.             </div>
  191.             <div class="mb15">
  192.                 <label for="brand"><span>手机品牌:</span> </label>
  193.                 <input type="search" list="phone" name="brand" id="brand">
  194.                 <datalist id="phone">
  195.                     <option value="apple">
  196.                     <option value="huawei">
  197.                     <option value="mi">
  198.                 </datalist>
  199.             </div>
  201.             <div class="mb15">
  202.                 <label for="upload"><span>头像上传:</span> </label>
  203.                 <input type="file" name="upload" id="upload" accept="image/png, image/jpeg, image/gif">
  204.             </div>
  206.             <div class="mb15">
  207.                 <p>
  208.                     <label for="birthday"><span>生日:</span></label>
  209.                     <input type="date" id="birthday" name="birthday">
  210.                 </p>
  212.             </div>
  214.             <div class="mb15">
  215.                 <label for="birthday"><span>简历:</span></label>
  216.                 <textarea name="resume" id="resume" cols="50" rows="10" placeholder="不超过100字"></textarea>
  217.             </div>
  219.             <div class="btn">
  220.                 <button>提交</button>
  221.                 <input type="submit" value="注册" name="submit">
  222.                 <input type="reset" value="重填" name="reset">
  223.             </div>
  225.         </form>
  226.     </div>
  227. </body>
  229. </html>
上一条：表单表格实现购物车与登录界面（静态页面）下一条：表格和表单的学习与应用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多