Iframe框架+table布局 +div布局实例
<td colspan="2" style="width: 80%">
<iframe src="http://www.baidu.com" width="100%" height="100%" name="myframe"></iframe>
</td>
源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<title>tb布局</title>
<style type="text/css">
body{
height:100% auto;
width:100% auto;
}
table{
height: 990px;
width: 100%;
} </style>
</head>
<body >
<table > <tr style="background-color: red;height:10%">
<td colspan="3" style="height: 10%;width: 100%;font-size:30px;text-align: center" >我觉得一般吧，甚至有点难听，卜凡的拉普有点尬，岳明辉一如既往的油……</td>
</tr>
<tr style="height:80%;background-color: gray">
<td style="width:20%;color: green">
<ul style="list-style:none;line-height: 100px">
<li><a href="http://www.baidu.com" target="myframe"><img src="img/bd.gif"></a></li>
<li><a href="https://www.ifeng.com/" target="myframe"><img src="img/fh.gif"></a></li>
<li><a href="http://www.jd.com" target="myframe"><img src="img/jd.gif"></a></li>
<li><a href="http://www.taobao.com" target="myframe"><img src="img/tb.gif"></a></li>
<li><a href="https://www.sina.com.cn/" target="myframe"><img src="img/xl.gif"></a></li>
<li><a href="http://www.51zxw.com" target="myframe"><img src="img/我要自学网.png"></a></li>
</ul>
</td>
<td colspan="2" style="width: 80%">
<iframe src="http://www.baidu.com" width="100%" height="100%" name="myframe"></iframe>
</td>
</tr>
<tr style="background-color: pink;height:10%">
<td colspan="3" style="font-size:30px;text-align: center ">由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。 </td>
</tr>
</table> </body>
</html>
效果:
使用div布局和实例实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div布局</title>
<style type="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>
<div class="firstpart">
《三国演义》是中日两国合作制作的动画片，已于2009年在中国上映。该动画片是根据中国古代名著《三国演义》改编，由北京辉煌动画、央视动画与日本未来行星株式会社联手打造的高清动画。
</div>
<div class="secondpart">
<div id="left">
<ul style="list-style: none">
<li><a href="http://www.baidu.com" target="myframe"><img src="img/bd.gif"></a></li>
<li><a href="https://www.ifeng.com/" target="myframe"><img src="img/fh.gif"></a></li>
<li><a href="http://www.jd.com" target="myframe"><img src="img/jd.gif"></a></li>
<li><a href="http://www.taobao.com" target="myframe"><img src="img/tb.gif"></a></li>
<li><a href="https://www.sina.com.cn/" target="myframe"><img src="img/xl.gif"></a></li>
<li><a href="http://www.51zxw.com" target="myframe"><img src="img/我要自学网.png" id="timg"></a></li>
</ul>
</div>
<div id="right">
<iframe src="http://www.baidu.com" name="myframe" id="myframe"> </iframe>
</div>
</div>
<div class="thirdpart">
《红楼梦》，中国古代章回体长篇小说，又名《石头记》等，被列为中国古典四大名著之首，一般认为是清代作家曹雪芹所著。小说以贾、史、王、薛四大家族的兴衰为背景，以富贵公子贾宝玉为视角，描绘了一批举止见识出于须眉之上的闺阁佳人的人生百态，展现了真正的人性美和悲剧美，可以说是一部从各个角度展现女性美的史诗。
</div> </body>
</html>
diiv布局+iframe
素材：
Iframe框架+table布局 +div布局实例的更多相关文章
- table布局与div布局
DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABL ...
- 2017-12-04HTML布局＿div布局
HTML布局＿div布局 <!doctpye> <html> <head> <meta charset = 'utf-8'> <title> ...
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UT ...
- HTML学习笔记 div布局及table布局案例 第三节 （原创）参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用table布局和div布局的区别
table布局的渲染是将整个table全部渲染出来,如果网路不给力的情况下,整个table会卡死在页面div布局的话,页面渲染,会一个一个的div渲染,网页出现会一个一个出来,不管网速怎样,不会全局卡 ...
- table 和 div 简单布局
table 简单布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- 浅谈table和DIV网页布局
DIV+CSS是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DI ...
- [转]基于display:table的CSS布局
当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...
- 基于CSS属性display:table的表格布局的使用
项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...
随机推荐
- [转]Node.js框架对比：Express/Koa/Hapi
本文转自:https://www.cnblogs.com/souvenir/p/6039990.html 本文翻译自: https://www.airpair.com/node.js/posts/no ...
- CheckForIllegalCrossThreadCalls = false 是干嘛的?
public Form1() { InitializeComponent(); CheckForIllegalCrossThreadCalls = false; } 在多线 ...
- c# 溢出上下文检测
对于类型转换是否溢出可以用 checked和unchecked运算符 在unchecked上下文中会忽略溢出 在checked 会抛出异常 ; byte sb; sb = unchecked((byt ...
- Centos7.6 在LNMP上部署禅道
一.下载禅道,并传到你的服务器上面的/opt文件下. http://dl.cnezsoft.com/zentao/7.3/ZenTaoPMS.7.3.stable.zbox_64.tar.gz 二.使 ...
- spring boot 打jar包，获取resource路径下的文件
前言:最近在spring boot项目静态类中获取resource路径下文件,在idea中启动都可以获取,但是打包后变成了jar包 就无法获取到. 我想到了两种方法,一种是根据http访问静态资源比如 ...
- nginx代理配置 配置中的静态资源配置，root 和 alias的区别。启动注意事项
这篇主要内容是:nginx代理配置 配置中的静态资源配置,root 和 alias的区别.启动注意事项! 为什么会在window上配置了nginx呢?最近我们的项目是静态资源单独放在一个工程里面,后端 ...
- 1.写页面 2.css的继承属性有哪些 3.margin对布局的影响
1. sparent 透明的 2. placeholder 提示语 写页面 1.搞清结构层次 2. 保证模块化 让它们之间不能收到影响. (1) 元素性质 (2)标准流 浮动带来的脱离文档流撑不起父级 ...
- linux下的~/
在linux里面,~/表示的是个人目录,例如你的账户是student,那么~/代表的是/home/student/
- Docker 系列二（操作镜像）.
一.镜像管理 1.拉取镜像 docker pull [选项] [Docker Registry 地址[:端口号]/]仓库名[:标签] -- Docker 镜像仓库地址 :一般是 域名或者IP[:端口号 ...
- 通过css3实现的动画导航菜单代码
用css3样式实现的滑动导航菜单,html代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &quo ...