老师,我想问一下1.我的页脚部分css为什么没有用。2.我注释掉的css代码应该怎样写呢?

老师,我想问一下1.我的页脚部分css为什么没有用。2.我注释掉的css代码应该怎样写呢?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
                *{
            margin:0;
            padding:0;
            font:12px "微软雅黑";
            
        }
        table{
            width:100%;
            
        }
        /*thead部分*/
        thead>tr>td{
            width:100% ;
            height: 60px;
            background-color: #abcdef;        
        }
        /*tbody部分*/
        /*左侧*/
        tbody>table>tr>td:first-child{
            width:12%;
        }
        p{    
            margin:10px;
            padding-top:0;
        }
        h5{margin-left:10px;font-weight:bold;}
        /*右侧*/
        tbody>table>tr>td:last-child{
            width:88%;
        }
        .indent,.time{
            width:100%;
            height:50px;
        }
        .first{
            height:50px;
        }
        /*tbody>table>tr>td:nth-child(2)>table:nth-child(3)>tr:nth-child(n+2){
            height:54px;
        }*/
        /*tbody>table>tr>td:nth-child(2)>table:nth-child(3)>tr:nth-child(n+2)>td:first-child>img{
            width:40px;
            height:50px;
        }*/
        .pic{
            width:40px;
            height:50px;
        }
        /*tfoot*/
        tfoot>tr>td{
            width:100%;
            height:60px;
            background-color:#abcdef;    
        }
    </style>    
</head>
<body>
    <table >
        <thead>
            <!--头部-->
            <tr>
                <td>
                    <img src="img/logo.png" />
                </td>
            </tr>    
        </thead>
        <!--主体-->
        <tbody>
            <table >
                <tr>
                    <!--左侧-->
                    <td>
                        <p>商品管理</p>
                        <p>评价管理</p>
                        <p>咨询管理</p><br /><br />
                        <h5>全部订单</h5>
                        <p>已完成订单</p>
                        <p>待处理订单</p>
                        <p>今日物流</p><br /><br />
                        <p>月考核</p>
                        <p>季度考核</p>
                        <p>年度考核</p>
                    </td>
                    <!--右侧-->
                    <td>
                        <!--全部订单-->
                        <table >
                            <tr>
                                <td class="indent">全部订单</td>
                            </tr>
                        </table >
                        <!--查询部分-->
                        <table >
                            <tr>
                                <td class="time">查询:<input type="date">至<input type="date"></td>
                            </tr>
                        </table>
                        <!--订单列表-->
                        <table >
                            <tr class="first">
                                <td colspan="2">宝贝信息</td>
                                <td>订单数量</td>
                                <td>单价</td>
                                <td>买家</td>
                                <td>下单时间</td>
                                <td>实付款</td>
                                <td>订单操作</td>
                            </tr>
                            <tr>
                                <td><img src="img/txue.png" class="pic" /></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" class="pic"></td>
                                <td>2019新款个性女潮牌imooc暮春之行运动鞋</td>
                                <td>2</td>
                                <td>120</td>
                                <td>小红</td>
                                <td>2019-2-21 14:50</td>
                                <td>240</td>
                                <td>未发货</td>
                            </tr>
                            <tr>
                                <td><img src="img/txue.png" class="pic" /></td>
                                <td>2019新款个性女潮牌imooc暮春之行文化衫</td>
                                <td>2</td>
                                <td>120</td>
                                <td>小红</td>
                                <td>2019-2-21 14:50</td>
                                <td>240</td>
                                <td>未发货</td>
                            </tr>
                            <tr>
                                <td><img src="img/xie.jpg" class="pic" /></td>
                                <td>2019新款个性女潮牌imooc暮春之行运动鞋</td>
                                <td>2</td>
                                <td>120</td>
                                <td>小红</td>
                                <td>2019-2-21 14:50</td>
                                <td>240</td>
                                <td>未发货</td>
                            </tr>
                            <tr>
                                <td><img src="img/txue.png" class="pic" /></td>
                                <td>2019新款个性女潮牌imooc暮春之行文化衫</td>
                                <td>2</td>
                                <td>120</td>
                                <td>小红</td>
                                <td>2019-2-21 14:50</td>
                                <td>240</td>
                                <td>未发货</td>
                            </tr>
                            <tr>
                                <td><img src="img/xie.jpg" class="pic" /></td>
                                <td>2019新款个性女潮牌imooc暮春之行文化衫</td>
                                <td>2</td>
                                <td>120</td>
                                <td>小红</td>
                                <td>2019-2-21 14:50</td>
                                <td>240</td>
                                <td>未发货</td>
                            </tr>
                            <tr>
                                <td><img src="img/txue.png" class="pic" /></td>
                                <td>2019新款个性女潮牌imooc暮春之行文化衫</td>
                                <td>2</td>
                                <td>120</td>
                                <td>小红</td>
                                <td>2019-2-21 14:50</td>
                                <td>240</td>
                                <td>未发货</td>
                            </tr>
                            <tr>
                                <td><img src="img/xie.jpg" class="pic" /></td>
                                <td>2019新款个性女潮牌imooc暮春之行文化衫</td>
                                <td>2</td>
                                <td>120</td>
                                <td>小红</td>
                                <td>2019-2-21 14:50</td>
                                <td>240</td>
                                <td>未发货</td>
                            </tr>
                            <tr>
                                <td><img src="img/txue.png" class="pic" /></td>
                                <td>2019新款个性女潮牌imooc暮春之行文化衫</td>
                                <td>2</td>
                                <td>120</td>
                                <td>小红</td>
                                <td>2019-2-21 14:50</td>
                                <td>240</td>
                                <td>未发货</td>
                            </tr>
                            <tr>
                                <td><img src="img/xie.jpg" class="pic" /></td>
                                <td>2019新款个性女潮牌imooc暮春之行文化衫</td>
                                <td>2</td>
                                <td>120</td>
                                <td>小红</td>
                                <td>2019-2-21 14:50</td>
                                <td>240</td>
                                <td>未发货</td>
                            </tr>
                            <tr>
                                <td><img src="img/txue.png" class="pic" /></td>
                                <td>2019新款个性女潮牌imooc暮春之行文化衫</td>
                                <td>2</td>
                                <td>120</td>
                                <td>小红</td>
                                <td>2019-2-21 14:50</td>
                                <td>240</td>
                                <td>未发货</td>
                            </tr>
                            <tr>
                                <td><img src="img/xie.jpg" class="pic" /></td>
                                <td>2019新款个性女潮牌imooc暮春之行文化衫</td>
                                <td>2</td>
                                <td>120</td>
                                <td>小红</td>
                                <td>2019-2-21 14:50</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>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,1、图片的是指你的第二个注释哦,不是第一个。

