Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
	font-size:14px;
	font-family:"microsoft yahei";
}
ul {
	list-style:none;
}
a {
	text-decoration:none;
}
.container {
	background:#f7f8fa;
	height:auto;
	overflow:hidden;
	padding-top:60px;
	padding-bottom:80px;
}
.price {
	width:1200px;
	margin:0 auto;
}
.price h2 {
	font-size:24px;
	color:#333;
	line-height:1;
	font-weight:400;
	padding-bottom:10px;
	padding-left:10px;
}
.price .category {
	width:1180px;
	overflow:hidden;
	position:relative;
	overflow:hidden;
	margin-bottom:20px;
	margin-left:10px;
}
.price .category:after {
	content:"";
	position:absolute;
	width:100%;
	left:0;
	top:0;
	height:1px;
	background-color:#EDEDED;
	z-index:2;
}
.price .category:before {
	content:"";
	position:absolute;
	width:100%;
	left:0;
	bottom:0;
	height:1px;
	background-color:#EDEDED;
	z-index:2;
}
.price .category a:after {
	content:"";
	display:inline-block;
	width:0;
	height:100%;
	vertical-align:middle;
}
.price .category .prev {
	display:none;
	position:absolute;
	top:0;
	width:59px;
	height:100%;
	box-shadow:0 0 3px #c6c6c7;
	background:#fff;
	text-align:center;
	font-size:0;
	left:0;
	border-right:1px solid #e1e3e6;
}
.price .category .prev span {
	display:inline-block;
	vertical-align:middle;
	width:9px;
	height:14px;
	background-repeat:no-repeat;
	background-image:url(../images/arrow.svg);
	background-position:96.77% 25%;
	background-size:initial;
}
.price .category .next span {
	display:inline-block;
	vertical-align:middle;
	width:9px;
	height:14px;
	background-repeat:no-repeat;
	background-image:url(../images/arrow.svg);
	background-position:61.29% 25%;
	background-size:initial;
}
.price .category .next {
	position:absolute;
	top:0;
	width:59px;
	height:100%;
	box-shadow:0 0 3px #c6c6c7;
	background:#fff;
	text-align:center;
	font-size:0;
	right:0;
	border-left:1px solid #e1e3e6;
}
.price .category ul li {
	display:table-cell;
	white-space:nowrap;
	font-size:14px;
	text-align:center;
	border-bottom:3px solid transparent;
	cursor:pointer;
	position:relative;
	padding:18px 25px;
}
.price .category ul li.active {
	border-bottom-color:#00a4ff;
	color:#00a4ff;
}
.price .cont {
	display:none;
}
.price .cont.active {
	display:block;
}
.price .cont ul li {
	width:280px;
	float:left;
	margin:0 10px;
	box-sizing:border-box;
}
.price .cont ul li:nth-child(4n) {
	margin-right:0px!important;
}
.price .cont ul li a {
	display:block;
	border:1px solid #E5E5E5;
	background-color:#fff;
	margin-top:20px;
	padding:13px 20px 15px;
}
.price .cont ul li a:hover {
	box-shadow:0 3px 7px 0 rgba(0,0,0,.1);
	border-color:rgba(229,229,229,.73);
}
.price .cont ul li a:hover .cont_main h3.title {
	color:#00a4ff;
}
.price .cont ul li a .cont_main {
	display:table-cell;
	vertical-align:top;
}
.price .cont ul li a .cont_main h3.title {
	font-size:18px;
	font-weight:400;
	color:#333;
	line-height:32px;
	white-space:nowrap;
	overflow:hidden;
	display:block;
	text-overflow:ellipsis;
}
.price .cont ul li a .cont_main p.desc {
	font-size:14px;
	line-height:1.5;
	color:#666;
	height:42px;
	margin-top:-2px;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.10.2
 立即下载

jq tabs demo

0