黑松山资源网

DIV实现简易漂浮层放置分页信息思路分享
站长资源 2024/11/15 佚名
2 0
黑松山资源网 Design By www.paidiu.com

复制代码代码如下:
<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="/UploadFiles/2021-03-30/1365929367_3595.png">
黑松山资源网 Design By www.paidiu.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
黑松山资源网 Design By www.paidiu.com
www.paidiu.com 黑松山资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
黑松山资源网 Design By www.paidiu.com