Iframe框架+table布局 +div布局实例
2024-05-14 04:14:39
<tdcolspan="2"style="width: 80%"><iframesrc="http://www.baidu.com"width="100%"height="100%"name="myframe"></iframe> </td>
源代码:
<!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF-8"><metaname=”viewport”content=”width=device-width,initial-scale=1″/><title>tb布局</title><styletype="text/css">body{height:100% auto;width:100% auto;}table{height:990px;width:100%;}</style> </head> <body><table><trstyle="background-color: red;height:10%"><tdcolspan="3"style="height: 10%;width: 100%;font-size:30px;text-align: center" >我觉得一般吧，甚至有点难听，卜凡的拉普有点尬，岳明辉一如既往的油……</td></tr><trstyle="height:80%;background-color: gray"><tdstyle="width:20%;color: green"><ulstyle="list-style:none;line-height: 100px"><li><ahref="http://www.baidu.com"target="myframe"><imgsrc="img/bd.gif"></a></li><li><ahref="https://www.ifeng.com/"target="myframe"><imgsrc="img/fh.gif"></a></li><li><ahref="http://www.jd.com"target="myframe"><imgsrc="img/jd.gif"></a></li><li><ahref="http://www.taobao.com"target="myframe"><imgsrc="img/tb.gif"></a></li><li><ahref="https://www.sina.com.cn/"target="myframe"><imgsrc="img/xl.gif"></a></li><li><ahref="http://www.51zxw.com"target="myframe"><imgsrc="img/我要自学网.png"></a></li></ul></td><tdcolspan="2"style="width: 80%"><iframesrc="http://www.baidu.com"width="100%"height="100%"name="myframe"></iframe></td></tr><trstyle="background-color: pink;height:10%"><tdcolspan="3"style="font-size:30px;text-align: center ">由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。</td></tr></table></body> </html>
效果:
使用div布局和实例实现
<!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF-8"><title>div布局</title><styletype="text/css">body{margin:0;padding:0;width:100% auto;height:990px;/*border: 2px solid red;*/font-size:0px;}.firstpart{height:10%;background-color:#3245ADFF;font-size:25px;text-align:center;}.secondpart{height:80%;background-color:gray; }.secondpart #left{display:inline-block;width:20%;height:100%;float:left;background-color:pink;}.secondpart #left ul{margin-top:60px;padding:0;}.secondpart #left ul li{width:100%;height:120px;align-self:center;}.secondpart #left #timg{width:90%;}.secondpart #right{display:inline-block;width:80%;height:100%;background-color:green;}.secondpart #right #myframe{width:100%;height:100%;}.thirdpart{height:10%;font-size:25px;background-color:#3245ADFF;text-align:center;}</style> </head> <body><divclass="firstpart">《三国演义》是中日两国合作制作的动画片，已于2009年在中国上映。该动画片是根据中国古代名著《三国演义》改编，由北京辉煌动画、央视动画与日本未来行星株式会社联手打造的高清动画。</div><divclass="secondpart"><divid="left"><ulstyle="list-style: none"><li><ahref="http://www.baidu.com"target="myframe"><imgsrc="img/bd.gif"></a></li><li><ahref="https://www.ifeng.com/"target="myframe"><imgsrc="img/fh.gif"></a></li><li><ahref="http://www.jd.com"target="myframe"><imgsrc="img/jd.gif"></a></li><li><ahref="http://www.taobao.com"target="myframe"><imgsrc="img/tb.gif"></a></li><li><ahref="https://www.sina.com.cn/"target="myframe"><imgsrc="img/xl.gif"></a></li><li><ahref="http://www.51zxw.com"target="myframe"><imgsrc="img/我要自学网.png"id="timg"></a></li></ul></div><divid="right"><iframesrc="http://www.baidu.com"name="myframe"id="myframe"></iframe></div></div><divclass="thirdpart">《红楼梦》，中国古代章回体长篇小说，又名《石头记》等，被列为中国古典四大名著之首，一般认为是清代作家曹雪芹所著。小说以贾、史、王、薛四大家族的兴衰为背景，以富贵公子贾宝玉为视角，描绘了一批举止见识出于须眉之上的闺阁佳人的人生百态，展现了真正的人性美和悲剧美，可以说是一部从各个角度展现女性美的史诗。</div></body> </html>
diiv布局+iframe
素材：
转载于:https://www.cnblogs.com/angle6-liu/p/10136617.html
Iframe框架+table布局 +div布局实例相关推荐
- 靠左靠右实际布局DIV CSS实例模块
靠左靠右布局与只靠左布局DIV CSS实例模块 在实际css布局中常常会遇到,图标式超链接布局,以下为大家介绍一个使用float实现的图标布局. 采用css float布局效果截图 本模块使用floa ...
- HTML5布局—div布局和table布局
1.使用 <div> 元素的 HTML 布局 注释:<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位. 这个例子使用了四个 <div> 元素 ...
- html div 内部左右布局,div布局大全
div+css布局还有哪些布局方式 LZ说的框架是不是frame,框架适用于后台管理界面,一般顶部或左侧是功能菜单,右侧是内容显示页面而DIV+CSS是前台界面各模块设计,两者没交集, html 用d ...
- html5 居中布局,div 布局水平居中篇
div 机关程度居中篇 有的阅读器默许下div 居中的,但有的阅读器div靠左的,如何让DIV 机关居中呢? 枢纽DIV居中CSS代码: margin:0 auto 记取不是margin:auto d ...
- 网页布局(div布局)
网上有太多介绍,个人觉得不错的有<Div+CSS布局大全>,有PDF版本,可下载离线观看,别人总结的一个文档,简洁易懂,学起来不费劲,花时间不多,快速阅读完,即可上手,呵呵. 这里就不介绍 ...
- JavaScript-页面布局-div布局-盒子模型
文章目录 1.盒子模型 2.定位方式 3.排列属性-float和clear 4.块和内联属性 5.作者答疑 在使用Html构建界面时,最关键的标签是div,这是一个有着各种属性的块状标签,能够以绝 ...
- html中表格布局还是div布局,表格布局和css div布局
请简单说明表格布局网页和DIV+CSS布局网页的不同之处? 请简单说明表格布局网页和DIV+CSS布局网页的不同之处? div+css布局和表格框架式布局的优缺点各是什么?如题,越详细越好 TABLE ...
- 关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局 表格布局 导航 推荐文章 一个猴子成长史 你看个毛线 我就瞅你咋地 村里出了个半边天 一个猴子的成长 ...
- 2017-12-04HTML布局＿div布局
HTML布局＿div布局 <!doctpye> <html> <head><meta charset = 'utf-8'><title>HT ...
最新文章
- 让织梦CMS的后台编辑器支持优酷视频
- smarty半小时快速上手入门教程
- 三伏天到了,记得为数据中心降降温
- 【图像处理】MATLAB：退化函数及多种复原方法
- Ruby和SHELL中如何遍历指定目录的文件
- MySQL数据库的内连接，左外连接和右外连接查询
- 【Python3 SelectKBest 调用personer出现的错误】
- Apache Shiro第3部分–密码学
- centos6+ 将程序 注册到 service进行启动 停止 重启等：以nginx为例，添加nginx脚本
- 记录——《C Primer Plus （第五版）》第十章编程练习第四题
- 1716.计算力扣银行的钱-LeetCode
- java 面试题 生产者 消费者_面试大厂必看！就凭借这份Java多线程和并发面试题，我拿到了字节和美团的offer！...
- CSS color设置与调色板
- 51单片机c语言xdata,新概念51单片机c语言教程ppt
- 使用uniapp时十分方便的登录静态模板
- 作业帮-后台开发岗 面经
- 常用的配电箱有哪几种？
- 霍兰德职业规划测试软件,霍兰德职业兴趣测试
- 解决克隆虚拟机后无法上网问题（亲测有效）
- 无缘无故，Oralce使用normal模式登录用户失败