04仿赶集网--（四）第一列

仿赶集网的初步页面：
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="haha.css"></head><body><!--header start--><!--header end--><!--图标和搜索发帖按钮start--><!--图标和搜索发帖按钮end--><!-- 跳转按钮 --><!--tab end--><!--"content-col""col col-1""category house""f12""clearfix""small-title""small-class""w3 clearfix""loadapp""goapp-ico""category secondhand-car""category new-car""w2 clearfix""w2 clearfix placeholderText""category car-service""category zhaoshang noborder"--><div class="content-col"><!--第一列 start--><div class="col col-1"><!-- 房产 start--><div class="category house"><h3><a href="#">泰安房产</a><a href="#" class="f12">个人房源</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="#" >二手房出售</a><i>|</i><a href="#">小户型</a></div><div class="clearfix"><a href="#" >商铺出租</a><i>|</i><a href="#">商铺出售</a><i>|</i></div><div class="clearfix"><a href="#" >写字楼出租</a><i>|</i><a href="#">写字楼出售</a></div><div class="clearfix"><a href="#" class="small-title">厂房</a><span class="small-class"><a href="#"  >仓库</a><i>|</i><a href="tudi/"  >土地</a><i>|</i><a href="cheku/"  >车位</a></span></div><div class="w3 clearfix"></div></div><!--房产 end--><!--下载app start--><p class="loadapp" rel="nofollow"   data-title='fang' data-text1='下载赶集App' data-text2='找工作上岗快'><i class="goapp-ico"></i>下载赶集找工作APP上岗快</p><!--下载app end--><!--二手车 start--><div class="category secondhand-car"><h3><a href="#">二手车</a><a href="#" class="f12">免费估价</a></h3><div class="w3 clearfix"><a href="#">我要买车</a><a rel="nofollow" href="#">汽车估价</a><a rel="nofollow" href="#">靠谱放心车</a></div><div><a href="#">个人车</a><i>|</i><a href="#">货车</a><i>|</i><a href="#">工程车</a><i>|</i><a href="#">SUV</a><br/><a href="#">练手车</a><i>|</i><a href="#">准新车</a><i>|</i><a href="#">面包车</a><i>|</i><a href="#">MPV</a><br/><a href="#">跑车</a><i>|</i><a href="#">小轿车</a><i>|</i><a href="#">拖拉机</a><i>|</i><a href="#">摩托车</a><br/><a href="#">3万以下</a><i>|</i><a href="#">3-5万</a><i>|</i><a href="#">5-10万</a><i>|</i><a href="#">10万</a><br/><a href="#">大众</a><i>|</i><a href="#">奥迪</a><i>|</i><a href="#">本田</a><i>|</i><a href="#">丰田</a><i>|</i><a href="#">宝马</a><br/><a href="#">奔驰</a><i>|</i><a href="#">宾利</a><i>|</i><a href="#">别克</a><i>|</i><a href="#">标致</a><i>|</i><a href="#">福特</a><br/><a href="#">比亚迪</a><i>|</i><a href="#">讴歌</a><i>|</i><a href="#">日产</a><i>|</i><a href="#">现代</a><i>|</i><a href="#">起亚</a><br/><a href="#">布加迪</a><i>|</i><a href="#">捷豹</a><i>|</i><a href="#">三菱</a><i>|</i><a href="#">铃木</a><i>|</i><a href="#">宝骏</a><br/><a href="#">迈巴赫</a><i>|</i><a href="#">红旗</a><i>|</i><a href="#">长安</a><i>|</i><a href="#">长城</a><i>|</i><a href="#">五菱</a><br/><a href="#">斯巴鲁</a><i>|</i><a href="#">众泰</a><i>|</i><a href="#">奇瑞</a><i>|</i><a href="#">荣威</a><i>|</i><a href="#">金杯</a><br/></div></div><!--二手车 end--><!--新车 start--><div class="category new-car"><h3><a rel="nofollow" href="#">新车</a><a rel="nofollow" href="#" class="f12">品牌选车</a></h3><div class="w2 clearfix"><span><a rel="nofollow" href="#" >CX-5</a>/<a rel="nofollow" href="#"  >大众</a></span><span><a rel="nofollow" href="#"  >阿特兹</a>/<a rel="nofollow" href="#"  >CR-V</a></span><span><a rel="nofollow" href="#"  >天籁</a>/<a rel="nofollow" href="#"  >TIDA</a></span><span><a rel="nofollow" href="#" >斯柯达</a>/<a rel="nofollow" href="#"  >Q5</a></span></div><div class="w2 clearfix placeholderText"><span><a rel="nofollow" href="#"  >本田</a>/<a rel="nofollow" href="#" >哈弗H6</a></span><span><a rel="nofollow" href="#" >途观</a>/<a rel="nofollow" href="#" >丰田</a></span><span><a rel="nofollow" href="#"  >奔驰</a>/<a rel="nofollow" href="#"  >福克斯</a></span><span><a rel="nofollow" href="#"  >宝马</a>/<a rel="nofollow" href="#"  >速腾</a></span><span><a rel="nofollow" href="#"  >奥迪</a>/<a rel="nofollow" href="#" >朗逸</a></span><span><a rel="nofollow" href="#" >别克</a>/<a rel="nofollow" href="#" >宝来</a></span></div></div><!--新车 end--><!--汽车服务 start--><div class="category car-service"><h3><a href="#">汽车服务</a><a rel="nofollow" href="#" class="f12">免费办进京证</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--><!--招商加盟 start--><div class="category zhaoshang noborder"><h3><a href="#">招商加盟</a><a href="#" class="f12">开小店赚大钱</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><br/><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="#"  >礼品</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--></div><!--第一列 end-->

