简单flex侧边栏布局

2021-05-02 21:33:06 阅读：174 来源： 互联网

标签：flex center color 布局侧边 rgb background display

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里面是网站内容
在这里插入图片描述

标签：flex,center,color,布局,侧边,rgb,background,display
来源： https://blog.csdn.net/weixin_43865846/article/details/116356977

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

简单flex侧边栏布局