Web前端:实现在一块区域(div)点击链接,在同一页面的指定区域显示链接的内容 |
您所在的位置:网站首页 › 在浮动框架中显示某个网页 › Web前端:实现在一块区域(div)点击链接,在同一页面的指定区域显示链接的内容 |
1:效果:
初始: 点击首页: 点击个人主页 : 点击其他类似: 2:代码 (这里我只提供css文件和核心代码,链接内容不提供)核心代码 用css与div的网页设计![]() 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 |