DIV实现简易漂浮层放置分页信息思路分享

前端技术 2023/09/02 CSS

复制代码
代码如下:

<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\">

本文地址：https://www.stayed.cn/item/5228

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案