北京市保障性住建设投资中心网站首页,wordpress wp_query 参数,做任务网站,专业的培训行业网站开发一.窗口框架
作用#xff1a;将网页分割为多个HTML页面#xff0c;即将窗口分为多个小窗口#xff0c;每个小窗口可以显示不同的页面#xff0c;但是在浏览器中是一个完整的页面
基本语法
frameset cols row/framesetframe…一.窗口框架
作用将网页分割为多个HTML页面即将窗口分为多个小窗口每个小窗口可以显示不同的页面但是在浏览器中是一个完整的页面
基本语法
frameset cols row/framesetframe src /frameframe src /frameframe src /frame
/frameset
cols表示列的分割
rows表示行的分割
注意框架中没有body标记
步骤流程
1.先建4个HTML 2.在frame.html网页中分出三个小的网页分为左 中 右分别占30% 40% 30%此时记得这里不要写body标记 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headframeset cols30%,40%,30%frame srcleft.html /frameframe srcmiddle.html /frameframe srcright.html /frame
/frameset/html3.然后分别对左 中 右写上一点东西
left.html:随便插入一张图片
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodypleft/pimg src../week3/imges/B.jpg alt
/body
/html
right.html:也是随便插入一张图片 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyp right /pimg src../week3/imges/car1.jpg alt
/body
/html
middle.html写入了一些超链接
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodypmiddle/p p刷题网站推荐/ppa hrefhttp://ybt.ssoier.cn:8088/信息学奥赛一本通/a/ppa hrefhttps://www.luogu.com.cn/ 洛谷 /a/pPa hrefhttps://codeforces.com/ codeforces /a/Ppa hrefhttps://atcoder.jp/ atcoder /a/ppa hrefhttps://leetcode.cn/ leetcode /a/ppa hrefhttps://ac.nowcoder.com/牛客/a/ppa hrefhttps://www.acwing.com/acwing/a/p/body
/html
整体布局是这样的 4.此时找到frame.html在浏览器中预览效果如下我们可以看到一个网页分为左中右三个小的网页了并且三个小的网页显示的东西不同 我们将frame中的cols修改为rows时效果是怎么样的呢
那么网页就会成为上 中 下 排列 效果如下 课后作业 题目要求
我们将制作如图显示的网页
首先要将网页分为上 中 下三个页面
但是中间那个页面我们要在细分
分为左边 右边 两个小网页
一共是五个网页 然后我们在左边那个网页插入两个超链接一个是个人简历一个是兴趣爱好
当我们点击个人简历或者兴趣爱好时右边那个网页会显示对应的个人个人简历或兴趣爱好
提示
思考我们一共要建立多少个html?
4个小的网页 top bottom left right
还有自己的简历和兴趣爱好 resume hobby
还有一个负责链接的框架frame.html
我们建立一个超链接点击超链接在当前页面显示时只要设置a标签的href即可
但是呢我们要在另一个网页中显示此时我们就要设置默认打开的网页也就是a标签的target属性记得先对要显示的网页设置一个name,方便指定网页打开
完整代码 frame.html: !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headframeset rows15%,70%,15%frame srctop.html/frameframeset cols30%,70%frame srcleft.html/frame!-- 这里要设置一下name的值方便其他网页跳转过来就是以便满足从left.html点击但是呢在right.html中显示 --frame srcright.html namer /frame /frameset frame srcbottom.html/frame/frameset
/html
top.html:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyptop/ph1 aligncenter你好呀/h1
/body
/html
bottom.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodypbottom/pp alignright版权所有copy;hover/p
/body
/html
left.html:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodypleft/p!-- img src../week3/imges/B.jpg alt --!-- target:表示打开的位置 --pa hrefresume.html targetr 个人简介/a/ppa hrefhobby.html targetr我的兴趣爱好/a/p
/body
/html
right.html: !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyp right /p
/body
/html
resume.html:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh1个人简介/h1p姓名hover/pp年龄18/p
/body
/html
hobby.html: !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyphobby/pulli看小说/lili跑步/lili写算法/li/ul
/body
/html
完整效果 点击1然后观察2里的内容变化此时出现了个人简历 点击我的兴趣爱好将出现如何内容
