老师帮我看看行不行我块被折磨疯了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单列表</title>
<style type="text/css">
*{margin: 0;padding: 0;}
/*整体框架*/
table{width: 100%; height: auto;
border-collapse: collapse;}
/*页头和页尾*/
table thead tr,
tfoot tr{width: 100%;
height: 60px;
background: #169bd5;}
/*主体*/
.boxx{width: 100%;}
.cucu{font-weight: bold;}
/*内容左侧部分*/
.minleft {border: 4px solid #cccccc;text-align: center;}
/*内容右侧部分*/
.minright{border: 4px solid #cccccc;}
.minright table{border:2px solid #cccccc}
.tupian img{display: inline-block;width: 43px;}
.tupian tr td{border: 2px solid #cccccc;
text-align: center;}
tfoot tr{text-align: center; color: white;}
</style>
</head>
<body>
<table>
<!--页头-->
<thead>
<tr>
<td>
<img src="img/logo.png">
</td>
</tr>
</thead>
<!--主体-->
<tbody>
<tr>
<td class="boxx">
<table class="minleft">
<!--左侧部分-->
<td width="12%">
<!--商品管理-->
<p>商品管理</p><br>
<p>评价管理</p><br>
<p>咨询管理</p><br><br><br>
<p class="cucu">全部订单</p><br>
<p>以完成订单</p><br>
<p>待处理订单</p><br>
<p>今日物流</p><br><br><br>
<p>月度考核</p><br>
<p>季度考核</p><br>
<p>年度考核</p><br>
</td>
<!--右侧部分-->
<td class="minright" width="88%">
<!--全部订单-->
<table width="100%">
<tr height="50px">
<td> 全部订单</td>
</tr>
</table>
<!--订单查询-->
<table>
<tr height="50px">
<td>
 查询：<input type="date">至<input type="date">
</td>
</tr>
</table>
<!--订单列表-->
<table class="tupian" cellspacing="0">
<tr height="50px">
<td colspan="2">宝贝信息</td>
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
<tr height="54px">
<td><img src="img/txue.png"></td>
<td>2019信款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21：45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr height="54px">
<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 height="54px">
<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 height="54px">
<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 height="54px">
<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 height="54px">
<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 height="54px">
<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 height="54px">
<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 height="54px">
<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 height="54px">
<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 height="54px">
<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 height="54px">
<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>
</table>
</td>
</td>
</table>
</tr>
</tbody>
<!--页脚-->
<tfoot>
<tr>
<td>2019-09-21 ©imooc.com</td>
</tr>
</tfoot>
</table>
</body>
</html>
正在回答
同学你好，代码整体布局是可以的，样式上还需要调整：
1、中间左侧列表不需要垂直居中显示，可以在标签中添加valign=“top”属性。并且给第一个p标签添加上外边距
2、中间左侧列表也不需要水平居中显示，可以添加文本缩进
参考
3、右侧上面两行左侧间隙有些小，可以多添加几个
参考
自己再测试下，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星