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>
  • 相关阅读:
    MS Office CVE-2015-1641 恶意 Exploit 样本分析
    Qbot回归,已感染5.4万台计算机
    工具推荐:Backdoor-apk,安卓APK文件后门测试工具
    安卓微信、QQ自带浏览器 UXSS 漏洞
    延迟注入工具(python)
    小白欢乐多——记ssctf的几道题目
    使用转义防御XSS
    富文本存储型XSS的模糊测试之道
    k8s故障总结
    CentOS7.6部署k8s环境
  • 原文地址:https://www.cnblogs.com/shuilangyizu/p/6763185.html
Copyright © 2011-2022 走看看