求教，作业问题，谢谢！
来源：3-2 项目作业
慕仔4144401
2019-11-12 10:12:45
问题1：订单列表中各列表是怎么调出来的？试了很多，都没有反应。
问题2：为什么页脚我设置了css还是没有任何反应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>慕课网</title>
</head>
<body>
<table class="container">
<!--顶部-->
<thead>
<tr>
<td>
<a href="index.html"><img src="img/logo.png"/></a>
</td>
</tr>
</thead>
<!--主体-->
<tbody>
<tr>
<table class="main">
<!--主体左侧-->
<td class="main_left">
<ul>
<li><a href="#">商品管理</a></li>
<li><a href="#">评价管理</a></li>
<li><a href="#">咨询管理</a></li>
</ul>
<ul>
<li><a href="#"><b>全部订单</b></a></li>
<li><a href="#">已完成订单</a></li>
<li><a href="#">待处理订单</a></li>
<li><a href="#">今日物流</a></li>
</ul>
<ul>
<li><a href="#">月考核</a></li>
<li><a href="#">季度考核</a></li>
<li><a href="#">年度考核</a></li>
</ul>
</td>
<!--主体右侧-->
<td class="main_right">
<!--全部订单-->
<table class="top">
<tr>
<td> 全部订单</td>
</tr>
</table>
<!--查询部分-->
<table class="center">
<tr>
<td> 查询：<input type="date" name="qishidate"/> 至 <input type="date" name="qishidate"/></td>
</tr>
</table>
<!--订单列表-->
<table class="foot">
<tr>
<td colspan="2">宝贝信息</td>
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
<tr>
<td><img src="img/txue.png"/></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"/></td>
<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小李子</td>
<td>2019-2-21 19:04</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/txue.png"/></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小红</td>
<td>2019-2-21 16:54</td>
<td>240</td>
<td>待发货</td>
</tr>
<tr>
<td><img src="img/xie.jpg"/></td>
<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>可乐</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/txue.png"/></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>魏明</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/xie.jpg"/></td>
<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>李晓雨</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/txue.png"/></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>艳艳</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/xie.jpg"/></td>
<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>片片</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/txue.png"/></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>魏璎珞</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/xie.jpg"/></td>
<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小沐</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/txue.png"/></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小兰</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/xie.jpg"/></td>
<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小苏</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
</table>
</td>
</table>
</tr>
</tbody>
<!--页脚-->
<tfoot>
<tr>
<td>
<p>2019-9-21 ©imooc.com</p>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
CSS代码：
*{
padding: 0;
margin: 0;
border-collapse:collapse;
}
a{
text-decoration:none;
}
li{
list-style: none;
}
img{
display: block;
}
.container{
width:100%;
}
/*顶部*/
.container > thead{
width:100%;
height:60px;
background: #169bd5;
}
/*主体*/
.main{
width:100%;
border:1px solid #cccccc;
}
.main .main_left{
width:12%;
float: left;
}
.main .main_left ul{
padding-left:10px;
padding-bottom:58px;
}
.main .main_left ul a{
font-size:15px;
color:#000;
line-height:32px;
}
.main .main_left ul a >b{
font-size:18px;
color:#000;
line-height:32px;
}
.main .main_right{
width:88%;
float:right;
}
/*全部订单*/
.main .main_right .top,
.main .main_right .center{
width:100%;
height:50px;
border:4px solid #cccccc;
border-bottom: none;
vertical-align: middle;
}
/*订单列表*/
.main .main_right .foot{
text-align: center;
vertical-align: middle;
width:100%;
border:4px solid #cccccc;
}
.main_right .foot tr:nth-child(1){
height:50px;
}
.main_right .foot tr{
height:54px;
}
.main_right .foot img{
width:50px;
height:50px;
}
/*页脚*/
.container > tfoot{
width:100%;
height:60px;
background: #169bd5;
}
.container > tfoot > tr > td > p{
text-align: center;
line-height: 60px;
font-size:18px;
}
2回答
-
同学你好， 对于的第二个问题解答如下:
通过检查元素可以发现， 页脚内容并没有嵌套在table表格下，所以CSS中选择器设置的样式不会生效。
因为当你使用thead等标签的时候， 必须按着thead、tfoot、tbody这样的书写顺序，浏览器才可以正常解析
建议： 调整页脚的位置
表格的标签嵌套规则必须遵守： table> thead/tfoot/tbody > tr > td/th ， 只能在td（th）下嵌套其他任意标签， 否则会导致浏览器解析异常，页面效果实现不了。
建议修改： tbody下要添加td标签，然后在嵌套表格，
同学可以自己下去再测试一下，然后继续完善作业， 完成之后可以提交作业
如果帮助到了你， 欢迎采纳，祝学习愉快~~~~
0 -
慕仔4144401
提问者
2019-11-12
问题1已解决，求教问题2
0
相似问题