• 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 id="form1" runat="server">
    <div id="wrapper">
        <!-- 第一层绝对定位 -->
        <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 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;  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 id="txt_SalesPriceProportion_Param" runat="server" class="easyui-slider" style=" 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;  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 id="txt_ProgressProportion_Param" runat="server"  class="easyui-slider" style=" 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;  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 id="txt_ReturnedMoneyProportion_Param" runat="server" class="easyui-slider" style=" 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;  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 id="txt_OperatingInComeProportion_Param" runat="server" class="easyui-slider" style=" 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;  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 id="txt_DisposalProceedsProportion_Param" runat="server" class="easyui-slider" style=" 120px" data-options="
                showTip:true,
                rule: [50,'|',200],
                min:50,
                max:200" value="100">
                        <br />
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>
</body>
</html>

    效果图：
  • 相关阅读:
    h5之js生成二维码
    h5手势密码开发(使用jq)
    html可用于跨域的三个标签
    原生js实现ajax
    js中parentNode,parentElement,childNodes,children
    js字符串操作之substr与substring
    pyhton之os.path
    [bzoj1510][POI2006]Kra-The Disks_暴力
    [bzoj4994][Usaco2017 Feb]Why Did the Cow Cross the Road III_树状数组
    [bzoj2506]calc_分块处理
  • 原文地址：https://www.cnblogs.com/suntanyong88/p/4913548.html
Copyright © 2020-2023  润新知