简单flex侧边栏布局

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>

只是侧边效果，ifram里面是网站内容

在这里插入图片描述

原文地址：https://blog.csdn.net/weixin_43865846/article/details/116356977

简单flex侧边栏布局

相关推荐