DIV实现简易漂浮层放置分页信息
来源：互联网 发布：java byte 类型运算 编辑：程序博客网 时间：2024/05/17 21:45
<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顶部<br>外层DIV第一行<br>外层DIV第二行<br>外层DIV第三行<br><div style="background-color:#CCFF00;width:1000px;height:400px;border:1px solid;">内层DIV宽度1600px/高度400px<br><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底部<br>外层DIV底部<br>外层DIV底部<br>外层DIV底部<br>外层DIV底部<br>外层DIV底部<br>外层DIV底部<br>外层DIV底部<br>2013/4/14<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>效果图如下：
