Flex布局實(shí)例2：自適應(yīng)導(dǎo)航欄

<!DOCTYPE html>
   <html>
      <head>
        <style type="text/css">
          .box{
             margin:0px;
             background-color:deepskyblue;
             display:flex;
             flex-flow:row wrap;
             justify-content:flex-end;
             list-style:none;
          }
          .box a{
              text-decoration:none;
             display:block;
             color:white;
             padding:1em;
          }
          .box a:hover{
             background-color:#00AEE8;
          }
          @media all and(max-width:800px){
             .box{
                  justify-content:space-around;
             }
          }
          @media all and(max-width:600px){
             .box{
                  flex-flow:column nowrap;
                  padding:0;
             }
             .box a{
                  text-align:center;
                  padding:10px;
                  border-bottom:1px solid rgba(0,0,0,0.1);
             }
             .box li:last-of-type a{
                  border-bottom:0px;
             }
        }
         </style>
      </head>
      <body>
         <ul class="box">
            <li><a href="#">Home</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Connect</a></li>
            <li><a href="#">About</a></li>
          <ul>
      </body>
    </html>

大屏：


800中屏：



600小屏：


最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容