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

最新推荐文章于 2022-08-01 00:19:33 发布
最新推荐文章于 2022-08-01 00:19:33 发布
阅读量174 收藏 2
点赞数
文章标签： xhtml c# javascript ViewUI
原文链接：http://www.cnblogs.com/suntanyong88/p/4913548.html
版权 
<%@ 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>

 

效果图：

转载于:https://www.cnblogs.com/suntanyong88/p/4913548.html

weixin_30702413
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
easyUI tree 实现定位操作
liu22985342的专栏
06-11 4270
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> /css/basestyle.css"> /css/index.css"> /css/cate.css"> /easyui/css/easyui.css"> /easy
css绝对定位如何在不同分辨率下的电脑正常显示定位位置？(一定要看！)
09-24
主要介绍了css绝对定位如何在不同分辨率下的电脑正常显示定位位置，本文首先解释了常见的电脑分辨率，为了页面在不同的分辨率下正常显示，要给页面一个安全宽度，再去使用绝对定位，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
DIV的相对布局和绝对布局
11-16 4243
 position:relative|相对定位 使用position:relative，就需要top,bottom,left,right4个属性来配合，确定元素的位置。 如果要让div-1层向下移动20px,左移40px: example代码:#div-1 {position:relative;top:20px;left:40px;}如果用到相对定位，紧随他的层divafter是不会出现在div-
