小知识
1.轮播图写法
1.1 基本结构
一个固定大小的div,很长的ul长条,滑块,每个和div大小一样的图,分界
1.2 左右切图的标志
鼠标移动后显示
<a href="" class="btn_prev iconfont iconicon--"></a>
<a href="" class="btn_next iconfont iconxiangyou"></a>
.idx_banner .btn {
position: absolute;
left: 0;
top: 50%;
margin-top: -35px;
width: 40px;
height: 70px;
}
.idx_banner:hover .btn_prev {
left: 234px;
position: absolute;
top: 45%;
font-size: 43px;
}
.idx_banner:hover .btn_next {
right: 10px;
position: absolute;
top: 45%;
font-size: 43px;
}
1.2 换图的小圆点
鼠标移动后变色
<div class="page">
<a href=""><span>1</span></a>
<a href=""><span>2</span></a>
<a href=""><span>3</span></a>
<a href=""><span>4</span></a>
</div>
banner .page {
position: absolute;
right: 0;
bottom: 30px;
z-index: 100;
width: 100%;
height: 10px;
text-align: right;
padding-right: 35px;
}
.idx_banner .page a {
display: inline-block;
margin: 0 5px;
width: 6px;
height: 6px;
border: 2px solid #fff;
border-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
background-color: #f5f5f5;
background-color: rgba(0, 0, 0, 0.4);
}
.idx_banner .page span {
visibility: hidden;
}
.idx_banner .page a:hover {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.4);
border-color: #757575;
border-color: rgba(0, 0, 0, 0.4);
}
2.绝对定位下的竖直居中
position:absolute;
top:50%;
margin-top:自身高度的一半;
实现效果
代码
HTML
<!-- 轮播导航S -->
<div class="idx_banner container">
<ul class="banner_list">
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6f834e0dcded7308aaedb77b5ee7269c.jpg?w=2452&h=920"
alt=""><a href=""></a></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/84cec825f1cd04ea6554fece8ecbc236.jpg?thumb=1&w=1379&h=518&f=webp&q=90"
alt=""><a href=""></a></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1d59641abe8aeb4fd39469e351cd63c2.jpg?thumb=1&w=1379&h=518&f=webp&q=90"
alt=""><a href=""></a></li>
</ul>
<a href="" class="btn"></a>
<a href="" class="btn_prev iconfont iconicon--"></a>
<a href="" class="btn_next iconfont iconxiangyou"></a>
<div class="page">
<a href=""><span>1</span></a>
<a href=""><span>2</span></a>
<a href=""><span>3</span></a>
<a href=""><span>4</span></a>
</div>
</div>
<!-- 轮播导航E -->
<!-- 菜单和广告位s -->
<div class="idx_menu_adv container">
<div class="menu">
<ul class="menu">
<li class="br bb"><a href=""></a><i class="iconfont iconshouji"></i><span>选购手机</span></li>
<li class="br bb"><a href=""></a><i class="iconfont iconshouji"></i><span>企业团购</span></li>
<li class="bb"><a href=""></a><i class="iconfont iconshouji"></i><span>F码通道</span></li>
<li class="br"><a href=""></a><i class="iconfont iconshouji"></i><span>米粉卡</span></li>
<li class="br"><a href=""></a><i class="iconfont iconshouji"></i><span>以旧换新</span></li>
<li><a href=""></a><i class="iconfont iconshouji"></i><span>话费充值</span></li>
</ul>
</div>
<a href="" class="pic"><img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340"
alt=""></a>
<a href="" class="pic"><img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b746a4db2e0473cc076a3a4b9bbe0235.jpg?w=632&h=340"
alt=""></a>
<a href="" class="pic"><img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
alt=""></a>
</div>
<!-- 菜单和广告位E -->
index.css
/* 首页轮播 */
.idx_banner {
height: 460px;
overflow: hidden;
position: relative;
}
.idx_banner ul {
width: 20000px;
overflow: hidden;
}
.idx_banner li {
width: 1206px;
float: left;
float: left;
position: relative;
}
.idx_banner li img {
/* display: none; */
width: 1206px;
height: 460px;
}
.idx_banner li a {
position: absolute;
width: 978px;
height: 460px;
background-color: rgba(0, 0, 0, 0.2);
top: 0;
right: 0;
}
.idx_banner .btn {
position: absolute;
left: 0;
top: 50%;
margin-top: -35px;
width: 40px;
height: 70px;
}
.idx_banner:hover .btn_prev {
left: 234px;
position: absolute;
top: 45%;
font-size: 43px;
}
.idx_banner:hover .btn_next {
right: 10px;
position: absolute;
top: 45%;
font-size: 43px;
}
.idx_banner .page {
position: absolute;
right: 0;
bottom: 30px;
z-index: 100;
width: 100%;
height: 10px;
text-align: right;
padding-right: 35px;
}
.idx_banner .page a {
display: inline-block;
margin: 0 5px;
width: 6px;
height: 6px;
border: 2px solid #fff;
border-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
background-color: #f5f5f5;
background-color: rgba(0, 0, 0, 0.4);
}
.idx_banner .page span {
visibility: hidden;
}
.idx_banner .page a:hover {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.4);
border-color: #757575;
border-color: rgba(0, 0, 0, 0.4);
}
/* 菜单和广告位 */
.idx_menu_adv {
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}
.idx_menu_adv .menu {
width: 234px;
height: 165px;
background-color: #5f5750;
float: left;
}
.idx_menu_adv .menu li {
width: 71px;
height: 71px;
float: left;
padding-top: 14px;
text-align: center;
color: #c8c5c3;
}
.idx_menu_adv .menu li span {
display: block;
margin-top: 10px;
}
.idx_menu_adv .menu li i {
font-size: 20px;
}
.idx_menu_adv .menu li.bb {
border-bottom: 1px solid #655d56;
}
.idx_menu_adv .menu li.br {
border-right: 1px solid #655d56;
}
.idx_menu_adv .menu li:hover {
color: #fff;
cursor: pointer;
}
.idx_menu_adv .pic {
display: block;
width: 304px;
height: 165px;
margin-left: 20px;
float: left;
}
.idx_menu_adv .pic img {
display: block;
width: 304px;
height: 165px;
}