本文详细介绍了如何使用CSS和响应式设计技巧创建一个在移动端具有良好视觉效果的焦点图，包括使用`focus`类实现无缝滑动和`focus_sort`进行导航控制。
}
ul {
list-style-type: none;
}
.focus {
position: relative;
/再移动端，如果不设置如下的样式，则其中的元素可以拖动/
overflow: hidden;
}
ul.focus_img {
width: 600%;
margin-left: -100%;
/* 以iphone6 为例 375*5 */
}
.focus_img li {
/* border: 1px solid black; */
float: left;
width: 16.666%;
/37560.2/
}
.focus_img img {
width: 100%;
/37560.2/
}
.focus_sort {
position: absolute;
right: 20px;
bottom: 20px;
border-radius: 5px;
/* border: 1px solid black; */
}
.focus_sort li {
display: inline-block;
width: 20px;
height: 10px;
background-color: #fff;
margin-right: 10px;
cursor: pointer;
}
.focus_sort .current {
background-color: red;
}
扫一扫
1325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
