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

<!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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容