HTML：
<!DOCTYPE html >
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【泰安赶集网】-免费发布信息-泰安分类信息门户</title>
<!--关键字，搜索引擎-->
<meta name="Keywords" content="泰安,泰安分类信息,泰安赶集网" />
<!--网站说明-->
<meta name="Description" content="泰安赶集网，是泰安更专业的分类信息网！免费发布查询房屋租售、求职招聘、二手物品、车辆买卖、生活黄页等泰安实用信息.赶集网-为生活服务 ganji.com！" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="练习.css">
</head>
<body>
<div class="col col-4">
<!--到家生活服务 start-->
<div class='category list-wrap'>
<h3 class="daojia"><a rel="nofollow" href="#">家庭上门服务</a></h3>
<div class='listWrap'>
<div class='list'>
<a class='item' rel="nofollow" href="#"><img src="picture/banjia.png" /><span>搬家</span></a>
<a class='item' rel="nofollow" href="#"><img src="picture/lahuoyundongxi_che_1554901812758.png" /><span>拉货快运</span></a>
<a class='item' rel="nofollow" href="#"><img src="picture/shouji.png" /><span>手机维修</span></a>
<a class='item' rel="nofollow" href="#"><img src="picture/guandao.png" /><span>管道疏通</span></a>
<a class='item' rel="nofollow" href="#"><img src="picture/shuiguan.png" /><span>水管龙头</span></a>
</div>
</div>
</div>
<!--到家生活服务 end-->
<!--本地生活服务 start-->
<div class="category noborder life">
<h3><a href="#">本地生活服务</a></h3>
<div class="clearfix"><a rel="nofollow" href="#" class="small-title">搬家估价</a>
<span class="small-class"><a href="#" >无忧装修</a><i>|</i><a href="#">金牌商家</a></span>
</div>
<div class="clearfix"><a href="#" class="small-title">搬家</a><span class="small-class"><a href="#" >住宅</a><i>|</i><a href="#" >金杯</a><i>|</i><a href="#" >长途</a><i>|</i><a href="#" >办公室</a></span></div>
<div class="clearfix"><a href="#" class="small-title">家政</a><span class="small-class"><a href="#" >保洁</a><i>|</i><a href="#" >保姆</a><i>|</i><a href="#" >月嫂</a><i>|</i><a href="#" >小时工</a></span></div>
<div class="clearfix"><a href="#" class="small-title">物流</a><span class="small-class"><a href="#" >快递</a><i>|</i><a href="#" >国际</a><i>|</i><a href="#" >国内</a><i>|</i><a href="#" >货运</a></span></div>
<div class="clearfix"><a href="#" class="small-title">家电维修</a><span class="small-class"><a href="#" >空调</a><i>|</i><a href="#" >移机</a><i>|</i><a href="#" >冰箱</a><i>|</i><a href="#" >电视</a></span></div>
<div class="clearfix"><a href="#" class="small-title">房屋维修</a><span class="small-class"><a href="#" >门窗</a><i>|</i><a href="#" >卫浴</a><i>|</i><a href="#" >防水补漏</a></span></div>
<div class="clearfix"><a href="#" class="small-title">便民</a><span class="small-class"><a href="#" >开锁</a><i>|</i><a href="#" >干洗</a><i>|</i><a href="#" >修鞋</a><i>|</i><a href="#" >改衣</a></span></div>
<div class="clearfix"><a href="#" class="small-title">风水</a><span class="small-class"><a href="#" >起名</a><i>|</i><a href="#" >测字</a><i>|</i><a href="#" >转运</a><i>|</i><a href="#" >算命</a><i>|</i><a href="#" >殡葬</a></span></div>
</div>
<!--本地生活服务 end-->
<!--装修建材 start-->
<div class="category noborder building">
<h3><a href="#">装修建材</a>
</h3>
<div class="clearfix"><a href="#" class="small-title">装修</a><span class="small-class"><a href="#" >家装</a><i>|</i><a href="#" >工装</a><i>|</i><a href="#" >设计</a><i>|</i><a href="#" >翻新</a></span></div>
<div class="clearfix"><a href="#" class="small-title">建材</a><span class="small-class"><a href="#" >门窗</a><i>|</i><a href="#" >家具</a><i>|</i><a href="#" >窗帘</a><i>|</i><a href="#" >地板</a></span></div>
<div class="clearfix"><a href="#" class="small-title">服务</a><span class="small-class"><a href="#" >装修公司</a><i>|</i><a href="#" >监工</a><i>|</i><a href="#" >效果图</a></span></div>
</div>
<!--装修建材 end-->
<!--婚纱摄影 start-->
<div class="category noborder wedding">
<h3><a href="#">婚庆摄影</a></h3>
<div class="clearfix"><a href="#" class="small-title">婚庆</a><span class="small-class"><a href="#" >策划</a><i>|</i><a href="#" >婚车</a><i>|</i><a href="#" >主持</a><i>|</i><a href="#" >鲜花</a></span></div>
<div class="clearfix"><a href="#" class="small-title">摄影</a><span class="small-class"><a href="#" >婚纱</a><i>|</i><a href="#" >儿童</a><i>|</i><a href="#" >商业</a><i>|</i><a href="#" >摄像</a></span></div>
</div>
<!--婚纱摄影 end-->
<!--旅游休闲 start-->
<div class="category tour">
<h3><a href="#">旅游休闲</a></h3>
<div class="clearfix"><a href="#" class="small-title">旅游</a><span class="small-class"><a href="#" >旅行社</a><i>|</i><a href="#" >自助游</a><i>|</i><a href="#" >郊区游</a><i>|</i><a href="#" >农家乐</a></span></div>
<div class="clearfix"><a href="#" class="small-title">国内旅游</a><span class="small-class"><a href="#" >出国旅游</a><i>|</i><a href="#" >港澳游</a><i>|</i><a href="#" >台湾游</a><i>|</i><a href="#" >度假村</a></span></div>
<div class="clearfix"><a href="#" class="small-title">餐饮美食</a><span class="small-class"><a href="#" >中餐</a><i>|</i><a href="#" >西餐</a><i>|</i><a href="#" >自助餐</a><i>|</i><a href="#" >烧烤</a></span></div>
<div class="clearfix"><a href="#" class="small-title">运动休闲</a><span class="small-class"><a href="#" >瑜伽</a><i>|</i><a href="#" >健身</a><i>|</i><a href="#" >游泳</a><i>|</i><a href="#" >滑雪</a></span></div>
<div class="clearfix"><a href="#" class="small-title">美容美体</a><span class="small-class"><a href="#" >美发</a><i>|</i><a href="#" >瘦脸</a><i>|</i><a href="#" >祛痘</a><i>|</i><a href="#" >隆鼻</a></span></div>
</div>
<!--旅游休闲 end-->
<!--下载app start-->
<p class="loadapp"><i class="goapp-ico"></i>下载赶集APP，找工作上岗快</p>
<!--下载app end-->
<!--商务服务 start-->
<div class="category business">
<h3><a href="#">本地商务服务</a></h3>
<div class="clearfix"><a href="#" class="small-title">担保贷款</a><span class="small-class"><a href="#" >投资理财</a><i>|</i><a href="#" >保险</a><i>|</i><a href="#" >典当融资</a></span></div>
<div class="clearfix"><a href="#" class="small-title">公司注册</a><span class="small-class"><a href="#" >专项审批</a><i>|</i><a href="#" >专利注册</a><i>|</i><a href="#" >企业变更</a></span></div>
<div class="clearfix"><a href="#" class="small-title">网络建站</a><span class="small-class"><a href="#" >网络维护</a><i>|</i><a href="#" >网站优化</a><i>|</i><a href="#" >服务器</a></span></div>
<div class="clearfix"><a href="#" class="small-title">设计策划</a><span class="small-class"><a href="#" >礼仪庆典</a><i>|</i><a href="#" >展览会展</a><i>|</i><a href="#" >喷绘招牌</a></span></div>
<div class="clearfix"><a href="#" class="small-title">律师</a><span class="small-class"><a href="#" >翻译</a><i>|</i><a href="#" >会计</a><i>|</i><a href="#" >app开发</a></span></div>
<div class="clearfix"><a href="#" class="small-title">设备维修</a><span class="small-class"><a href="#" >设备租赁</a><i>|</i><a href="#" >食品批发</a><i>|</i><a href="#" >节日礼品</a></span></div>
<div class="clearfix"><a href="#" class="small-title">印刷</a><span class="small-class"><a href="#" >礼品定制</a><i>|</i><a href="#" >资质认证</a><i>|</i><a href="#" >网站推广</a></span></div>
</div>
<!--商务服务end-->
<!--教育培训 start-->
<div class="category edu noborder">
<h3><a href="#">教育培训</a></h3>
<div class="clearfix"><a href="#" class="small-title">特长爱好</a>
<span class="small-class"><a href="#" >舞蹈</a><i>|</i><a href="#" >乐器</a><i>|</i><a href="#" >书画</a><i>|</i><a href="#" >声乐</a></span>
</div>
<div class="clearfix"><a href="#" class="small-title">职业培训</a>
<span class="small-class"><a href="#" class="" >会计</a><i>|</i><a href="#" >设计</a><i>|</i><a href="#" >技工</a><i>|</i>
<a href="#" >厨师</a>
</span>
</div>
<div class="clearfix"><a href="#" class="small-title">家教</a><span class="small-class"><a href="#" >小学</a><i>|</i><a href="#" >初中</a><i>|</i><a href="#" >高中</a><i>|</i><a href="#" >奥数</a></span></div>
<div class="clearfix"><a href="#" class="small-title">育儿</a><span class="small-class"><a href="#" >托管</a><i>|</i><a href="#" >亲子</a><i>|</i><a href="#" >智力开发</a><i>|</i><a href="#" >学前教育</a></span></div>
<div class="clearfix"><a href="#" class="small-title">留学</a><span class="small-class"><a href="#" >日本</a><i>|</i><a href="#" >美国</a><i>|</i><a href="#" >加拿大</a><i>|</i><a href="#" >新加坡</a></span></div>
<div class="clearfix placeholderText"><a href="#" class="small-title">IT培训</a>
<span class="small-class"><a href="#" >网站设计</a><i>|</i>
<a href="#" >软件开发</a><i>|</i><a href="#" >思科认证</a></span>
</div>
<div class="clearfix placeholderText"><a href="#" class="small-title">高等教育</a>
<span class="small-class"><a href="#" >考研培训</a><i>|</i>
<a href="#" >在职研究生</a><i>|</i><a href="#" >MBA</a></span>
</div>
<div class="clearfix placeholderText"><a href="#" class="small-title">其他课程</a>
<span class="small-class"><a href="#" class="" >股票期货</a><i>|</i>
<a href="#" >拓展培训</a>
</span>
</div>
</div>
<!--教育培训 end-->
</div>
<!--第四列 end-->
</div>
</div>
</body>
</html>
CSS层叠样式：
.col .loadapp {
margin-top: -10px;
padding: 10px 15px;
height: 30px;
line-height: 30px;
cursor: pointer;
background-color: #f8fcf4;
color: #39bc30;
border-bottom: 10px solid #f5f5f5
}
.col .loadapp .goapp-ico {
margin-right: 10px;
float: left;
width: 30px;
height: 30px;
background-position: -210px -183px
}
.col .loadapp:hover {
color: #fff;
background: #39bc30
}
.col .loadapp:hover .goapp-ico {
background-position: -256px -183px
}
.col-4 .list-wrap {
position: relative;
padding: 0;
width: 330px;
height: 156px;
overflow: hidden
}
.col-4 .listWrap {
width: 300px;
margin: 16px 15px;
height: 76px;
overflow: hidden;
*position: relative
}
.nextBtn,
.prevBtn {
display: none;
position: absolute;
right: 0;
width: 14px;
height: 30px
}
.tab-more .nextBtn,
.tab-more .prevBtn {
margin-top: 0;
top: 68px
}
.tab-more:hover .nextBtn,
.tab-more:hover .prevBtn {
display: block
}
.nextBtn {
background-position: -91px -23px
}
.prevBtn {
left: 0;
background-position: -71px -23px
}
.list-wrap .prevBtn,
.list-wrap .nextBtn {
top: 87px
}
.nextBtn:hover {
background-position: -132px -23px
}
.prevBtn:hover {
background-position: -111px -23px
}
.col-4 .list {
width: 360px;
height: 76px;
text-align: center;
left: 0;
position: relative
}
.col-4 .list-wrap .daojia,
.col-4 .daojia-t {
font-size: 16px;
color: #333;
margin: 0 12px;
line-height: 47px;
border-bottom: 1px solid #f7f7f7
}
.col-4 .list .item {
float: left;
width: 60px;
height: 76px;
text-align: center
}
.col-4 .list-wrap .wipePage .wipePage {
width: 6px;
height: 6px
}
.col-4 .list-wrap .wipePage {
position: absolute;
top: 0;
right: 15px;
height: 47px;
line-height: 47px
}
.col-4 .list-wrap .wipePage .pageNum {
margin: 0 3px;
float: left;
width: 8px;
height: 8px;
position: relative;
top: 20px;
background-position: -259px -243px
}
.col-4 .list-wrap .wipePage .pageNum.active {
background-position: -247px -243px
}
.col-4 .list .item a {
float: left;
text-align: center;
margin: 0 5px
}
.col-4 .list .item img {
margin: 0 5px;
width: 50px;
height: 50px;
float: left
}
.col-4 .list .item span {
display: block;
line-height: 30px
}
.gj-bbs {
height: 230px;
font-size: 12px;
color: #333;
line-height: 20px;
text-align: center;
border-top: 10px solid #f5f5f5
}
.gj-bbs a {
color: #666
}
.gj-bbs .tool {
float: left;
margin: 0 15px 13px 15px
}
.gj-bbs ul {
clear: both;
zoom: 1;
overflow: hidden
}
.gj-bbs .gj-render {
width: 420px
}
.gj-bbs .life-helper {
width: 350px;
margin: 0 24px 13px
}
.gj-bbs .aplication-center {
width: 280px
}
.gj-bbs h2 {
margin-bottom: 10px;
text-align: left;
font-size: 16px;
border-bottom: 1px solid #f5f5f5;
line-height: 48px
}
.gj-bbs ul li {
width: 70px;
height: 70px;
display: block;
float: left;
margin: 4px 0
}
.gj-bbs ul li a {
position: relative;
float: left;
width: 70px;
height: 70px;
background: url(images/gjbbs_ico_1x.png) no-repeat;
}
.iconHD .gj-bbs ul li a {
background-image: url(images/gjbbs_ico_hd.png) no-repeat;
background-size: 70px
}
.gj-bbs ul li a:hover {
background-color: #f6f6f6
}
.gj-bbs ul li a:hover span {
text-decoration: underline
}
.gj-bbs ul li .icon_1 {
background-position: 0 8px
}
.gj-bbs ul li .icon_2 {
background-position: 0 -72px
}
.gj-bbs ul li .icon_3 {
background-position: 0 -152px
}
.gj-bbs ul li .icon_4 {
background-position: 0 -232px
}
.gj-bbs ul li .icon_5 {
background-position: 0 -312px
}
.gj-bbs ul li .icon_6 {
background-position: 0 -392px
}
.gj-bbs ul li .icon_7 {
background-position: 0 -1192px
}
.gj-bbs ul li .icon_8 {
background-position: 0 -1272px
}
.gj-bbs ul li .icon_9 {
background-position: 0 -1352px
}
.gj-bbs ul li .icon_10 {
background-position: 0 -1432px
}
.gj-bbs ul li .icon_11 {
background-position: 0 -1512px
}
.gj-bbs ul li .icon_12 {
background-position: 0 -1592px
}
.gj-bbs ul li .icon_13 {
background-position: 0 -472px
}
.gj-bbs ul li .icon_14 {
background-position: 0 -552px
}
.gj-bbs ul li .icon_15 {
background-position: 0 -632px
}
.gj-bbs ul li .icon_16 {
background-position: 0 -712px
}
.gj-bbs ul li .icon_17 {
background-position: 0 -792px
}
.gj-bbs ul li .icon_18 {
background-position: 0 -1672px
}
.gj-bbs ul li .icon_19 {
background-position: 0 -1752px
}
.gj-bbs ul li .icon_20 {
background-position: 0 -1832px
}
.gj-bbs ul li .icon_21 {
background-position: 0 -1912px
}
.gj-bbs ul li .icon_22 {
background-position: 0 -1992px
}
.gj-bbs ul li .icon_23 {
background-position: 0 -872px
}
.gj-bbs ul li .icon_24 {
background-position: 0 -952px
}
.gj-bbs ul li .icon_25 {
background-position: 0 -1032px
}
.gj-bbs ul li .icon_26 {
background-position: 0 -1112px
}
.gj-bbs ul li .icon_27 {
background-position: 0 -2072px
}
.gj-bbs ul li .icon_28 {
background-position: 0 -2152px
}
.gj-bbs ul li .icon_29 {
background-position: 0 -2232px
}
.gj-bbs ul li .icon_30 {
background-position: 0 -2312px
}
.gj-bbs ul li a span {
width: 100%;
display: block;
position: absolute;
bottom: 6px;
line-height: 22px;
left: 0
}
.hot {
color: #fff;
text-align: center
}
.hot.hot-11 {
padding: 0 0 3px;
display: block;
font-size: 10px;
position: absolute;
top: 10px;
left: 48px;
width: 16px;
height: 15px;
line-height: 15px;
background-position: -443px -184px
}
.hot.hot-3 {
padding: 0 0 3px;
font-size: 12px;
position: absolute;
z-index: 2;
top: -13px;
left: 193px;
width: 44px;
height: 19px;
line-height: 19px;
background-position: -369px -184px
}
.s-line1 {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.s-line2 {
height: 36px;
}
网页截图：
扫一扫
13万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
