1:效果:
初始:
点击首页:
点击个人主页 :
点击其他类似:
2:代码(这里我只提供css文件和核心代码,链接内容不提供)
核心代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>用css与div的网页设计</title> <link href="jyt.css" rel="stylesheet" type="text/css"> <!--链接外部样式--></head><body><div id="Container"><div id="Header"><img src="4.jpg" width="350px" height="155px"><span>首页</span><span>|</span><span>个人主页</span><span>|</span><span>自荐信</span><span>|</span><span>成绩单</span></div><div id="Pagebody"><div id="SideBar"><ul><li><a href="首页.html" target="woc">首页</a></li> <!--这几行是重点--><li><a href="个人主页.html" target="woc">个人主页</a></li><li><a href="自荐信.html" target="woc">自荐信</a></li><li><a href="成绩单.html" target="woc">成绩单</a></li></ul></div><div id="MainBody"> <iframe name="woc" frameborder="0" width="945px" height="545px"></iframe><!--这一行是重点--></div></div><div id="Footer"><h2 text-align="center">Copyrights - Web前端工作室 All rights reserved.jyt</h2></div></div></body></html>
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.在你要展示的块里的操作:
不管链接有多少条,都只需要一条语句,<iframe name="woc"></iframe>当然,可以根据需求添加其他标签,注意:这里的name要等于你之前想要在这个块展示的链接而定义的target的值。若是在这一块写了多条<iframe>且里面的name不同,自己可以去看看效果。(我当时在这个误区挣扎了几个小时,笑死)
ps:吐槽一点,这些教课的老师顶个屁用,开局一张ppt,知识获取全靠踩坑和各个网站上的同道,淦!自学才是yyds.
Web前端:实现在一块区域(div)点击链接 在同一页面的指定区域显示链接的内容——基于css与div结合网页布局设计