体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

老师您好，代码是敲完了，可是存在几个问题

来源：3-2 项目作业

键盘上的莫扎特

2019-07-21 14:35:46

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>键盘上的莫扎特</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<header>
        <div class="container">
            <img src="img/logo.png"/>
        </div>
</header>
<sectuon class="main">
<aside>
        <p>商品管理</p>
        <p>评价管理</p>
        <p>咨询管理</p>
        <br/><br/>
        <h3>全部订单</h3>
        <p>已完成订单</p>
        <p>待处理订单</p>
        <p>今日物流</p>
        <br/><br/>
        <p>月考核</p>
        <p>季度考核</p>
        <p>年度考核</p>
</aside>
<article>
    <div>全部订单</div>
    <div>查询：<input type="data"> 至 <input type="data">
    <table border="1px" cellspacing="0" align="center" width="100%">
            <tr align="center">
                <td colspan="2" >宝贝信息</td>
                <td>订单数量</td>
                <td>单价</td>
                <td>买家</td>
                <td>下单时间</td>
                <td>实付款</td>
                <td>订单操作</td>
            </tr>
            <tr align="center" class="content" >
                <td width="10%"><img src="img/txue.png"></td>
                <td width="40%">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 align="center" class="content">
                <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 align="center" class="content">
                <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 align="center" class="content">
                <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 align="center" class="content">
                <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 align="center" class="content">
                <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 align="center" class="content">
                <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 align="center" class="content">
                <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 align="center" class="content">
                <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 align="center" class="content">
                <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 align="center" class="content">
                <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 align="center" class="content">
                <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>
</article>
</sectuon>
<br><br><br><br>
<footer>
        2019-9-21 &copy;imooc.com
</footer>    
 
</body>
</html>


写回答

3回答

好帮手慕码

2019-07-21

同学你好！

（1）是因为缺少div闭合标签

http://img.mukewang.com/climg/5d3443b300014a6308240109.jpg

（2）因为aside和article设置浮动之后，也会脱离文档流，空出一部分位置，footer就向上移动了

（3）是生效的:

http://img.mukewang.com/climg/5d34441b0001d3ac13200412.jpg

如果帮助到了你 欢迎采纳 祝学习愉快~

0

键盘上的莫扎特

提问者

2019-07-21

老师您好，我先弄清楚这几个问题再上传作业

http://img.mukewang.com/climg/5d3408a00001909512010919.jpg

1、第一个问题是aside和table之间为什么会有缝隙，该如何去除呢？

http://img.mukewang.com/climg/5d3409460001cb1404480255.jpg

2、第二个问题是在footer部分为什么需要去除浮动，才能使页脚在最底下，但是footer没有设置浮动啊，只有aside和article设置了浮动，但我不懂为什么footer也会受到影响，如图↓

http://img.mukewang.com/climg/5d340aad0001bc9319200528.jpg

3、第三个问题就是用css对表格的<tr>和<td>设置高度，为什么不行呢？

http://img.mukewang.com/climg/5d340b470001c1fc04890174.jpg

0

键盘上的莫扎特

提问者

2019-07-21

/* All Tag*/
*{
    margin: 0;
    padding: 0;
}
/* header*/
 header > .container{
    width: 100%;
    height: 60px;
    background: rgb(52, 166, 241);
}
header > .container > img{
    margin-top:10px;
} 
/* main*/
.main > aside{
    float: left;
    width:12%;
    height: 1010px;
    box-sizing:border-box;
    border: 2px solid rgb(177, 174, 174);
}
.main > aside > p,
.main > aside > h3{
    height: 35px;
    margin-left: 2px;
}
.main > article{
    float: right;
    width:88%;
    box-sizing:border-box;
    border: 2px solid rgb(177, 174, 174);
}
.main > article > div{
    height: 50px;
    line-height: 50px;
    box-sizing:border-box;
    border: 2px solid rgb(177, 174, 174);
}
.main table{
    border: 2px solid rgb(177, 174, 174);
}
.main img {
    width:50px;
    height: 50px;
}
article tr{
    height: 50px;
}
article td{
    border:1px solid rgb(177, 174, 174);
    height: 50px;
    
}
/* footer*/
 footer{
    clear: both;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: rgb(52, 166, 241);
    border: 2px solid rgb(177, 174, 174);
 }


0

0 学习 · 40143 问题

查看课程

相似问题

老师为什么这样没有效果？

回答 3

代码是否有问题

回答 1

作业已上交，请教个问题，为什么用css无法调整table中图片的大小

回答 1

老师您好，这是我写的代码

回答 2

老师，请教两个问题：1、中间部分左侧为什么跑中间去了。2、为什么右侧实际高度是50.4？

回答 4

打开慕课网App查看更多内容