页面内容居中方法
用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="width: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="width:400px;height:400px;margin:0px auto;"> <iframe src="http://3g.nx121.com/pc/tqybnx.aspx" style="width: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>