美文网首页
2019-05-25 响应式媒介查询

2019-05-25 响应式媒介查询

作者: DreamNeverDie | 来源:发表于2019-05-25 06:10 被阅读0次
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
        * {margin:0; padding:0; list-style:none;}
    
        #aside {height:250px; position:fixed; left:0; top:50%; margin-top:-125px;}
        #aside li {width:100px;height:50px; text-align: center; line-height:50px; color:white; transition:0.3s all ease}
        #aside li:hover {width:150px;}
    
        #aside li.b1 {background:#3b5998}
        #aside li.b2 {background:#1da1f1}
        #aside li.b3 {background:#db4e41}
        #aside li.b4 {background:#6383a8}
        #aside li.b5 {background:#fe6550}
    
        @media (max-width:1024px) {
          #aside {height:50px;display:flex;width:100%;bottom:0; top:auto;margin-top:0;}
          #aside li {flex:1;width:auto;}
          #aside li:hover {width:auto;}
        }
        </style>
      </head>
      <body>
        <ul id="aside">
          <li class="b1">Facebook</li>
          <li class="b2">Twitter</li>
          <li class="b3">Google+</li>
          <li class="b4">vk</li>
          <li class="b5">other</li>
        </ul>
      </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:2019-05-25 响应式媒介查询

          本文链接:https://www.haomeiwen.com/subject/huoozqtx.html