设置div的绝对布局
wq105032007067的专栏
11-23 1164
//获取元素      function get(objDiv){     return document.getElementById(objDiv); }    //显示 function show(objDiv){     var obj = get(objDiv);     obj.style.display = ""; } //隐藏 function hide
css绝对定位如何在不同分辨率下的电脑正常显示定位位置？
weixin_34279184的博客
12-26 260
有时候我们在写页面中，会发现绝对定位的父级元素已经相对定位了，但是在不同分辨率的电脑下，绝对定位还是会错乱，似乎父级的相对定位并没有起了作用。首先要明白如下几个原理：1、笔记本电脑的分辨率一般为1366*768附近，PC电脑的分辨率一般为 1920*1080；以下为常见电脑分辨率：当写网页时，如果在1920这样的大分辨率写好之后，再去小分辨率的笔记本看同样的这个网页，会发现...
position:absolute;怎么样随分辨率改变而改变
WhoWrongsWhere的专栏
10-12 2362
1.如果要随分辨率大小改变尺寸，把position中的left和top改为百分比，不要设固定像素px具体值 2. 把菜单容器的父级容器加上position：relative,比如 父级 　　子级  自己测试(各浏览器下)下看看,理解了的话对于定位问题就迎刃而解... （个人倾向于使用第二种方法）
通过绝对定位实现div重叠实例代码
09-25
总结来说，通过绝对定位实现div重叠是一种常见的网页布局技巧，它利用了CSS的`position`属性以及`left`、`right`、`top`和`bottom`属性来精确控制元素的位置。理解并熟练运用这些概念，可以创建出各种复杂的网页布局...
CSS网页布局教程:绝对定位和相对定位
09-27
网页制作Webjx文章简介：本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的...
一列固定宽度布局和背景图片绝对定位
01-19
一列固定宽度网页用于我的学习笔记，很不错吧。...2.接下来先为body编写CSS代码：（方法还是和“我的第一张css div布局网页”一样，用鼠标编代码，呵呵！） body { margin: 0px;padding: 0px;background-attachme
CSS---div盒子模型、相对绝对位置、float浮动、清除浮动
weixin_51351637的博客
08-01 2357
类似下图现象，四个浮动的图不再占用最上面的那个div。
使用DIV+CSS布局页面——1
热门推荐
qq_36461411的博客
07-01 2万+
1.什么是div        div是一个容器。在HTML页面中的每个标签对象几乎都可以称得上时个容器，例如使用&lt;p&gt;段落的标签。&lt;p&gt;段落&lt;/p&gt;        &lt;p&gt;标签作为一个容器，其中放入了内容。同样的，div也是一个容器，能够放置内容，例如： &lt;div&gt; 文档内容 &lt;/div&gt;        在传统的表格样式...
css相对布局和绝对布局的案例
bloom的专栏
10-31 1万+
今天学习了一下css，感觉要记录一下常见案例。 简单的商品展示布局，如图： 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;sty
关于HTML学习重点-绝对布局和相对布局总结
lixiang987654321的专栏
07-24 9110
其实这篇文章早就该写了，很久写了关于HTML布局相关的经验总结，一直在百度云上，只是偶尔查询翻到对应资料，担心日后很难找到，所以最后还是决心以文章的形式记录下来供大家参考查阅，实现这篇文章应有的价值； 之前从事Java2-3年，对JavaWeb相关技术都有较深的了解，当然自从从事C++工作之后，一直在专研C++相关技术，所以对Java而言，我已经忘得差不多了，虽然如此，如果真的要
div布局：相对定位、绝对定位、固定定位
小鸣的博客
07-07 1万+
当用div布局，相对定位时，子div的位置是相对于母div来设置的（从母div左上角开始算），margin可以活动到母div外围而不会把母div撑大，padding则总是在母div内部折腾，会把母div撑大。—————————————————————————————————————————— 当用div布局，绝对定位时，div位置是相对整个页面来设置的（从整个网页的左上角开始算），绝对定位的d
如何精确定位固定大小的div在网页的中间位置并且不随分辨率的设置改变(位置大小都不变)...
weixin_30785593的博客
03-01 1878
所有的框模型一开始都是按文档中正常的元素流定位，而定位position属性允许我们改变这些自然的位置。通过利用一些简单的Css规则，position使得设计者可以将HTML元素精确放置，position属性确定了每个元素框（box）定位的参考点。在详细介绍之前，我们先简要的说明一下定位的4种方法：1、静止定位（static）：这种方法使得所有的元素最终位置都是一个静止位置。所以没有什么需要特殊说的...
开源，安卓自动缩放布局，解决屏幕适配问题
月夜的专栏
05-06 8280
做过安卓开发的都知道，屏幕适配是一件非常困难的事情。 Google官方的解决方案：http://developer.android.com/guide/practices/screens_support.html 需要写多个layout文件以及dimens.xml，工作量大不说，维护也麻烦。 其实很多时候我们的需求很简单，就是要求不同的屏幕看上去效果一样就可以了。这样就需要我们布局的
绝对定位和相对定位 [1]
03-10 363
．定位的专业解释(1)语法position : static | absolute | fixed | relative (2) 说明从上面语法可以看出，定位的方法有很多种，它们分别是静态（static），绝对定位（absolute），固定(fixed)，相对定位（relative）。在这个教程里，我不逐一讲，只讲最常用也是最实用的两个定位方法：绝对定位（absolute）、相对定位（rela
CSS绝对定位在宽屏分辨率下错位
低调走过
04-16 7701
网页兼容测试，除了做不同浏览器兼容的测试，还要观察网页在不同分辨率下的表现情况。在页面中使用了CSS绝对定位，发现在宽屏下错位。随后测试非1024*768分辨率，都有很严重的错位情况。最后找出了原因，CSS绝对定位是相对于紧邻最近的上级元素 的位置，一开始我理解为浏览器左上角，这样在不同分辨率下就会出问题，用position:relative;  声明一下参考的固定位置就OK了。如下面这段其中Top，Left都是指相对div.contentArea的位置。页面Html相关CSS定义.contentAre
怎么使用div相对定位和绝对定位完成页面布局
最新发布
05-25
使用 div 相对定位和绝对定位可以实现灵活的页面布局，具体步骤如下： 1. 在 HTML 中创建需要布局的元素，使用 div 标签包裹它们。 2. 为需要相对定位的元素添加 position: relative; 的样式，这样会将该元素的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值