实现如下页面(在iframe框里打开网页)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
<style>
.aaa{
width: 100px;
height: 300px;
border: 1px black solid ;
float: left;
margin-left: 50px;
margin-top: 50px;
padding: 20px;
}
.bbb{
width:400px;
height:500px;
float: left;
margin-top: 50px;
margin-left: 30px;
}
iframe{
width: 100%;
height: 100%;
}
a{
text-decoration: none;
}
.aaa div{
height: 30px;
line-height: 25px;
border-bottom: 1px silver solid;
}
</style>
</head>
<body>
<div class="aaa">
<div><a href="https://space.bilibili.com/309216986" target="xxx">b站</a></div>
<div><a href="http://www.baidu.com" target="xxx">百度</a></div>
<div><a href="http://www.taobao.com" target="xxx">淘宝</a></div>
</div>
<div class="bbb"><iframe name="xxx" ></iframe></div>
</body>
</html>
思路:
利用同组值,给iframe起一个名字,然后让超链接的target指向iframe的name
其中还借用了div的镶嵌用了float使两个div对齐
利用div实现超链接标签的分块
利用div的下框线实现标签下的横线.