DIV实现简易漂浮层放置分页信息思路分享
导读：收集整理的这篇文章主要介绍了DIV实现简易漂浮层放置分页信息思路分享，觉得挺不错的，现在分享给大家，也给大家做个参考。 复制代码代码如下: <htML> <head> <tITle>DIV实现简...
收集整理的这篇文章主要介绍了DIV实现简易漂浮层放置分页信息思路分享，觉得挺不错的，现在分享给大家，也给大家做个参考。 复制代码代码如下:
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 style="width:900px; height:400px; overflow:scroll; border:1px solid; ">
外层DIV顶部
外层DIV第一行
外层DIV第二行
外层DIV第三行
div style="background-color:#CCFF00; width:1000px; height:400px; border:1px solid; "> 内层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 class="div2">
table>
tr> td>
input id="add_BTn" tyPE="button" value="上页" onclick="addRecord(); " class="add_btn">
input id="back_btn" type="button" value="下页" class="back_btn" onclick="parent.closeWin(); " />
input id="add_btn" type="button" value="首页" onclick="addRecord(); " class="add_btn">
input id="back_btn" type="button" value="尾页" class="back_btn" onclick="parent.closeWin(); " />
/td> /tr>
/table>
/div>
div class="div1">
table>
tr> td>
input id="add_btn" type="button" value="新 增" onclick="addRecord(); " class="add_btn">
input id="back_btn" type="button" value="返 回" class="back_btn" onclick="parent.closeWin(); " />
/td> /tr>
/table>
/div>
/div>
/body>
/html>
复制代码代码如下:
效果图如下：img alt=DIV实现简易漂浮层放置分页信息 src="http://img.my.csdn.net/uploads/201304/14/1365929367_3595.png">
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： DIV实现简易漂浮层放置分页信息思路分享
本文地址： https://pptw.com/jishu/584842.html