HTML/CSS class5 页面布局frameset

1.代码


/*
 *Copyright  (c)  
 *All rights reserved.
 *文件名称: class6 页面布局.html
 *作者: 郭栋
 *完成日期:2018年 8月12日
 *版本号:v1.0
 *问题描述:frameset框架布局,前面练习操作,后面列表为下一文件提供跳转操作
 *输入描述:
 *程序输出
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class6</title>
</head>

<!--文档流 从上到下从左到右-->
<!--frameset布局-->
<!--table布局-->
<!--div布局-->


<!--<frameset rows="200px,*" frameborder="yes" border="1px" bordercolor="red" >-->
    <!--<frame src="http://www.baidu.com" noresize="noresize">-->
    <!--<frameset cols="30%,*">-->
        <!--<frame name="leftwindow" src="http://www.360.com" scrolling="no">-->
        <!--<frame src="http://www.taobao.com">-->
    <!--</frameset>-->
<!--</frameset>-->
<!--<noframes>-->
    <!--<body>-->
      <!--你的浏览器不支持框架集!-->
    <!--</body>-->
<!--</noframes>-->



<!--<body>-->
<!--<a href="http://www.baidu.com" target="frame_name">点击</a>-->
<!--<iframe name="frame_name" src="http://www.jd.com" height="500" width="50%">-->
    <!--你的浏览器不支持 iframe框架标签-->
<!--</iframe>-->
<!--</body>-->


<body>
<ul  style="list-style: none;" >
    <h2 ><small>导航</small></h2>
    <li><a href="http://www.baidu.com" target="view_frame">百度 </a></li>
    <li><a href="http://www.360.com" target="view_frame"> 360</a></li>
    <li><a href="http://www.jd.com" target="view_frame"> 京东</a></li>
    <li><a href="http://www.taobao.com" target="view_frame">淘宝 </a></li>

</ul>
</body>
</html>
/*
 *Copyright  (c)  
 *All rights reserved.
 *文件名称: frameset布局.html
 *作者: 郭栋
 *完成日期:2018年 8月12日
 *版本号:v1.0
 *问题描述:frameset布局,实现页面布局及列表点击跳转
 *输入描述:
 *程序输出
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<frameset rows="40%,*"  bordercolor="red">
    <frame src="http://www.youdao.com">

    <frameset cols="10%,*"  bordercolor="red">
        <frame src="class6%20页面布局.html" noresize="noresize">
        <frame name="view_frame" >
    </frameset>
</frameset>
</html>

2实验结果

1
百度
2
京东

3.心得

刚了解的三种布局方式,frameset、table,div布局,在frameset学习中感觉也挺简单的,现阶段感觉要加强对各种属性的印象。在完成最后小练习过程中存在一些问题,在版本 68.0.3440.106(正式版本) (64 位)Chrome浏览器中,<a>标签的taget的framename效果无用,表现为在新的网页中打开链接,而在61.0.2 (32 位)Firefox浏览器中不存在这种问题。望各位指教。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郭_栋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值