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;
            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>

效果图：

时间： 2024-12-16 11:11:43

Div绝对定位布局，适合所有分辨率不变型的相关文章

深度理解div+css布局嵌套盒子

1. 网页布局概述网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后在每个块中添加相应的内容.利用CSS排版方法更容易地控制页面每个元素的效果,更新也更容易,甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位. 2. 盒子模型盒子模型是CSS控制页面元素的一个重要概念,只有掌握了盒子模型,才能让CSS很好地控制页面上每一个元素,达到我们

使用Div + CSS布局页面

在设计网页时,能够控制好各个模块在页面中的位置是非常关键的.本章将讲解利用Div+CSS对页面元素进行定位的方法. Div是HTML中指定的专门用于布局设计的容器对象 Div是CSS布局的核心对象. Div本身与样式没有任何关系,样式需要编写CSS来实现,因此Div对象应该说从本质上实现了与样式的分离.(最终样式由CSS来完成) 无论是多么复杂的布局方法,都可以使用Div之间的并列与嵌套来实现. 为了实现内容与表现的分离,不应当将align对齐属性与style行间样式表属性编写在Div标签中,因

(转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

站酷几年了一直饱受其恩泽尤为感激一直想奉献些什么但是苦于水平苦于奔波今天静下心来为大家奉献下自己的div+css 经验 ,以下观点只代表深海个人立场希望为初学者提供一条"捷径". 希望广大网友提出宝贵意见同时不希望将初学的您带入走火入魔的状态! 1 :css (cascading style sheet): 初学者可以下载一本css 2.0 手册大概48小时的时间可以看完试完.至于样式手册上的单词(属性和取值) 多久能背完取决你的努力和英语基础,请注意无论

网页布局——绝对定位布局

1. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>绝对定位布局</title> 6 <style type="text/css"> 7 .wrap div{ 8 position: absolute; 9 min-height: 200px; 10 } 11 .left{ 12 lef

div+css 布局技巧总计

一.css 样式 1.float 首先需要了解块级元素(block element).每个块级元素都默认占用一行,在同一行只能添加一个块元素(float 除外).块级元素一般可以嵌套块级元素或者行内元素,如使用 div 布局. float 一般用于 div 布局的情形下,浮动的 div 可以向左或者向右移动,直到它的外边缘碰到其父级元素的框或者另外一个浮动的 div 边框为止.个人理解为:float 将需要换行的块级元素悬浮,使得其可以在同一行中显示. 在 css 中可以通过float: lef

现在主流网站为什么都用div+css布局而不是用table

由于刚刚接触前端,一直觉得table布局在代码上看起来比div+css更整洁,div+css布局的页面,一堆的<div><div><div>...</div></div></div>看起来都让人犯密集恐惧症,那么为什么现在的主流网站还都乐此不疲呢?为什么div+css反而成了一种主流布局方式呢?一直对此不解.这篇文章好像是解决了我的问题,先摘录过来,以便查阅. 以下内容摘自:http://www.divcss5.com/wenji/w

<转载>div+css布局教程之div+css常见布局结构定义

在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索框.页脚(版权和有关法律声明). 通常采用DIV元素来将这些结构定义出来,类似这样: <div id="Container"></div> 页面层容器 <div id="header"></div> 页面头部 <di

<转载>Div+Css布局教程（-）CSS必备知识

目录: 1.Div+Css布局教程(-)CSS必备知识注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的高度(Height:45px;). Background:设置对象的背景颜色.背景图像. 1.背景颜色 background:#09F; 2.背景图像 background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;