iT邦幫忙

1

前端工程日記 25日 Flex 並排選單

如圖

附codepen網址:
https://codepen.io/pwbzvqja/pen/GRWNVYB

html

<ul class="menu">
    <li><a href="">首頁</a></li>
    <li><a href="">政治</a></li>
    <li><a href="">論壇</a></li>
    <li><a href="">財經</a></li>
    <li><a href="">娛樂</a></li>
    <li><a href="">運動</a></li>
</ul>

css:

    
    .menu{
    width: 600px;
    margin: 0 auto;
    display:flex;

}
.li{
    background: #000;

}

.menu li{
width: 100px;
text-align: center;
border: 1px solid #0000;
    
}

.menu li a{
    display: block;
    background: #00ffa2;
    padding-top: 10px;
    padding-bottom: 10px;
    text-decoration:none;
    color:#004466;
    }
.menu li a:hover{
    background:#004466;
    color:#00ffa2;
}
     
     ```

尚未有邦友留言

立即登入留言