清除浮动
.new_main .ul::after
{content: "";display: block;clear: both;}
文本超出隐藏
overflow:hidden;
text-overflow:ellipsis;//结尾用...
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;//文字显示行数
轮播图
$('.slide_pic').slick({
dots: true,
arrows: true,
variableWidth: true,//自定义宽度
//autoplay:true,
slidesToShow: 4,
slidesToScroll: 1,
//adaptiveHeight:true,
lazyLoad: 'progressive',
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 3,//显示几个
slidesToScroll: 1,//每次移动几个
infinite: true,
dots: true
},
},
{
breakpoint: 992,
settings: {
slidesToShow: 2,
slidesToScroll: 1
},
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1
},
}
]
});
分页
//pc
<div class="pagation">
<ul>
<li class="fy"><a href="javascript:;">上一页</a></li>
<li class="on"><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">...</a></li>
<li class="fy"><a href="javascript:;">下一页</a></li>
</ul>
</div>
<div class="paga_ph">
<a href="javascript:;" class="fy">上一页</a>
<span>1/4</span>
<a href="javascript:;" class="fy">下一页</a>
</div>
.pagation{width: 100%;}
.pagation ul{width: 100%;display: flex;align-items: center;justify-content: center;}
.pagation li{float: left;width: calc(20px + 0.25rem);height:calc(20px + 0.25rem);margin: 0 calc(10px + 0.05rem);}
.pagation li a{display: block;width: 100%;font-size: calc(14px + 0.02rem);line-height: calc(20px + 0.25rem);color: #221815;text-align: center;border-radius: 100%;}
.pagation .fy{width: auto; }
.pagation .fy a{padding: 0 calc(10px + 0.16rem);border-radius: calc(20px + 0.25rem);}
.pagation li a:hover{background: #1f980e;color: #fff;}
.pagation .fy a:hover{color: #1f980e;background: none;}
鼠标经过图片缓慢放大
<a href="javascript:">
<div class="_img">
<img src="img/new3.png" alt="">
</div>
</a>
.-img{overflow:hidden;}/*父类设置溢出隐藏*/
img{transition: all .5s ease .1s;transition: All 0.5s ease-in-out;
-webkit-transition: All 0.5s ease-in-out;
-moz-transition: All 0.5s ease-in-out;
-o-transition: All 0.5s ease-in-out;}
a:hover img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1);transform: scale(1.1);}