首页
产品
快图
小程序
微商城
网站建设
新闻
公司动态
行业资讯
关于
案例
联系
DIV完成简单漂浮层置放分页查询信息内容思路共
2021-03-10 06:22
jianzhan
拷贝编码
编码以下:
<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第1行
外层DIV第2行
外层DIV第3行
<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">
为您推荐
DIV完成简单漂浮层置放分页查询信息内容
及时通信运用营销推广,知名品牌务必了
淘宝网营销推广是中小型公司将来必须考
CSS工作中基本原理及CSS标准取名详细介绍
公司新闻报道
所有文章
公司动态
行业资讯