用div css布局 如下图那样具体该怎么布局
发布网友
发布时间：2022-05-05 00:59
共3个回答
热心网友
时间：2022-05-14 04:25
花了几分钟帮你实现了整个效果图，如果结局您的问题，望采纳。
css代码：
<style>body{margin:0px; padding:0px; font-size:12px;}
.pd{padding:5px;}
/*第一块 顶部操作进度条*/
.topbar{
height:30px;
line-height:30px;
padding-left:5px;
background:#ececec;
}
/*第二块；按钮条*/
.ctrlbar{overflow:hidden;}
.ctrlleft{float:left}
.ctrlright{float:right}
.ctrlbar a{
display:inline-block;
padding:5px 10px;
background:#333;
border:1px solid #000;
color:#fff;
text-decoration:none;
border-radius:5px;
}
/*第三块；表格*/
.tab{width:100%;border-collapse:collapse;}
.tab,.tab td{border-color:#333;line-height:30px;}
.tabheader{
font-weight:bold;
text-align:center;
background:#09C;
}
.tabheader td{line-height:40px;border:none;}
/*第四块：分页*/
.pagebar{height:30px;line-height:30px;overflow:hidden;}
.pageInfo{float:left;}
.pageInfo b{color:#09C;}
.pagebtn{float:right;}
.pagebtn a{
width:25px;
height:25px;
line-height:25px;
text-align:center;
text-decoration:none;
color:#09C;
border:1px solid #ccc;
margin-left:-1px;
float:left;
}
.pagebtn a:hover,.pagebtn a:visited,.pagebtn a.currentPage{background:#CCC}
</style>
html代码：
<div class="topbar">位置：
<a href="#">首页</a>
>
<a href="#">数据表</a>
>
<a href="#">基本内容</a>
</div>
<div class="pd"></div>
<div class="ctrlbar">
<div class="ctrlleft">
<a href="#">按钮一</a>
<a href="#">按钮一</a>
<a href="#">按钮一</a>
</div>
<div class="ctrlright">
<a href="#">按钮一</a>
<a href="#">按钮一</a>
</div>
</div>
<div class="pd"></div>
<table class="tab" border="1">
<tr class="tabheader">
<td>列一</td>
<td>列一</td>
<td>列一</td>
<td>列一</td>
<td>列一</td>
<td>列一</td>
<td>操作</td>
</tr>
<tr>
<td>内容内容内容内容</td>
<td>内容内容</td>
<td>内容</td>
<td>内容内容内容</td>
<td>内容内容内容内容内容</td>
<td>内容</td>
<td>
<a href="#">查看</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>内容内容内容内容</td>
<td>内容内容</td>
<td>内容</td>
<td>内容内容内容</td>
<td>内容内容内容内容内容</td>
<td>内容</td>
<td>
<a href="#">查看</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>内容内容内容内容</td>
<td>内容内容</td>
<td>内容</td>
<td>内容内容内容</td>
<td>内容内容内容内容内容</td>
<td>内容</td>
<td>
<a href="#">查看</a>
<a href="#">删除</a>
</td>
</tr>
</table>
<div class="pd"></div>
<div class="pagebar">
<div class="pageInfo">共<b>120</b>条记录/每页<b>10</b>条/当前第<b>1</b>页</div>
<div class="pagebtn">
<a href="#"><</a>
<a class="currentPage" href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">..</a>
<a href="#">10</a>
<a href="#">></a>
</div>
</div>
热心网友
时间：2022-05-14 05:43
<div id="n1">
<p>位置</p><a href="#">首页<a>...
</div>
<div id="n2">
<a href="#">添加<a>...
</div>
<div id="list">
<div id="h1">
<input type="checkbox"><p>编号</p>...
</div>
<div id="h2">
<input type="checkbox"><p>20130101</p>...
</div>
</div>
</div>
热心网友
时间：2022-05-14 07:18
<div class="cont">
<div></div>
<div></div>
<table>
.....
</table>
</div>
