電影排行榜css樣式

/*整個排行榜區(qū)域*/
.movie-list{
width: 800px;
height: auto;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
}
/*每個電影條目*/
.movie-item{
width: 100%;
height: auto;
margin-bottom: 20px;
display: flex;
align-items: center;
}
/*排名*/
.rank{
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 24px;
font-weight: bold;
color: #fff;
background-color: #f8bbd0;
border-radius: 50%;
}
/*海報*/
.poster{
width: 200px;
height: 280px;
margin-left: 20px;
margin-right: 20px;
border-radius: 10px;
overflow: hidden;
}
/*電影信息*/
.info{
flex-grow: 1;
}
.title{
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.rating{
font-size: 16px;
color: #f8bbd0;
}
.director, .actors{
font-size: 14px;
color: #666;
}
.plot{
font-size: 14px;
color: #666;
text-indent: 28px;
line-height: 24px;
}
.btn{
margin-top: 10px;
padding: 8px 16px;
color: #fff;
background-color: #f8bbd0;
border-radius: 30px;
text-align: center;
}
.btn:hover{
background-color: #e91e63;
}
/*hover效果*/
.movie-item:hover .poster{
transform: scale(1.1);
}
.movie-item:hover{
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
/*排行榜標(biāo)題*/
.list-title{
font-size: 28px;
font-weight: bold;
text-align: center;
margin-bottom: 40px;
}
.list-title span{
color: #f8bbd0;
}