码迷，mamicode.com
首页 > 其他好文 > 详细

Div绝对定位布局，适合所有分辨率不变型

时间：2015-10-27 11:12:18      阅读：255      评论：0      收藏：0      [点我收藏+]

标签：

<%@ 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>

 

效果图：技术分享

Div绝对定位布局，适合所有分辨率不变型

标签：

原文地址：http://www.cnblogs.com/suntanyong88/p/4913548.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！