Web前端:实现在一块区域(div)点击链接,在同一页面的指定区域显示链接的内容

您所在的位置:网站首页 在浮动框架中显示某个网页 Web前端:实现在一块区域(div)点击链接,在同一页面的指定区域显示链接的内容

Web前端:实现在一块区域(div)点击链接,在同一页面的指定区域显示链接的内容

2024-04-09 18:50| 来源: 网络整理| 查看: 265

1:效果:

初始:

点击首页:

点击个人主页 :

点击其他类似:

2:代码 (这里我只提供css文件和核心代码,链接内容不提供)

核心代码

用css与div的网页设计 首页 | 个人主页 | 自荐信 | 成绩单 首页 个人主页 自荐信 成绩单 Copyrights 2020-2021 Web前端工作室 All rights reserved.jyt

 css文件:

#Container { margin:0 auto; width:1200px; } #Header { height:155px; margin:5px; background-color:Grey; } #Pagebody { height:545px; margin-bottom::5px; } #SideBar{ float:left; width:250px; height:545px; background-color:Lime; margin-right:5px; } #MainBody{ float:left; width:940px; height:545px; background-color:PaleGreen; } #Footer{ height:100px; background-color:Grey; font-family:宋体; font-size:15px; padding-top:10px; } body { font-family:楷体; font-size:20px; margin:0; text-align:center; } p { margin:2; } img { float:left; } span { float:left; width:80px; margin-top:60px; font-family:隶书; cursor:pointer; margin-left:20px; } ul{ list-style-type:none; } li { text-align:center; font-family:黑体; font-size:25px; margin-bottom:45px; } h3 { color:Red; font-size:30px; font-size:楷体; } video{ height:100%; width:100%; position:absolute; z-index:-1; object-fill:fill; } 3:总结注意点

实现的技术核心是采用了iframe标签,用人话来理解如下:

  a.在你要放链接的块里的操作

   注意使用到target="woc" (woc是自己随意写的标记/名字),需要注意的是,在相同的其他块中显示的链接,target等于的东西要相等。

比如说链接1,2要显示在块1里面,则两个里面的target="woc1";

链接3、4要显示在块2里,则两个里面的target="woc2"

  b.在你要展示的块里的操作:

   不管链接有多少条,都只需要一条语句,当然,可以根据需求添加其他标签,注意:这里的name要等于你之前想要在这个块展示的链接而定义的target的值。若是在这一块写了多条且里面的name不同,自己可以去看看效果。(我当时在这个误区挣扎了几个小时,笑死)

ps:吐槽一点,这些教课的老师顶个屁用,开局一张ppt,知识获取全靠踩坑和各个网站上的同道,淦!自学才是yyds.



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3