2、第二个设置tr的高度,是指如下这部分吗?

http://img1.sycdn.imooc.com//climg/5d7e16f8098b99d603320229.jpg

若是这部分的话,第一个行是有类的,我们可以选中这个类,然后根据这个类,来找它的兄弟元素tr(可以使用~,选中兄弟元素哦),例:

http://img1.sycdn.imooc.com//climg/5d7e17770975438707570097.jpg

希望能帮助到你,祝学习愉快!

好帮手慕糖 2019-09-15 17:51:15

同学你好,1、分组下应该是行标签,行标签下应该是列标签。其他标签应嵌套到列标签中,所以tbody分组下,缺少行标签与列标签,导致渲染的标签错误,没有识别到页脚的这个标签,建议:把缺少的行与列标签添加上即可,例:

http://img1.sycdn.imooc.com//climg/5d7e06dc09468be203360229.jpg

2、(1)是要设置第三个表格中的行的高度?

建议:可以给第三个表格添加一个类名,然后设置这个类下面的tr的高度。

(2)是要设置图片的宽高是吗?这里不需要使用“>”选择子元素。直接设置后代元素(空格),即:当前这个表格下的图片设置宽高即可。例:

http://img1.sycdn.imooc.com//climg/5d7e08870948ae4809190144.jpg

希望能帮助到你,祝学习愉快!

  • 提问者 var当个程序猿 #1
    老师,第一个问题了解了 第二个是上面那个注释的css,不是这个img,是要选择右侧从第二个tr开始后面的内容设置高度
    2019-09-15 18:40:53
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师