欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css自適應banner輪播代碼

曾興旺1年前5瀏覽0評論

CSS自適應Banner輪播是現代化網頁設計中非常流行的元素之一。通常,即使在不同的設備上,一個網站的Banner輪播都必須具有相同的效果。這就需要使用CSS來保持Banner輪播的自適應性。

.banner{
width: 100%;
height: auto;
position: relative;
}
.banner img{
width: 100%;
height: auto;
}
.banner .slider{
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
.banner .slider ul{
height: inherit;
width: 400%; /* Set to 100% multiplied by the number of slides */
position: absolute;
top: 0;
left: 0;
z-index: -1;
list-style: none;
overflow: hidden;
}
.banner .slider li{
float: left;
height: inherit;
width: 25%; /* Set to 100% divided by the number of slides */
background-position: center;
background-size: cover;
position: relative;
}
.banner .slider li:before{
content: "";
display: block;
padding-top: 50%;
}
.banner .slider input[type="radio"]{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.banner .slider input[type="radio"] + label{
position: absolute;
top: 50%;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: auto;
text-align: center;
font-size: 20px;
color: #fff;
opacity: 0;
transition: opacity 0.2s ease-out;
transform: translateY(-50%);
}
.banner .slider input[type="radio"]:checked + label{
opacity: 1;
transition-delay: 0.1s;
}
.banner .slider .arrow{
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: block;
width: 30px;
height: 30px;
border: 3px solid #fff;
box-sizing: border-box;
padding: 0;
margin: 0;
cursor: pointer;
transition: transform 0.2s ease-out;
}
.banner .slider .arrow:before{
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 5px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
transform: translate(-50%,-50%) rotate(-45deg);
}
.banner .slider .arrow.next:before{
transform: translate(-50%,-50%) rotate(135deg);
}
.banner .slider .arrow:hover{
transform: scale(1.1) translateY(-50%);
}
.banner .slider .arrow.prev{
left: 0;
}
.banner .slider .arrow.next{
right: 0;
}

以上代碼是一份完整的CSS示例,適用于在網頁上展示Banner輪播圖。這份代碼可以使Banner輪播圖在不同設備的屏幕上自適應。使用該代碼可以讓你的Banner輪播在不同的分辨率和設備上都看起來非常美觀和舒適。