普通表格
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>普通表格练习</title><style>* { padding: 0; margin: 0; font-size: 14px; }table { width: 50%; margin: auto; border-collapse: collapse; }table caption { font-size: 1.2rem; margin: 15px 0;}table thead { background-color: #f9f8f8; }td, th { padding: 10px; border-bottom: 1px solid #f5f5f5; }tbody td:nth-child(n + 2) { text-align: center; }tbody tr:nth-child(even) { background-color: #f9f8f8 } /* 隔行换色 */tbody tr:hover { background-color: #f9f8f8; } /* 鼠标掠过改变行背景色 */tfoot { font-weight: bolder; }div { width: 50%; margin: 20px auto; text-align: right; }div button { background-color: #ff3600; color: #FFF; border: none; padding: 5px 15px; cursor: pointer; }</style></head><body><table><caption>我的购物车</caption><thead><tr><th>物品</th><th>数量</th><th>价格</th></tr></thead><tbody><tr><td>碧螺春 茶叶绿茶2020新茶 明前一级春茶嫩芽 250克</td><td>x1</td><td>108</td></tr><tr><td>佳佰 温差全自动搅拌杯智能咖啡杯磁力旋转杯子创意礼品杯</td><td>x1</td><td>149</td></tr><tr><td>欧莱雅男士火山岩控油抗痘护肤套装</td><td>x1</td><td>249</td></tr><tr><td>小米儿童电话手表3C?移动联通4G?防水GPS定位</td><td>x1</td><td>349</td></tr><tr><td>德国品牌宝视德（Bresser)儿童生物显微镜</td><td>x1</td><td>175</td></tr></tbody><tfoot><tr><td>总计</td><td colspan="2">1632</td></tr></tfoot></table><div><button>立即结算</button></div></body></html>
DIV表格
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>DIV表格练习</title><style>* { padding: 0; margin: 0; font-size: 14px; }.table { display: table; width: 50%; margin: auto; }.table-caption { display: table-caption; font-size: 1.2rem; margin: 15px 0; text-align: center; }.table-header { display: table-header-group; text-align: center; font-weight: bolder; }.table-header .table-row { background-color: #f9f8f8; }.table-row { display: table-row; }.table-cell { display: table-cell; padding: 10px; border-bottom: 1px solid #f5f5f5; }.table-body { display: table-row-group; }.table-footer { display: table-footer-group; font-weight: bolder; }.table-row .table-cell:nth-child(n + 2) { text-align: center; } /* 最后两列居中显示 */.table-body .table-row:nth-child(even) { background-color: #f9f8f8; } /* 隔行换色 */.table-body .table-row:hover { background-color: #f9f8f8; }.btn-box { width: 50%; margin: 20px auto; text-align: right; }.btn-box button { background-color: #ff3600; color: #FFF; border: none; padding: 5px 15px; cursor: pointer; }</style></head><body><div class="table"><div class="table-caption">我的购物车</div><div class="table-header"><div class="table-row"><div class="table-cell">物品</div><div class="table-cell">数量</div><div class="table-cell">价格</div></div></div><div class="table-body"><div class="table-row"><div class="table-cell">碧螺春 茶叶绿茶2020新茶 明前一级春茶嫩芽 250克</div><div class="table-cell">x1</div><div class="table-cell">109</div></div><div class="table-row"><div class="table-cell">佳佰 温差全自动搅拌杯智能咖啡杯磁力旋转杯子创意礼品杯</div><div class="table-cell">x1</div><div class="table-cell">143</div></div><div class="table-row"><div class="table-cell">欧莱雅男士火山岩控油抗痘护肤套装</div><div class="table-cell">x1</div><div class="table-cell">189</div></div><div class="table-row"><div class="table-cell">小米儿童电话手表3C?移动联通4G?防水GPS定位</div><div class="table-cell">x1</div><div class="table-cell">349</div></div><div class="table-row"><div class="table-cell">德国品牌宝视德（Bresser)儿童生物显微镜</div><div class="table-cell">x1</div><div class="table-cell">175</div></div></div><div class="table-footer"><div class="table-row"><div class="table-cell">总计</div><div class="table-cell"></div><div class="table-cell">1632</div></div></div></div><div class="btn-box"><button>立即结算</button></div></body></html>
表单练习
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表单练习</title><style>* { margin: 0; padding: 0; font-size: 14px; }.regform { width: 50%; margin: auto; }fieldset { margin-top: 20px; border: 1px solid #ddd; }.regform legend { margin-left: 20px; padding: 0 10px; }.fieldbox { zoom: 1; padding-left: 10px; height: 40px; line-height: 40px; }.fieldbox:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }.fieldbox span { float: left; width: 80px; }input { padding: 3px 5px; }.btn-box { width: 50%; margin: 20px auto; text-align: center; }.btn-box button { background-color: #ff3600; color: #FFF; border: none; padding: 5px 15px; cursor: pointer; }</style></head><body><div class="regform"><form action="" method="post"><fieldset><legend>注册信息</legend><div class="fieldbox"><label><span>账号：</span><input type="text" name="username" required placeholder="6-15位英文字符"></label></div><div class="fieldbox"><label><span>邮箱：</span><input type="email" name="email" required placeholder="请输入常用邮箱"></label></div><div class="fieldbox"><label><span>密码：</span><input type="password" name="password" required placeholder="请设置登录密码"></label></div><div class="fieldbox"><label><span>确认密码：</span><input type="password" name="password2" required placeholder="请再次输入密码"></label></div></fieldset><fieldset><legend>扩展信息</legend><div class="fieldbox"><label><span>年龄：</span><input type="text" name="age" placeholder="请输入年龄"></label></div><div class="fieldbox"><label><span>性别：</span><label><input type="radio" name="gender" value="1" checked> 男</label><label><input type="radio" name="gender" value="2"> 女</label></label></div><div class="fieldbox"><label><span>兴趣爱好：</span><label><input type="checkbox" name="hobby[]" value="打游戏"> 打游戏</label><label><input type="checkbox" name="hobby[]" value="看书"> 看书</label><label><input type="checkbox" name="hobby[]" value="听音乐"> 听音乐</label></label></div></fieldset><div class="btn-box"><button type="submit">立即注册</button></div></form></div></body></html>
学习小结
直播课堂时间有限，老师讲的也有限，课后自己练习，查阅相关资料很有必要。