底部的背景颜色和高度都无法指定
来源：3-2 项目作业
__憨人
2020-05-27 09:46:51
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>H5布局作业</title> <link rel="stylesheet" type="text/css" href="homework-style.css"> </head> <body> <!--整体思路： 使用一个大的table作为容器。 主体部分嵌套一个一行两列的table 右列再嵌套三个table 最下面的table左商品详情--> <!--不推荐完全使用table因为代码冗余太多，可读性差，建议还是使用h5的布局标签--> <table class="container" cellspacing="0" cellpadding="0"> <thead> <tr> <td><img src="img/logo.png" alt="logo"></td> </tr> </thead> <tbody> <table class="midPart" cellpadding="0" cellspacing="0"><!--style="border: 2px solid lightgrey"--> <tr class="tr-mid"> <!-- 中部左侧--> <td class="td-left"> <p>商品管理</p> <p>评价管理</p> <p>咨询管理</p><br /> <h4>全部订单</h4> <p>已完成订单</p> <p>待处理订单</p> <p>今日物流</p><br /> <p>月考核</p> <p>季度考核</p> <p>年度考核</p> </td> <!-- 中部右侧--> <td class="td-right"> <table class="right-top" border="10" style="border: 1px solid lightgrey"> <tr><td>全部订单</td></tr> </table> <table class="right-mid" border="10" style="border: 1px solid lightgrey"> <tr> <td> <form> 查询：<input type="date" name="startDate">至<input type="date" name="stopDate"> </form> </td> </tr> </table> <table class="right-bottom" border="10" style="border: 1px solid lightgrey"> <tr class="firstRow"> <td colspan="2">宝贝信息</td> <td>订单数量</td> <td>单价</td> <td>买家</td> <td>下单时间</td> <td>实付款</td> <td>订单操作</td> </tr> <tr> <td><img src="img/txue.png" alt="txu"></td> <td>2019新款个性男女潮牌imooc暮春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-2-21 21:54</td> <td>240</td> <td>待付款</td> </tr> <tr> <td><img src="img/xie.jpg" alt="txu"></td> <td>2019新款个性男女潮牌imooc暮春之行运动鞋</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-2-21 21:54</td> <td>240</td> <td>未发货</td> </tr> <tr> <td><img src="img/txue.png" alt="txu"></td> <td>2019新款个性男女潮牌imooc暮春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-2-21 21:54</td> <td>240</td> <td>待付款</td> </tr> <tr> <td><img src="img/xie.jpg" alt="txu"></td> <td>2019新款个性男女潮牌imooc暮春之行运动鞋</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-2-21 21:54</td> <td>240</td> <td>未发货</td> </tr> <tr> <td><img src="img/txue.png" alt="txu"></td> <td>2019新款个性男女潮牌imooc暮春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-2-21 21:54</td> <td>240</td> <td>待付款</td> </tr> <tr> <td><img src="img/xie.jpg" alt="txu"></td> <td>2019新款个性男女潮牌imooc暮春之行运动鞋</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-2-21 21:54</td> <td>240</td> <td>未发货</td> </tr> <tr> <td><img src="img/txue.png" alt="txu"></td> <td>2019新款个性男女潮牌imooc暮春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-2-21 21:54</td> <td>240</td> <td>待付款</td> </tr> <tr> <td><img src="img/xie.jpg" alt="txu"></td> <td>2019新款个性男女潮牌imooc暮春之行运动鞋</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-2-21 21:54</td> <td>240</td> <td>未发货</td> </tr> <tr> <td><img src="img/txue.png" alt="txu"></td> <td>2019新款个性男女潮牌imooc暮春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-2-21 21:54</td> <td>240</td> <td>待付款</td> </tr> <tr> <td><img src="img/xie.jpg" alt="txu"></td> <td>2019新款个性男女潮牌imooc暮春之行运动鞋</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-2-21 21:54</td> <td>240</td> <td>未发货</td> </tr> <tr> <td><img src="img/txue.png" alt="txu"></td> <td>2019新款个性男女潮牌imooc暮春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-2-21 21:54</td> <td>240</td> <td>待付款</td> </tr> <tr> <td><img src="img/xie.jpg" alt="txu"></td> <td>2019新款个性男女潮牌imooc暮春之行运动鞋</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-2-21 21:54</td> <td>240</td> <td>未发货</td> </tr> </table> </td> </tr> </table> </tbody> <tfoot> <tr> <td>2019-9-21 ©imooc.com</td> </tr> </tfoot> </table> </body> </html>
*{
padding: 0;
margin: 0;
font-family: "Microsoft YaHei",sans-serif;
font-weight: 300;
border-collapse: collapse;
}
table.container{
width: 100%;
height: 700px;
}
/*头部*/
thead,tfoot{
border: #169bd5;
height: 60px;
width: 100%;
background: #169bd5;
}
thead > tr > td > img{
display: block;
margin: 5px 0 5px 5px;
}
tfoot > td {
line-height: 60px;
text-align: center;
}
/*中部整体*/
.midPart{
width: 100%;
height: 580px;
}
/*中部左侧*/
.td-left{
width: 12%;
vertical-align: top;
padding-top: 20px;
padding-left: 15px;
border: 2px solid lightgrey;
}
.td-left p,.td-left h4{
margin-bottom: 10px;
}
.td-left h4{
font-weight: 400;
}
/*中部右侧*/
.td-right{
vertical-align: top;
width: 88%;
}
.right-top{
width: 100%;
height: 50px;
}
.right-mid{
width: 100%;
height: 50px;
}
.right-bottom{
width: 100%;
height: 580px;
text-align: center;
}
.right-bottom .firstRow{
height: 50px;
/*text-align: center;*/
}
.right-bottom > tr:not(.firstRow){
height: 54px;
}
.right-bottom td img{
width: 54px;
height: 54px;
margin: 0 20px;
display: block;
}写回答
1回答
-
同学你好，关于你的问题，回答如下：
1、样式无法生效，是因为表格嵌套错误导致的。分组标签下，应该是行与列标签，不能直接嵌套表格。嵌套的表格应该存放到列标签中。如下，需要补充下行、列标签。
2、修改之后，背景颜色生效了，但是高度没有（顶部的高度也没有生效），高度不能直接设置给分组，建议：可以设置给行标签，例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0h020-05-27
相似问题