前端设计问题:iframe

居中问题:

尝试了一般的居中方法,无效果

   			display: flex;justify-content: center;align-items: center;

放到导航栏下面不居中在这里插入图片描述

放到页面底部还是不居中在这里插入图片描述

Code

    <iframe id="demo_sanshui" src="demo_sanshui.html" width="120%" height="100%" scrolling="no" frameborder="0"></iframe>

HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="./css/daoshi1.css" /><!-- 继承(相对定位) --><script>window.parent.$(function() { // 使用 vindow.parent 调用父级 jqueryvar head = document.getElementsByTagName("head").item(0);var linkList = window.parent.document.getElementsByTagName("link"); // 获取父窗口 link 标签对象列表for (var i = 0; i < linkList.length; i++) {var _link = document.createElement("link");_link.rel = 'stylesheet';_link.type = 'text/css';_link.href = linkList[i].href;head.appendChild(_link);}});</script>
</head><body><div class="column_wrapper" id="" data-spm=""><div class="nav2_ind04" id=""><div class="textTab" id="nav02" data-spm="EuhLU9mTLz1p" data-spm-max-idx="2"><div class="left"><h3><a href="#" target="_blank" data-spm-anchor-id="C28340.PdNvWY0LYxCP.EuhLU9mTLz1p.1">精彩呈现</a></h3></div><div class="clear"></div></div><div class="content" id="zbds_top" data-spm="EuhLU9mTLz1p"><div class="con"><ul style="margin-left: 0px"><li><div class="li_con"><div class="img"><a href="table.html" target="_blank"><img h5-src="" src="./images/san.png" /><i>山水</i></a></div><div class="title" id="time0"><a href="" target="_blank">#三板片区综合服务站 02-23</a></div><div class="brief" id="title_0"><a title="三板村“攻略”" href="https://www.jianpian.cn/a/cb4vwu5?sc=groupmessage&s_uid=2937179&a_uid=2937179&sd=1" target="_blank">三板村“攻略”</a></div></div><span class="li_line"></span></li><li><div class="li_con"><div class="img"><a href="#" target="_blank"><img h5-src="" src="./images/Flamingo.png" /><i>鸟兽</i></a></div><div class="title" id="time1"><ahref="https://mp.weixin.qq.com/s/2Z3NfYj3eszgSWagNTsCLw"target="_blank">#方志广东 2021-06-04</a></div><div class="brief" id="title_1"><atitle="新闻调查"href="https://mp.weixin.qq.com/s/2Z3NfYj3eszgSWagNTsCLw"target="_blank">千鸟翔集的岭南水乡</a></div></div><span class="li_line"></span></li><li><div class="li_con"><div class="img"><a href="" target="_blank"><img h5-src="" src="./images/政策解读.png" /><i>政策</i></a></div><div class="title" id="time2"><ahref="http://dara.gd.gov.cn/snnyxxlb/content/post_3130231.html"target="_blank">#南方日报 2020-11-19</a></div><div class="brief" id="title_2"><atitle="古村焕新记"href="http://dara.gd.gov.cn/snnyxxlb/content/post_3130231.html"target="_blank">古村焕新记</a></div></div><span class="li_line"></span></li><li><div class="li_con"><div class="img"><a href="#" target="_blank"><imgh5-src="./images/皮划艇.png"src="./images/皮划艇.png"/><i>人文</i></a></div><div class="title" id="time3"><ahref="https://www.sohu.com/a/722923449_121106875"target="_blank">#珠海金湾 2023-09-23</a></div><div class="brief" id="title_3"><atitle="开门大吉-2023-43"href="https://www.sohu.com/a/722923449_121106875"target="_blank">丰收盛会水乡欢腾</a></div></div><span class="li_line"></span></li><!-- 新增一个主题,但无法显示(失败) --><!-- <li><div class="li_con"><div class="img"><a href="" target="_blank"><img h5-src="" src="./images/政策解读.png" /><i>改变</i></a></div><div class="title" id="time4"><ahref="http://dara.gd.gov.cn/snnyxxlb/content/post_3130231.html"target="_blank">#南方日报 2020-11-19</a></div><div class="brief" id="title_4"><atitle="古村焕新记"href="http://dara.gd.gov.cn/snnyxxlb/content/post_3130231.html"target="_blank">古村焕新记</a></div></div><span class="li_line"></span></li> --></ul></div></div></div></div><script>window.parent.$(function () {  // 使用 vindow.parent 调用父级 jqueryvar body = document.getElementsByTagName("body").item(0);var scriptList = window.parent.document.getElementsByTagName("script");  // 获取父窗口 script 标签对象列表for (var i =0 ; i < scriptList.length; i++) {var _script = document.createElement("script");_script.type = 'text/script';_script.src = scriptList[i].src;body.appendChild(_script);}});</script></body>
</html>

CSS

* {-webkit-text-size-adjust: none;text-size-adjust: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}body,
div,
p,
ul,
ol,
dl,
dt,
dd,
li,
form,
input,
table,
img,
h1,
h2,
h3,
h4,
h5,
h6 {margin: 0;padding: 0;
}body {color: #222222;background: #fff;margin-top: 0;font-family: PingFangSC-Regular, Helvetica, Arial, Microsoft Yahei, sans-serif;margin: 0 auto;min-width: 1022px;background-repeat: no-repeat;background-position: center center;
}a {color: #222222;text-decoration: none;/*outline: none;*/
}ul,
ol {list-style-type: none;
}em,
b,
i {font-style: normal;
}ul:after,
ol:after {clear: both;content: ".";display: block;font-size: 0;height: 0;line-height: 0;visibility: hidden;
}.clear {height: 0px;line-height: 0;font-size: 0;overflow: hidden;clear: both;
}/*默认分辨率小于1279 ,内容宽度962*/.column_wrapper {width: 1500px;margin: 0 auto;clear: both;position: relative;
}/*标题栏*/.textTab {clear: both;padding-bottom: 10px;
}/* 直播导视 */.nav2_ind04 .content {border-top: 2px solid #e5e5e5;padding: 0px 28px;position: relative;
}.nav2_ind04 .content .con ul li {padding: 28px 0px 26px 0;float: left;position: relative;
}.nav2_ind04 .content .con {position: relative;z-index: 1;overflow: hidden;
}.nav2_ind04 .content .con ul {width: 99999px;
}.nav2_ind04 .content .con ul li .img i {font-size: 18px;color: #000000;line-height: 21px;font-weight: bold;margin-left: 10px;
}.nav2_ind04 .content .con ul li .img a {width: 100%;display: block;line-height: 21px;
}.nav2_ind04 .content .con ul li .title {font-size: 14px;line-height: 24px;margin: 5px auto 10px 0px;color: #222222;
}.nav2_ind04 .content .con ul li .title a {color: #222222;
}.nav2_ind04 .content .con ul li .brief {font-size: 14px;line-height: 24px;color: #222222;height: 42px;
}.nav2_ind04 .content .con ul li .li_line {background: #0084ff;width: 186px;height: 2px;position: absolute;bottom: 0;left: 20px;display: none;
}.nav2_ind04 .content .con ul li .brief a {color: #222222;display: block;width: 100%;height: 100%;line-height: 24px;
}.nav2_ind04 .content .con ul li .li_con {border-right: 1px solid #e7e7e7;padding: 8px 20px 0px 20px;height: 104px;width: 186px;
}

我又回来啦

解决办法:将宽高设置为100%
 <iframeid="demo_sanshui"src="demo_sanshui.html"width="100%"height="100%"scrolling="no"frameborder="0"></iframe>

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/222842.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探秘数字学习新兴:深度解析知识付费系统

在当今数字化时代&#xff0c;知识付费系统作为一种创新性的学习和知识分享模式正逐渐崭露头角。本文将深入探讨知识付费系统的概念、重要性&#xff0c;并提供一个简单而完整的示例&#xff0c;展示其核心技术和实现方式。 概念与重要性 知识付费系统是一种基于互联网平台的…

北京 | 竹云与南方电网携手荣获“IDC 2023未来企业奖未来连接领导者”

11月22日-23日&#xff0c;2023第八届IDC中国数字化转型年度盛典在北京召开。本次大会以“竞放数字力量”为主题&#xff0c;汇聚超过1000位来自不同行业的大咖与伙伴共同参与此次盛会&#xff0c;从全球化视角出发&#xff0c;围绕本土化落地人工智能&#xff08;大模型&#…

2020年09月 Scratch(四级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch等级考试(1~4级)全部真题・点这里 一、单选题(共15题,每题2分,共30分) 第1题 执行下面程序,输入4和7后,角色说出的内容是? A:4,7 B:7,7 C:7,4 D:4,4 答案:B 第2题 执行下面程序,输出是? A:大学 中庸 孟子 论语 B:论语 大学 孟子 中庸 C:大…

菜单的hover不同动画背景

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…

【C++干货铺】非类型模板 | 模板特化 | 模板分离编译

个人主页点击直达&#xff1a;小白不是程序媛 C系列专栏&#xff1a;C干货铺 代码仓库&#xff1a;Gitee 目录 非类型模板参数 模板的特化 什么是模板特化&#xff1f; 函数模板特化 类模板的特化 全特化 偏特化 模板的分离编译 什么是分离编译&#xff1f; 模板的…

qInstallMessageHandler的学习

背景&#xff1a;需要做一个日志系统。 把信息重定向到txt文件中。 参考&#xff1a; QT 调试信息如何输出到文件&#xff08;qDebug/qWarning/qCritical/qFatal&#xff09;-CSDN博客 Qt 之 qInstallMessageHandler&#xff08;重定向至文件&#xff09;-CSDN博客 demo…

考试周刊杂志考试周刊杂志社考试周刊编辑部2023年第46期目录

教育教学研究 丰富作业形式 拓展课堂教学——“双减”下初中英语优化作业设计探析 王慧; 1-5 博学慎思明辨 撬动思维杠杆——论“思辨性阅读与表达”学习任务群范式构建 丁亚琴; 6-10《考试周刊》投稿邮箱&#xff1a;cn7kantougao163.com(注明投稿“《考试周刊》”) 崔…

Python读取modbus RTU协议

Python读取modbus RTU协议 下载modbus_tk库 pip3 install modbus_tkexecute主要函数 参考文章Python玩转modbus 软件模拟 vspdmodbus slave 虚拟COM1和COM2 modbus slave连接COM2口 更改从机数据 Python读取 import serial from modbus_tk import defines as cst from m…

如何更好的设计测试用例,看完就懂了。。。

引言 测试用例设计的最基本要求&#xff1a;覆盖住所要测试的功能。这是再基本不过的要求了&#xff0c;但别看只是简单的一句话&#xff0c;要能够达到切实覆盖全面&#xff0c;需要对被测试产品功能的全面了解、明确测试范围(特别是要明确哪些是不需要测试的)、具备基本的测…

java.sql.SQLException: No suitable driver 问题解决

问题出现 自己在写一个连接C3P0数据库连接池库的测试类&#xff0c;运行该类后出现了下图这个问题 这是我写的测试类 package demo;import com.mchange.v2.c3p0.ComboPooledDataSource;import javax.sql.DataSource; import java.sql.Connection; import java.sql.SQLExcept…

Java根据指定端口关闭进程(端口占用 Web server failed to start. Port 6061 was already in use.)

查询指定端口的pid netstat -ano | findstr 6063杀掉进程 taskkill /f /pid 36804

MySQL基本SQL语句(上)

MySQL基本SQL语句&#xff08;上&#xff09; 一、客户端工具的使用 1、客户端工具mysql使用 mysql: mysql命令行工具&#xff0c;一般用来连接访问mysql数据库 选项说明-u, --username指定登录用户名-p, --password指定登录密码(注意是小写p),一定要放到最后面-h, --hostn…