代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表格实现购物车静态页面、用户注册页面</title> <style> table { width: 70%; margin: 0 auto; text-align: center; border-collapse: collapse; } caption { font-size: 20px; font-weight: 700; margin-bottom: 20px; } th, td { border-bottom: 1px solid #ddd; padding: 4px 0; } th { font-weight: 400; } thead tr { background: #d4b078; } tbody tr:nth-of-type(even) { background: #ecdabe; } tbody tr:hover { background: #d4b078; } .submit { float: right; margin-right: 15%; margin-top: 20px; border: none; width: 100px; height: 30px; background: #67bf6b; color: #fff; border-radius: 2px; } .submit:hover { font-size: 1.1rem; } div label:first-child{ width: 100px; display: inline-block; text-align: right; } .form{ width: 40%; margin: 0 auto; margin-top: 140px; } .form h2{ text-align: center; } </style> </head> <body> <table> <caption>购物车</caption> <thead> <tr> <th>ID</th> <th>数量</th> <th>单价（元）</th> <th>单位</th> <th>数量</th> <th>金额（元）</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>物品名称</td> <td>999</td> <td>件</td> <td>1</td> <td>999</td> </tr> <tr> <td>2</td> <td>物品名称</td> <td>999</td> <td>件</td> <td>1</td> <td>999</td> </tr> <tr> <td>3</td> <td>物品名称</td> <td>999</td> <td>件</td> <td>1</td> <td>999</td> </tr> <tr> <td>4</td> <td>物品名称</td> <td>999</td> <td>件</td> <td>1</td> <td>999</td> </tr> <tr> <td>5</td> <td>物品名称</td> <td>999</td> <td>件</td> <td>1</td> <td>999</td> </tr> <tr> <td>6</td> <td>物品名称</td> <td>999</td> <td>件</td> <td>1</td> <td>999</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">总计</td> <td>6</td> <td>5994</td> </tr> </tfoot> </table> <button class="submit">结算</button> <div class="form"> <h2>用户注册</h2> <form action="" method="post"> <fieldset> <legend>必填项目</legend> <div> <label for="userName">用户名：</label> <input type="text" name="userName" placeholder="用户名" id="userName" /> </div> <div> <label for="email">邮箱：</label> <input type="email" name="email" placeholder="邮箱" id="email" /> </div> <div> <label for="password">密码：</label> <input type="password" name="password" placeholder="*****" id="password" /> </div> <div> <label for="confirmPassword">确认密码：</label> <input type="password" name="confirmPassword" id="confirmPassword" /> </div> </fieldset> <fieldset> <legend>选填项目</legend> <div> <label for="birthday">生日:</label> <input type="date" name="birthday" id="birthday" /> </div> <div> <label for="">性别:</label> <input type="radio" name="gender" value="male" id="male" checked /> <label for="male">男</label> <input type="radio" name="gender" value="female" id="female" /> <label for="female">女</label> </div> <div> <label for="programme">爱好:</label> <input type="checkbox" name="hobby[]" id="game" value="game" /> <label for="game">打游戏</label> <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> <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> </form> </div> </body> </html>
效果图
