zoukankan      html  css  js  c++  java
  • 页面内容居中方法

    用CSS控制:

    方式一:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>宁夏短期天气预报</title>
        <#include "/web/common/project/meta.ftl"/>
        <style type="text/css">
            .aa{
                position: absolute; 
                top: 50%;left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
        </style>
    
    </head>
    <body>
    <p style="text-align: center;">宁夏短期天气预报</p>
    <script type="text/javascript">
        (function ($) {
            
        }(jQuery));
    </script>
    <iframe class="aa" src="http://3g.nx121.com/pc/tqybnx.aspx" style="400px;height:400px;"></iframe>
    </body>
    </html>

    方式二:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>宁夏短期天气预报</title>
        <#include "/web/common/project/meta.ftl"/>
    </head>
    <body>
    <p style="text-align: center;">宁夏短期天气预报</p>
    <script type="text/javascript">
        (function ($) {
            
        }(jQuery));
    </script>
        <div style="400px;height:400px;margin:0px auto;">
            <iframe src="http://3g.nx121.com/pc/tqybnx.aspx" style="400px;height:400px;margin:0px auto;"></iframe>
        </div>
    </body>
    </html>

     页面内容自适应浏览器宽度:

    <script language="javascript">
      //先获取到报表所在区域的页面元素,再通过document.body.clientWidth获得到浏览器的宽度,将该宽度值用于改变报表所在区域的样式宽度
      function myResize() {
        var tab1 = document.getElementById("sysReportIframe");
        tab1.style.width=document.body.clientWidth;
      }
      window.onload=myResize;
      window.onresize=myResize;
    </script>
  • 相关阅读:
    洛谷P2466 [SDOI2008]Sue的小球 题解 区间DP+费用提前计算
    中国国家集训队论文集目录(1999-2008)
    洛谷P1726 上白泽慧音 题解 强连通分量
    洛谷P1410 子序列 题解 动态规划
    树堆(Treap)学习笔记 2020.8.12
    伸展树(Splay)学习笔记
    git操作
    yii 缓存探究
    yii之srbac详解
    一个PDO类
  • 原文地址:https://www.cnblogs.com/shuilangyizu/p/6763185.html
Copyright © 2011-2022 走看看