flex侧边栏布局，侧边插入网址然后网页内容显示在ifram窗口内，但是只是简单的插入，所以当点击的时候跳转的链接就会进入新的页面，因为新的地址中并没有target属性。flex两个属性，快速垂直居中。：justify-conteng:center, align-content:center;
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style >
body{
background-color: skyblue;
display: flex;
flex-direction:column;
}
.topbar {
height: 50px;
width: 100%;
background-color: rgb(39, 7, 114);
display: flex;
flex-direction: column;
justify-content: space-around;
}
.sorce {
height: 700px;
width: 100%;
background-color: rgb(250, 239, 239);
display: flex;
}
.navigation {
width: 15% ;
background-color: rgb(26, 64, 112);
display: flex;
flex-direction: column;
justify-content: space-around;
}
.neiron {
width: 100%;
}
.daohang{
background-color: rgb(109, 4, 109);
line-height: 30px;
margin-top: 10px;
text-align: center;
color: wheat;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
a {
text-decoration: none;
}
p{
line-height: 15px;
margin: auto;
font-size: 30px;
color: wheat;;
}
</style>
</head>
<body>
<div class="topbar">
<p>还不下马受降</p>
</div>
<div class="sorce">
<div class="navigation">
<a href="https://www.bilibili.com/" class="daohang" target="d">哔哩哔哩</a>
<a href="http://www.kugou.com/" class="daohang" target="d">酷狗音乐</a>
<a href="https://y.qq.com/?ADTAG=myqq#type=index" class="daohang" target="d">QQ音乐</a>
<a href="https://music.migu.cn/v3" class="daohang" target="d">咪咕音乐</a>
<a href="https://www.youku.com/" class="daohang" target="d">优酷视频</a>
<a href="https://v.qq.com/" class="daohang" target="d">腾讯视频</a>
<a href="https://www.iqiyi.com/" class="daohang" target="d">爱奇艺</a>
<a href="https://cn.pornhub.com/" class="daohang" target="d">快乐星球</a>
</div>
<iframe name="d" class="neiron" src="https://www.baidu.com/" frameborder="0"></iframe>
</div>
</body>
</html>
