<!DOCTYPE html>
<html>
<head>
<title>imooc</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<table class="all">
<!-- 页头 -->
<thead>
<tr>
<td colspan="2"><img src="images/logo.png"></td>
</tr>
</thead>
<!-- 主体 -->
<tbody>
<tr>
<!-- 主体的左面 -->
<td class="first">
<ul class="ul-1">
<li><a href="#">商品管理</a></li>
<li><a href="#">评价管理</a></li>
<li><a href="#">咨询管理</a></li>
</ul>
<ul class="ul-2">
<h1><a href="index.html">全部订单</a></h1>
<li><a href="#">已完成订单</a></li>
<li><a href="#">待处理订单</a></li>
<li><a href="#">今日物流</a></li>
</ul>
<ul class="ul-3">
<li><a href="#">月考核</a></li>
<li><a href="#">季度考核</a></li>
<li><a href="#">年度考核</a></li>
</ul>
</td>
<!-- 主体的右面 -->
<td class="last">
<table rules="all" frame="box" border="2px">
<tr class="tr-1">
<td colspan="8">全部订单</td>
</tr>
<tr class="tr-2">
<td colspan="8">
查询:<input type="date" name="date">至<input type="date" name="date">
</td>
</tr>
<tr class="tr-3">
<td colspan="2">宝贝信息</td>
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
<tr class="tr-4">
<td><img src="images/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 class="tr-4">
<td><img src="images/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 class="tr-4">
<td><img src="images/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 class="tr-4">
<td><img src="images/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 class="tr-4">
<td><img src="images/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 class="tr-4">
<td><img src="images/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 class="tr-4">
<td><img src="images/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 class="tr-4">
<td><img src="images/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 class="tr-4">
<td><img src="images/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 class="tr-4">
<td><img src="images/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>
<tr class="tr-4">
<td><img src="images/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 class="tr-4">
<td><img src="images/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>
</table>
</td>
</tr>
</tbody>
<!-- 页尾 -->
<tfoot>
<tr>
<td colspan="2">2019-9-21 ©imooc.com</td>
</tr>
</tfoot>
</table>
</body>
</html>
这是html部分
/*通配符*/
*{
padding: 0;
margin: 0;
}
.all{
width: 100%;
}
a{
text-decoration: none;
color: #000;
}
a:hover{
color: #f00;
}
/*页头*/
table thead tr td{
background: #169bd5;
height: 60px;
}
table thead tr td img{
display: block;
margin: 0 5px;
}
/*主体*/
table tbody tr .first{
width: 12%;
position: relative;
}
table tbody tr .first ul h1{
font-size: 16px;
height: 35px;
}
table tbody tr .first ul li{
list-style: none;
display: block;
height:35px;
}
table tbody tr .first .ul-1{
position: absolute;
top: 5%;
left:20px;
}
table tbody tr .first .ul-2{
position: absolute;
top: 25%;
left: 20px;
}
table tbody tr .first .ul-3{
position: absolute;
top: 48%;
left: 20px;
}
table tbody tr .last{
width: 88%;
}
table tbody tr .last table{
width: 100%;
/*border: 1px #7d7d7d solid;*/
}
table tbody tr .last table img{
width: 48px;
height: 48px;
display: block;
margin:0 auto;
}
table tbody tr .last table .tr-1{
height: 50px;
text-align: left;
font-size: 20px;
text-indent: 1em;
}
table tbody tr .last table .tr-2{
height: 50px;
text-align: left;
font-size: 20px;
text-indent: 1em;
}
table tbody tr .last table .tr-3{
height: 50px;
font-size: 20px;
text-align: center;
}
table tbody tr .last table .tr-4{
height: 50px;
text-align: center;
}
/*页尾*/
table tfoot tr td{
background: #169bd5;
text-align: center;
height: 60px;
line-height: 60px;
}
这是css部分