关于作业的问题
来源：3-2 项目作业
Bighao啾啾啾
2019-08-16 23:43:04
老师，我在用tfoot进行定义网页底部的时候，出现效果不生效的现象，是什么问题呢？之前写别的项目的时候可以的，请老师赐教！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>H5作业</title>
<style>
/*All Tag*/
*{ margin: 0; padding: 0;}
table{ width: 100%; border: 1px solid #EEEEEE; border-collapse: collapse;}
/*header部分*/
thead{ height: 60px; background: #169bd5;}
thead > img{ height: 50px; line-height: 50px;}
/*body部分*/
tbody{ width: 100%;}
tbody .con1{ width: 12%; border: 2px solid #CCCCCC;}
tbody .con2{ width: 88%; border: 2px solid #CCCCCC;}
.con2-1,.con2-2{ width: 100%; height: 50px;}
.con2-5{ width: 100%;}
.con2-5 td{ border: 1px solid #CCCCCC; text-align: center;}
.con2-3{ width: 1200px; height: 50px;}
.con2-3-1{ width: 400px; height: 50px;}
.con2-4{ width: 500px; height: 50px;}
.con2-4 .img img{ height: 54px;}
/*底部*/
.footer{ height: 60px; background: #169BD5; line-height: 60px; text-align: center;}
tfoot{ height: 60px; background: #169BD5; line-height: 60px; text-align: center;}
<style>
</head>
<body>
<table>
<!--header部分-->
<thead>
<tr>
<td><img src="img/logo.png" /></td>
</tr>
</thead>
<!--主体-->
<tbody>
<table>
<tr>
<td class="con1" valign="top">
<p style="margin-top:20px">商品管理</p><br />
<p>评价管理</p><br />
<p>咨询管理</p><br />
<h3 style="margin-top: 50px;">全部订单</h3><br />
<p>已完成订单</p><br />
<p>待处理订单</p><br />
<p>今日物流</p><br />
<p style="margin-top: 50px;">月考核</p><br />
<p>季度考核</p><br />
<p>年度考核</p><br />
</td>
<td class="con2">
<table class="con2-1">
<tr>
<td>全部订单</td>
</tr>
</table>
<table class="con2-2">
<tr>
<td>
<form action="index.html">
<p>查询：<input type="date" name="date" />至<input type="date" name="date" /></p>
</form>
</td>
</tr>
</table>
<table class="con2-5">
<tr class="con2-3">
<td colspan="2" class="con2-3-1">宝贝信息</td>
<td class="con2-3-2">订单数量</td>
<td class="con2-3-3">单价</td>
<td class="con2-3-4">买家</td>
<td class="con2-3-5">下单时间</td>
<td class="con2-3-6">实付款</td>
<td class="con2-3-7">订单操作</td>
</tr>
<tr class="con2-4">
<td class="img"><img src="img/txue.png"></td>
<td class="con2-4-1">2019年个性男女潮牌imooc暮春之行文化衫</td>
<td class="con2-3-2">2</td>
<td class="con2-3-3">120</td>
<td class="con2-3-4">小明</td>
<td class="con2-3-5">2019-2-21 21:54</td>
<td class="con2-3-6">240</td>
<td class="con2-3-7">待付款</td>
</tr>
<tr class="con2-4">
<td class="img"><img src="img/xie.jpg"></td>
<td class="con2-4-1">2019年个性男女潮牌imooc暮春之行运动鞋</td>
<td class="con2-3-2">2</td>
<td class="con2-3-3">120</td>
<td class="con2-3-4">小李子</td>
<td class="con2-3-5">2019-2-21 19:04</td>
<td class="con2-3-6">240</td>
<td class="con2-3-7">未发货</td>
</tr>
<tr class="con2-4">
<td class="img"><img src="img/txue.png"></td>
<td class="con2-4-1">2019年个性男女潮牌imooc暮春之行文化衫</td>
<td class="con2-3-2">2</td>
<td class="con2-3-3">120</td>
<td class="con2-3-4">小红</td>
<td class="con2-3-5">2019-2-21 16:54</td>
<td class="con2-3-6">240</td>
<td class="con2-3-7">待发货</td>
</tr>
<tr class="con2-4">
<td class="img"><img src="img/xie.jpg"></td>
<td class="con2-4-1">2019年个性男女潮牌imooc暮春之行运动鞋</td>
<td class="con2-3-2">2</td>
<td class="con2-3-3">120</td>
<td class="con2-3-4">可乐</td>
<td class="con2-3-5">2019-2-21 14:30</td>
<td class="con2-3-6">240</td>
<td class="con2-3-7">未发货</td>
</tr>
<tr class="con2-4">
<td class="img"><img src="img/txue.png"></td>
<td class="con2-4-1">2019年个性男女潮牌imooc暮春之行文化衫</td>
<td class="con2-3-2">2</td>
<td class="con2-3-3">120</td>
<td class="con2-3-4">魏明</td>
<td class="con2-3-5">2019-2-21 14:30</td>
<td class="con2-3-6">240</td>
<td class="con2-3-7">未发货</td>
</tr>
<tr class="con2-4">
<td class="img"><img src="img/xie.jpg"></td>
<td class="con2-4-1">2019年个性男女潮牌imooc暮春之行运动鞋</td>
<td class="con2-3-2">2</td>
<td class="con2-3-3">120</td>
<td class="con2-3-4">李晓雨</td>
<td class="con2-3-5">2019-2-21 14:30</td>
<td class="con2-3-6">240</td>
<td class="con2-3-7">未发货</td>
</tr>
<tr class="con2-4">
<td class="img"><img src="img/txue.png"></td>
<td class="con2-4-1">2019年个性男女潮牌imooc暮春之行文化衫</td>
<td class="con2-3-2">2</td>
<td class="con2-3-3">120</td>
<td class="con2-3-4">艳艳</td>
<td class="con2-3-5">2019-2-21 14:30</td>
<td class="con2-3-6">240</td>
<td class="con2-3-7">未发货</td>
</tr>
<tr class="con2-4">
<td class="img"><img src="img/xie.jpg"></td>
<td class="con2-4-1">2019年个性男女潮牌imooc暮春之行运动鞋</td>
<td class="con2-3-2">2</td>
<td class="con2-3-3">120</td>
<td class="con2-3-4">片片</td>
<td class="con2-3-5">2019-2-21 14:30</td>
<td class="con2-3-6">240</td>
<td class="con2-3-7">未发货</td>
</tr>
<tr class="con2-4">
<td class="img"><img src="img/txue.png"></td>
<td class="con2-4-1">2019年个性男女潮牌imooc暮春之行文化衫</td>
<td class="con2-3-2">2</td>
<td class="con2-3-3">120</td>
<td class="con2-3-4">小兰</td>
<td class="con2-3-5">2019-2-21 14:30</td>
<td class="con2-3-6">240</td>
<td class="con2-3-7">未发货</td>
</tr>
<tr class="con2-4">
<td class="img"><img src="img/xie.jpg"></td>
<td class="con2-4-1">2019年个性男女潮牌imooc暮春之行运动鞋</td>
<td class="con2-3-2">2</td>
<td class="con2-3-3">120</td>
<td class="con2-3-4">魏璎珞</td>
<td class="con2-3-5">2019-2-21 14:30</td>
<td class="con2-3-6">240</td>
<td class="con2-3-7">未发货</td>
</tr>
<tr class="con2-4">
<td class="img"><img src="img/txue.png"></td>
<td class="con2-4-1">2019年个性男女潮牌imooc暮春之行文化衫</td>
<td class="con2-3-2">2</td>
<td class="con2-3-3">小慕</td>
<td class="con2-3-4">120</td>
<td class="con2-3-5">2019-2-21 14:30</td>
<td class="con2-3-6">240</td>
<td class="con2-3-7">未发货</td>
</tr>
<tr class="con2-4">
<td class="img"><img src="img/txue.png"></td>
<td class="con2-4-1">2019年个性男女潮牌imooc暮春之行文化衫</td>
<td class="con2-3-2">2</td>
<td class="con2-3-3">120</td>
<td class="con2-3-4">小苏</td>
<td class="con2-3-5">2019-2-21 14:30</td>
<td class="con2-3-6">240</td>
<td class="con2-3-7">未发货</td>
</tr>
</table>
</td>
</tr>
</table>
</tbody>
<!--底部-->
<tfoot>
<tr>
<td>2019-9-21-© imooc.com</td>
</tr>
</tfoot>
<div class="footer">
2019-9-21 ©imooc.com
</div>
</table>
</body>
</html>
1回答
-
同学你好，
1、style闭合标签问题：
需要添加/
2、tbody中不能直接嵌套table，需要在td中嵌套：
修改之后底部就没有问题了，可以重新测试下哦。
祝学习愉快！
0
相似问题