CSS样式层叠表：

<!--第一列-->
.content-col {overflow: hidden;
}.col {height: auto;float: left;overflow: hidden;background: #fff;padding-bottom: 32767px;margin-bottom: -32767px;
}.col .noborder {border: 0;
}.col-4 .category.noborder {padding-bottom: 0;
}.col.col-1,
.col.col-3 {width: 240px;
}.col.col-2 {width: 350px;
}#col-2 {width: 600px;
}.col.col-4 {width: 330px;border-right: 0;
}.col .category {padding: 0 8px 13px 13px;color: #f7f7f7;
}.col .category h3 {position: relative;height: 48px;line-height: 48px;font-size: 16px;border-bottom: 1px solid #f9f9f9;margin-bottom: 7px;
}.col .category h3 a {line-height: 48px;
}.col .category h3 .f12 {margin-left: 8px;font-size: 12px;font-weight: normal;position: absolute;right: 5px;top: 0;line-height: 48px;
}.col .category a {line-height: 30px;
}.col-1 .category a {line-height: 32px;
}.f12 {font-size: 12px;
}.col .category .small-title {float: left;margin-right: 5px;margin-left: 0;
}.col-1 .house .small-title {width: 42px;
}.col-1 .car-service .small-title {width: 32px;
}.col-1 .zhaoshang .small-title,
.col-1 .ticket .small-title {width: 60px;
}.col-1 .house .small-class {width: 172px;
}.col-1 .car-service .small-class {width: 182px;
}.col-1 .zhaoshang .small-class,
.col-1 .ticket .small-class {width: 154px;
}.col-2 .small-title {width: 77px;
}#col-2 .small-title {width: 80px;
}.col-3 .small-title {width: 66px;
}.col-4 .small-title {width: 66px;
}.col-2 .small-class {width: 247px;
}#col-2 .small-class {width: 230px;
}.col-3 .small-class {width: 148px;
}.col-4 .small-class {width: 238px;
}.col .category .small-class {float: left;
}.col .category.ticket i {margin: 0 2px;
}.col .category i {margin: 0 5px;
}.col .category h4 a,
.col .category h4 span {display: block;margin-top: 5px;font-size: 12px;font-weight: normal;color: #999;line-height: 25px;letter-spacing: 0;
}.col .w3,
.col .w2,
.col .w4 {width: 100%;
}.col .w3 a,
.col .w4 a,
.col .w2 a {float: left;margin: 0;padding: 0;
}.col .w2 span,
.col .w3 span,
.col .w4 span {float: left;margin: 0;padding: 0;color: #007ee3;
}.col .w4 a,
.col .w4 span {width: 24.9%;
}

网页截图：

04仿赶集网--（四）第一列相关推荐

安卓仿赶集网竖向滑动引导页动画
安卓仿赶集网竖向滑动引导页动画 csdn下载地址: http://download.csdn.net/detail/zjgwxh/8730139
03仿赶集网——（三）
仿赶集网的初步页面: HTML框架部分: <!DOCTYPE html > <html lang="zh-CN"><head><meta ...
仿赶集网二手物品页面左侧导航
附件中哦没附件 http://pan.baidu.com/s/17s8M4 转载于:https://www.cnblogs.com/heifengwll/p/3468881.html
linux去重文件第一列,科学网—Linux实用命令 - 刘洪波的博文
1.查看系统访问日志(实时) tail --lines=100 -f /var/log/secure 2.按列合并文件 paste file1 file2 >combind.txt 3.按行合并 ...
仿58网，赶集网，百姓网swfupload图片上传效果(asp.net 2.0)
仿58网,赶集网,百姓网swfupload图片上传效果 (ASP.Net 2.0) 演示效果: 下载地址:仿58网,赶集网,百姓网swfupload图片上传效果 (ASP.Net 2.0) 后面会发布 ...
excel两个表格数据对比_EXCEL表格中1列数据分别另外2列数据对比，在第四列输出第一列数据中不重复的数据？...
在EXCEL表格中有三列数据,我使用了三个IF公式才输出了图中第一列分别与第二第三列对比得出唯一不重复的数值. 公式如下: ① 在表格D2输入=IF(COUNTIF(B:B,A1),"&qu ...
卡拉OK歌词原理和实现高仿Android网易云音乐
大家好,我们是爱学啊,继上一篇讲解了[LRC歌词原理和实现高仿Android网易云音乐],今天给大家带来一篇关于卡拉OK歌词原理和在Android上如何实现歌词逐字滚动的效果,本文来自[Android ...
我在赶集网的两个月（数据挖掘、竞情分析、产品、团购、运营、电话销售）
引子: 很好的一个流水帐,很好的一个实习生案例,很好的一个职场现身说法,很好的用数据说话的实战例子,很好的鲶鱼!请仔细阅读,尤其是你们中刚刚踏入职场没几年的年轻人,看看一个大三的北邮学生是怎么震了赶集 ...
推荐阅读：《我在赶集网的两个月（完整版）》
引子: 很好的一个流水帐,很好的一个实习生案例,很好的一个职场现身说法,很好的用数据说话的实战例子,很好的鲶鱼!请仔细阅读,尤其是你们中刚刚踏入职场没几年的年轻人,看看一个大三的北邮学生是怎么震了赶集 ...

04仿赶集网--（四）第一列

04仿赶集网--（四）第一列相关推荐

最新文章

热门文章