体系课

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

检查代码，看看有没有优化的地方

来源：3-2 项目作业

weixin_慕的地5241954

2019-08-22 11:12:52

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>CSS布局</title>
<link rel="stylesheet" href="../css/style3.css" type="text/css" /><!-- 引用css样式表，记住格式 -->
</head>

<body>
<table>
<thead><!--顶部-->
<tr>
<td>
<img src="../img/logo.png" alt="logo"/>
</td>
</tr>
</thead>
<tbody><!--主体-->
<tr>
<td>
<table class="main">
<tr>
<td class="left"><!--主体左侧-->
<div class="content"><!--左侧上部-->
<p>商品管理</p>
<p>评价管理</p>
<p>咨询管理</p>
</div>
<div class="content"><!--左侧中部-->
<h1>全部订单</h1>
<p>已完成订单</p>
<p>待处理订单</p>
<p>今日物流</p>
</div>
<div class="content"><!--左侧下部-->
<p>月考核</p>
<p>季度考核</p>
<p>年度考核</p>
</div>
</td>
<td class="right"><!--主体右侧-->
<table class="top">
<tr>
<td>全部订单</td>
</tr>
</table><!--右侧全部订单-->
<table class="top">
<tr>
<td>查询：<input type="date" name="date">至<input type="date" name="date"></td>
</tr>
</table><!--右侧时间查询-->
<table class="bottom"><!--右侧订单列表-->
<tr class="one"><!--13行8列-->
<td colspan="2">宝贝信息</td>
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
<tr class="two">
<td><img src="../img/txue.png" alt="T-shirt"></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 class="two">
<td><img src="../img/xie.jpg" alt="xie"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小红</td>
<td>2019-2-21 19:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr class="two">
<td><img src="../img/txue.png" alt="T-shirt"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小李子</td>
<td>2019-2-21 17:30</td>
<td>240</td>
<td>待发货</td>
</tr>
<tr class="two">
<td><img src="../img/xie.jpg" alt="xie"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>可乐</td>
<td>2019-2-21 16:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr class="two">
<td><img src="../img/txue.png" alt="T-shirt"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>魏明</td>
<td>2019-2-21 15:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr class="two">
<td><img src="../img/xie.jpg" alt="xie"></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 class="two">
<td><img src="../img/txue.png" alt="T-shirt"></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 class="two">
<td><img src="../img/xie.jpg" alt="xie"></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 class="two">
<td><img src="../img/txue.png" alt="T-shirt"></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 class="two">
<td><img src="../img/xie.jpg" alt="xie"></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 class="two">
<td><img src="../img/txue.png" alt="T-shirt"></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 class="two">
<td><img src="../img/txue.png" alt="T-shirt"></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>
</tr>
</table>
</td>
</tr>
</tbody><!--主体-->
<tfoot><!--底部-->
<tr>
<td>2019-9-21&nbsp;&copy;imooc.com</td>
</tr>
</tfoot>
</table>
</body>

</html>
*{
margin: 0;
padding: 0;
}
/*头部*/
table{
width: 100%;
border-collapse:collapse;
}
table thead{
background: lightblue;
}
table thead tr td{
height: 60px;
}
table thead tr td img{
float: left;
}
/*主体*/
table tbody .main{
border: 1px gray solid;
}
/*主体左侧*/
table tbody tr td .left{
width: 12%;
position: absolute;
top: 80px;
}
table tbody tr td .left .content{
width: 100%;
margin-bottom: 50px;
}
table tbody tr td .left .content p,
table tbody tr td .left .content h1{
margin-bottom: 15px;
margin-left: 10px;
font-size: 16px;
}
/*主体右侧*/
table tbody tr td .right{
width: 88%;
border: 2px gray solid;
}
table tbody tr td .right .top{
height: 52px;
border: 2px gray solid;
}
table tbody tr td .right .top tr td{
padding-left: 10px;
}
table tbody tr td .right .bottom tr td{
border: 2px gray solid;
text-align: center;
}
table tbody tr td .right .bottom .one{
height: 50px;
width: 100px;
}
table tbody tr td .right .bottom .two{
height: 54px;
}
table tbody tr td .right .bottom .two img{
height: 48px;
width: 48px;
}
/*底部*/
table tfoot tr td{
width: 100%;
height: 60px;
background: lightblue;
text-align: center;
line-height: 60px;
}

帮我看看这样布局的嵌套关系能不能再优化，CSS书写是否能再简洁，谢谢。

写回答

1回答

好帮手慕言

2019-08-22

已采纳

同学你好，项目作业完成之后，建议上传作业。

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

批复作业的老师会针对同学上传的作业给出详细的指导和修改建议。

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

0

0 学习 · 40143 问题

查看课程

相似问题

检查代码，看看有不有错误和优化的地方

回答 2

麻烦老师帮忙检查一下代码，看看有没有什么地方可优化，谢谢

回答 1

感谢老师检查代码有没有优化改进的地方

回答 1

老师请帮我看看还有没有需要修改的地方

回答 1

请老师帮忙看看能否有优化的地方

回答 1

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