Div绝对定位布局，适合所有分辨率不变型
<%@ 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;
1700px;
height: 800px;
background: url(经融计算模版.jpg) no-repeat;
}
.box1, .box2, .box3, .box4
{
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 >
<div >
<!-- 第一层绝对定位 -->
<div class="easyui-panel" style="position: absolute; left: 823px; top: 50px; 184px;
height: 100px;">
<table border="0" style=" 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 />
</td>
</tr>
</table>
</div>
<!-- 第2层 progressbar 绝对定位 -->
<div class="easyui-panel" style="position: absolute; left: 535px; top: 138px; 184px;
height: 100px;">
<table border="0" style=" 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; 184px;
height: 100px;">
<table border="0" style=" 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; 184px;
height: 100px;">
<table border="0" style=" 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; 184px;
height: 100px;">
<table border="0" style=" 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; 184px;
height: 100px;">
<table border="0" style=" 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; 184px;
height: 100px;">
<table border="0" style=" 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; 184px;
height: 110px;">
<table border="0" style=" 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
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; 184px;
height: 110px;">
<table border="0" style=" 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
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; 184px;
height: 110px;">
<table border="0" style=" 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
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; 184px;
height: 110px;">
<table border="0" style=" 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
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; 184px;
height: 110px;">
<table border="0" style=" 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
showTip:true,
rule: [50,'|',200],
min:50,
max:200" value="100">
<br />
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
效果图：