work summary

清除浮动

.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);}