Div绝对定位布局，适合所有分辨率不变型
2015-10-27 10:54
218 查看
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BusinessMeasureMainNew.aspx.cs"
Inherits="SinoOcean.BI.Measure.AppPortal.Measure.BusinessMeasure.BusinessMeasureMainNew" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>经营测算</title>
<link href="../../jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet"
type="text/css" />
<link href="../../jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="../../jquery-easyui-1.4.3/demo/demo.css" rel="stylesheet" type="text/css" />
<script src="../../jquery-easyui-1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="../../jquery-easyui-1.4.3/jquery.easyui.min.js" type="text/javascript"></script>
<style type="text/css">
#wrapper
{
margin: 0 auto;
position: relative;
width: 1700px;
height: 800px;
background: url(经融计算模版.jpg) no-repeat;
}
.box1, .box2, .box3, .box4
{
width: 1300px;
height: 800px;
margin: 0 auto;
border: 1px solid #666; /*overflow:scroll;*/
}
/*完全平铺满DIV*/
.box1
{
background: url(经融计算模版.jpg);
}
/*背景图片不重复平铺*/
.box2
{
background: url(经融计算模版.jpg) no-repeat 10px center;
}
/*将图片作为DIV背景横向水平平铺*/
.box3
{
background: url(经融计算模版.jpg) repeat-x 0 30px;
}
/*将图片作为DIV背景纵向水平平铺*/
.box4
{
background: url(经融计算模版.jpg) repeat-y center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<!-- 第一层绝对定位 -->
<div class="easyui-panel" style="position: absolute; left: 823px; top: 50px; width: 184px;
height: 100px;">
<table border="0" style="width: 100%; height: 100%;">
<tr>
<td>
<b>项目IRR</b>
</td>
<td align="right">
<img src="../../Images/BusinessPlan/上升箭头.png" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<asp:Label ID="Label2" runat="server" Text="70.9" ForeColor="#FF0066"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<input id="txt_TargetIRR_Param" runat="server" type="text" value="" />
</td>
</tr>
</table>
</div>
<!-- 第2层 progressbar 绝对定位 -->
<div class="easyui-panel" style="position: absolute; left: 535px; top: 138px; width: 184px;
height: 100px;">
<table border="0" style="width: 100%; height: 100%;">
<tr>
<td>
<b>销售IRR</b>
</td>
<td align="right">
<asp:Label ID="Label24" runat="server" Text="70.9" ForeColor="#FF0066"></asp:Label>
<img src="../../Images/BusinessPlan/上升箭头.png" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Label ID="Label1" runat="server" Text="80" ForeColor="#FF0066" Font-Size="Large"></asp:Label>
<asp:Label ID="Label23" runat="server" Text="%" ForeColor="Green" Font-Size="Large"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</div>
<!-- 第2层 progressbar 绝对定位 -->
<div class="easyui-panel" style="position: absolute; left: 1127px; top: 142px; width: 184px;
height: 100px;">
<table border="0" style="width: 100%; height: 100%;">
<tr>
<td>
<b>持有IRR</b>
</td>
<td align="right">
<asp:Label ID="Label3" runat="server" Text="70.9" ForeColor="#FF0066"></asp:Label>
<img src="../../Images/BusinessPlan/上升箭头.png" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Label ID="Label15" runat="server" Text="80" ForeColor="#FF0066" Font-Size="Large"></asp:Label>
<asp:Label ID="Label14" runat="server" Text="%" ForeColor="Green" Font-Size="Large"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</div>
<!-- 第3层 progressbar 绝对定位 -->
<div class="easyui-panel" style="position: absolute; left: 375px; top: 296px; width: 184px;
height: 100px;">
<table border="0" style="width: 100%; height: 100%;">
<tr>
<td>
<b>销售现金流</b>
</td>
<td align="right">
<asp:Label ID="Label4" runat="server" Text="70.9" ForeColor="#FF0066"></asp:Label>
<img src="../../Images/BusinessPlan/上升箭头.png" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Label ID="Label11" runat="server" Text="7059" ForeColor="#FF0066" Font-Size="Large"></asp:Label>
<asp:Label ID="Label12" runat="server" Text="万" ForeColor="Green" Font-Size="Large"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
</td>
</tr>
</table>
</div>
<!-- 第3层 progressbar 绝对定位 -->
<div class="easyui-panel" style="position: absolute; left: 683px; top: 296px; width: 184px;
height: 100px;">
<table border="0" style="width: 100%; height: 100%;">
<tr>
<td>
<b>销售建设成本</b>
</td>
<td align="right">
<asp:Label ID="Label7" runat="server" Text="70.9" ForeColor="#FF0066"></asp:Label>
<img src="../../Images/BusinessPlan/上升箭头.png" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Label ID="Label8" runat="server" Text="7059" ForeColor="#FF0066" Font-Size="Large"></asp:Label>
<asp:Label ID="Label9" runat="server" Text="万" ForeColor="Green" Font-Size="Large"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
</td>
</tr>
</table>
</div>
<!-- 第3层 progressbar 绝对定位 -->
<div class="easyui-panel" style="position: absolute; left: 981px; top: 294px; width: 184px;
height: 100px;">
<table border="0" style="width: 100%; height: 100%;">
<tr>
<td>
<b>持有建设成本</b>
</td>
<td align="right">
<asp:Label ID="Label10" runat="server" Text="70.9" ForeColor="#FF0066"></asp:Label>
<img src="../../Images/BusinessPlan/上升箭头.png" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Label ID="Label21" runat="server" Text="7059" ForeColor="#FF0066" Font-Size="Large"></asp:Label>
<asp:Label ID="Label22" runat="server" Text="万" ForeColor="Green" Font-Size="Large"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
</td>
</tr>
</table>
</div>
<!-- 第3层 progressbar 绝对定位 -->
<div class="easyui-panel" style="position: absolute; left: 1289px; top: 294px; width: 184px;
height: 100px;">
<table border="0" style="width: 100%; height: 100%;">
<tr>
<td>
<b>持有现金流</b>
</td>
<td align="right">
<asp:Label ID="Label13" runat="server" Text="70.9" ForeColor="#FF0066"></asp:Label>
<img src="../../Images/BusinessPlan/上升箭头.png" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Label ID="Label5" runat="server" Text="7059" ForeColor="#FF0066" Font-Size="Large"></asp:Label>
<asp:Label ID="Label6" runat="server" Text="万" ForeColor="Green" Font-Size="Large"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
</td>
</tr>
</table>
</div>
<!--第4层 slider -->
<div class="easyui-panel" style="position: absolute; left: 75px; top: 450px; width: 184px;
height: 110px;">
<table border="0" style="width: 100%; height: 100%;">
<tr>
<td>
<b>销售均价</b>
</td>
<td align="right">
<img src="../../Images/BusinessPlan/上升箭头.png" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<asp:Label ID="Label16" runat="server" Text="70.9" ForeColor="#FF0066"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input id="txt_SalesPriceProportion_Param" runat="server" class="easyui-slider" style="width: 120px" data-options="
showTip:true,
rule: [50,'|',200],
min:50,
max:200" value="100">
<br />
</td>
</tr>
</table>
</div>
<!--第4层 slider -->
<div class="easyui-panel" style="position: absolute; left: 376px; top: 449px; width: 184px;
height: 110px;">
<table border="0" style="width: 100%; height: 100%;">
<tr>
<td>
<b>销售进度</b>
</td>
<td align="right">
<img src="../../Images/BusinessPlan/上升箭头.png" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<asp:Label ID="Label17" runat="server" Text="70.9" ForeColor="#FF0066"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input id="txt_ProgressProportion_Param" runat="server" class="easyui-slider" style="width: 120px" data-options="
showTip:true,
rule: [50,'|',200],
min:50,
max:200" value="100">
<br />
</td>
</tr>
</table>
</div>
<!--第4层 slider -->
<div class="easyui-panel" style="position: absolute; left: 679px; top: 450px; width: 184px;
height: 110px;">
<table border="0" style="width: 100%; height: 100%;">
<tr>
<td>
<b>回款进度</b>
</td>
<td align="right">
<img src="../../Images/BusinessPlan/上升箭头.png" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<asp:Label ID="Label18" runat="server" Text="70.9" ForeColor="#FF0066"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input id="txt_ReturnedMoneyProportion_Param" runat="server" class="easyui-slider" style="width: 120px" data-options="
showTip:true,
rule: [50,'|',200],
min:50,
max:200" value="100">
<br />
</td>
</tr>
</table>
</div>
<!--第4层 slider -->
<div class="easyui-panel" style="position: absolute; left: 1132px; top: 451px; width: 184px;
height: 110px;">
<table border="0" style="width: 100%; height: 100%;">
<tr>
<td>
<b>经营收入</b>
</td>
<td align="right">
<img src="../../Images/BusinessPlan/上升箭头.png" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<asp:Label ID="Label19" runat="server" Text="70.9" ForeColor="#FF0066"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input id="txt_OperatingInComeProportion_Param" runat="server" class="easyui-slider" style="width: 120px" data-options="
showTip:true,
rule: [50,'|',200],
min:50,
max:200" value="100">
<br />
</td>
</tr>
</table>
</div>
<!--第4层 slider -->
<div class="easyui-panel" style="position: absolute; left: 1436px; top: 449px; width: 184px;
height: 110px;">
<table border="0" style="width: 100%; height: 100%;">
<tr>
<td>
<b>处置收益</b>
</td>
<td align="right">
<img src="../../Images/BusinessPlan/上升箭头.png" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<asp:Label ID="Label20" runat="server" Text="70.9" ForeColor="#FF0066"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input id="txt_DisposalProceedsProportion_Param" runat="server" class="easyui-slider" style="width: 120px" data-options="
showTip:true,
rule: [50,'|',200],
min:50,
max:200" value="100">
<br />
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 二叉树遍历 空间复杂度为O(1)
- nginx重写规则报nginx: [emerg] directive "rewrite" is not terminated by ";"
- Gentoo系统安装步骤详解
- MongoDB正则表达式及应用
- oracle11g在linux系统下开机自启动设置
- 301、404、200、304等HTTP状态
- 仿知乎程序(一)DrawerLayout与Toolbar
- ubuntu重复循环登陆
- QFuture QFutureWatcher
- robotium 在有源代码的情况下 写测试用例无法编译通过，生成apk。
- Oracle 修改密码（忘记登录密码，用户System）
- AngularJS 表达式
- 变更管理、信息系统安全管理、项目风险管理
- spring 用户登录拦截器
- spring 用户登录拦截器
- spring 用户登录拦截器
- spring 用户登录拦截器
- spring 用户登录拦截器
- spring 用户登录拦截器
- spring 用户登录拦截器