DIV实现简易漂浮层放置分页信息思路分享
DIV实现简易漂浮层放置分页信息思路分享
发布时间:2016-12-27 来源:查字典编辑
摘要:DIV实现简易漂浮层:固定分页和操作按钮在页面位置table,th,td{border:1pxsolidblue;border-collap...

<html>

<head>

<title>DIV实现简易漂浮层:固定分页和操作按钮在页面位置 </title>

</head>

<style>

table, th, td

{

border: 1px solid blue;

border-collapse:collapse;

}

div2{

position:absolute;

left:20px;

top:60%;

height:50px;

width:350px;

}

div1{

position:absolute;

right:35%;

top:60%;

height:50px;

width:150px;

}

</style>

<body>

<div>

外层DIV顶部

外层DIV第一行

外层DIV第二行

外层DIV第三行

<div>内层DIV宽度1600px/高度400px

<table>

<th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th><th>列名XX</th>

<tr><td>字段值</td><td>字段值</td><td>字段值</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

</table>

</div>

外层DIV底部

外层DIV底部

外层DIV底部

外层DIV底部

外层DIV底部

外层DIV底部

外层DIV底部

外层DIV底部

<div>

<table>

<tr><td>

<input id="add_btn" type="button" value="上页">

<input id="back_btn" type="button" value="下页" />

<input id="add_btn" type="button" value="首页">

<input id="back_btn" type="button" value="尾页" />

</td></tr>

</table>

</div>

<div>

<table>

<tr><td>

<input id="add_btn" type="button" value="新 增">

<input id="back_btn" type="button" value="返 回" />

</td></tr>

</table>

</div>

</div>

</body>

</html>

效果图如下:<IMG alt=DIV实现简易漂浮层放置分页信息 src="http://img.my.csdn.net/uploads/201304/14/1365929367_3595.png">

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类