範例2-2:Travel

二、運用【Flex】特性,【#navMain】設定

Html設定

    <h1>巴黎遊覽</h1>
    <div id="navMain">
        <a href="#item1">羅浮宮博物館</a>
        <a href="#item2">凡爾賽宮</a>
        <a href="#item3">香榭麗舍大道</a>
        <a href="#item4">旅遊小叮嚀</a>
    </div>

CSS美化

/*section  第1個 #navMain設定*/
#navMain {
    column-span: all;
	width: 70%; margin: 20px auto;
    
    display: flex;
}
#navMain a{
    background: #ffecb3; font-size: 20px; color: #bf360c;
    text-align: center; height: 50px; line-height: 50px;
    border-top: 2px solid #ff6f00;border-right: 2px solid #ff6f00;
    border-bottom: 2px solid #ff6f00;
    
    flex: 1;
    
    transition: all .5s;
    position:relative;
}
#navMain a:hover{ 
    flex: 2; 
    background: #ff6f00; color:#ffecb3; font-weight: bold;
    text-shadow: 1px 1px 3px #000; 
}
#navMain a:nth-child(1){
    border-left:2px solid #ff6f00;
    border-radius: 10px 0 0 10px;
}
#navMain a:nth-child(4){
    border-radius:0 10px 10px 0;
}

#navMain a:hover:before{
    content: ""; height: 80px; width: 40px;
    background: url(../images/icon.png) no-repeat; background-size: cover;
    
    position: absolute; top: -15px; left: 20px;
    transform: rotate(15deg);
}