主題推薦(P3)

主題推薦(P3)

結果

一、Html結構及CSS樣式

<div class="AD">
   <div class="on"><a href="#"><img src="../images/themeMovie/movie01.jpg" width="1000" height="500" alt=""/></a></div>
    <div><a href="#"><img src="../images/themeMovie/movie02.jpg" width="1000" height="500" alt=""/></a></div>
    <div><a href="#"><img src="../images/themeMovie/movie03.jpg" width="1000" height="500" alt=""/></a></div>
    <div><a href="#"><img src="../images/themeMovie/movie04.jpg" width="1000" height="500" alt=""/></a></div>
    <ul class="title">
        <li class="on"><p data-en="Minions">小小兵</p><span>歡樂可愛,處處有梗!</span></li>
        <li><p data-en="The Incredibles">超人特攻隊</p><span>「超能先生」跟「彈力女超人」行俠仗義拯救世界。
        </span></li>
        <li><p data-en="Up">天外奇蹟</p><span>放下過去才能勇敢追夢。</span></li>
        <li><p data-en="Toy Story">玩具總動員</p><span>劇情緊湊毫無冷場,可以笑到流眼淚,也留下令人鼻酸感動熱淚</span></li>
    </ul>
</div>
.AD{position:relative;
	width:70%; margin:0 auto;
}
.AD div {display: none;}
.AD .on {display: block;}
.AD .title {
	border-top: 2px solid #f6c; width:100%;
	position:absolute; left:0; bottom:0;
	display:flex;
}
.AD .title li {
	cursor: pointer; width: calc(100% /4); padding: 5px; box-sizing:border-box;
	background-color: #3e3e3e;
	border-right: 1px solid #000;
	height: 100px; flex:1; transition:all .5s; position:relative;
}
.AD .title li.on{
	background-color: #f6c;
	border-right: 1px solid #f6c; flex:2;
}
.AD .title li p {
	font-size: 1em;
	color: #c90;
	padding-bottom: 6px;
}
.AD .title li span{
	font-size: .8em;
	color: #ccc; display:none;
}
.AD .title li.on p, .AD .title li.on span{
	color: #fff; display:block;
}
.AD .title li p:after{
	content:attr(data-en); display:block;
}
.AD .title li.hover:before{
	content:""; width:100px; height:50px; /*background:url(images/themeMovie/movie03.jpg);*/
	position:absolute; top:0px; left:0; background-size:contain;
}
.AD .title li.hover p, .AD .title li.hover span{
	color: #fff; display:block;
}
 .AD .title li.hover:not(.on) span{ font-size:.6em;}

說明:

下方選單如何分佈按鈕選單

/*方法一*/
.AD .title { /*無*/  }
.AD .title li {
	width: calc(100%/4 - 11px);	/*11px扣除padding及border-left寬度*/ 
	padding: 5px;
	border-right: 1px solid #000;
}

/*方法二*/
.AD .title { /*無*/  }
.AD .title li {
	width: calc(100%/4);
	padding: 5px;
	border-right: 1px solid #000;
	box-sizing:border-box;
}

/*方法三*/
.AD .title {display:flex;}
.AD .title li {
	flex:1;
	padding: 5px;
	border-right: 1px solid #000;
}