软件测试工程师之必备html知识,框架的设计

框架和表单设计:

什么是框架:将浏览器划分为不同的部位,每一部分加载不同的网页,实现同一个浏览器窗口加载多个页面的效果



注意:写的位置在body的上面部位,如果写在body里面,是不能运行的,放在body外面都可以运行


同时,frame标记必须要放在frameset   里面

例子:左中右是cols  如果是上中下 就是 rows,一个浏览器实现打开3个页面的效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架</title>
</head>
<frameset   cols="25%,25%,50%">
<frame src="http://www.baidu.com" />
<frame src="http://www.taobao.com" />
<frame src="http://www.jingdong.com" />
</frameset>
<body>
</body>
</html>

执行效果如图所示:



frame必须要写在frameset里面,分成几份,写几个frame


通过框架的方式实现以下界面,将页面分成3分,上面一份,下面两份,如图:

1:分成3份

2:点击公司简介,右边出来对应的内容


代码如下:需要创建3个html界面,左边的 左边html /右边的 右边html/第三章html

主页面代码如下:

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>

<frameset rows="20%,*" frameborder="yes" border="1">
<frame src="logo.html"/>
<frameset cols="20%,*">
<frame src="左边.html" />
<frame src="右边.html"  name="mainframe" noresize= "size" scrolling="no">
</frameset>
</frameset>
<body>
</body>

</html>

注意:noresize  表示不能调整框架大小,没有设置时,就可以调整的

scrolling 表示是否需要滚动条

name 框架名称,是链接标记的target所要的参数


左边html:

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com/" target="mainframe">百度</a><br />
<a href="https://www.taobao.com/" target="mainframe">淘宝</a><br />
<a href="https://www.jd.com/" target="mainframe">京东</a><br />
<a href="注册.html" target="_parent">登陆</a><br />
<a href="登陆.html" target="_blank">注册</a><br />

</body>

</html>

注意:mainframe是别名:

右边的html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>主要内容</h1>
</body>

</html>

iframe 可以在body里面写,也可以在body外面写,三个页面

页面1:test05-1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我是页面1</h1>
<iframe src="test05-2.html" width="1000"height="1000"></iframe>
</body>
<!--
    作者:offline
    时间:2018-06-14
    描述:iframe 可以在body里面写,也可以在body外面写
    -->
</html>

页面2:test05-2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我是页面2</h1>
<iframe src="test05-3.html"></iframe>
</body>
</html>

页面3:test05-3.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我是<a href="http://www.zongheng.com/" target="_parent">页面</a>3</h1>
</body>
</html>

运行结果如下:


点击页面链接,进入页面2,如图


猜你喜欢

转载自blog.csdn.net/xxlovesht/article/details/80693355
今日推荐