前端-赶集网（四）

最新推荐文章于 2022-03-15 22:26:36 发布

Ustinian.'

最新推荐文章于 2022-03-15 22:26:36 发布

阅读量263

点赞数

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/qq_51772871/article/details/119744403

版权

笔记专栏收录该内容

29 篇文章 1 订阅

订阅专栏

第四行第一列部分

代码展示
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>
    <!--header start-->
    <div id="header">
        <div class="header">
            <div class="city"><a href="http://taian.ganji.com/" target="_blank" class="fc_city">泰安</a><a href="http://www.ganji.com/index.htm" target="_blank">[切换城市]</a></div>
            <div class="weather" rel="nofollow">
                <div class="weather_t"><img class='w_ico' src="picture/小雨.png" /><span>小雨</span><span>22 ~ 27℃</span><span>优</span></div>
                <div class="wDay">
                    <p class="wDay_t"><span>今日泰安空气指数：<i>16</i></span><a class='wDay_w' rel="nofollow" href="//www.ganji.com/jump.php?urls=http://tianqi.moji.com/">查看一周天气情况 ></a></p>
                    <ul>
                        <li>
                            <p class="w_time">今天(周四)</p>
                            <p class="w_border"><img src="picture/小雨_1.png"><span class="w_temp">22 ~ 27℃</span><br/>小雨<br/>西北风3-4级<br/>不限行</p>
                        </li>
                        <li>
                            <p class="w_time">明天(周五)</p>
                            <p class="w_border"><img src="picture/晴.png"><span class="w_temp">23 ~ 31℃</span><br/>晴<br/>南风2级<br/>不限行</p>
                        </li>
                        <li>
                            <p class="w_time">后天(周六)</p>
                            <p class="w_border"><img src="picture/小雨_1.png"><span class="w_temp">25 ~ 32℃</span><br/>小雨<br/>南风1级<br/>不限行</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="header_r">
                <div class="userInfo">
                    <div class="reg_login"><span class="reg-login-btn clearfix"><a rel="nofollow"  target="_self" href="https://passport.ganji.com/login.php?next=/" >登录</a><i>/</i><a rel="nofollow" target="_self" href="http://www.ganji.com/user/register.php?next=/">注册</a></span></div>
                    <div class="personCenter"><a rel="nofollow" href="http://www.ganji.com/vip/">个人中心</a><em class="arrow"></em>
                        <dl class="dl">
                            <dd><a target="blank" href="">我的发布</a> </dd>
                            <dd><a target="blank" href="">我的收藏</a></dd>
                            <dd> <a target="blank" href="">我的求职</a> </dd>
                            <dd> <a target="blank" href="">我的招聘</a> </dd>
                            <dd> <a target="blank" href="">账户余额</a> </dd>
                        </dl>
                    </div>
                </div><a class="gjMobile" rel="nofollow" href="http://mobile.ganji.com/?ca_name=mobile_home_navb">手机上赶集</a><a class="helpCenter" rel="nofollow" href="http://www.ganji.com/newhelp/">帮助中心</a>
                <div class="websiteNav"><a href="">网站导航<em class="arrow"></em></a>
                    <div class="webInfo"><span class="hot hot-11">热</span>
                        <dl class="dl w90"><dt><a href="#">房产</a></dt>
                            <dd><a href="#">租房</a></dd>
                            <dd><a href="#">二手房</a></dd>
                            <dd><a href="#">商铺</a></dd>
                            <dd><a href="#">写字楼</a></dd>
                        </dl>
                        <dl class="dl w90"><dt><a href="#" >招聘</a></dt>
                            <dd><a href="#">全职</a></dd>
                            <dd><a href="#">兼职</a></dd>
                            <dd><a href="#">高薪</a></dd>
                            <dd><a href="#">简历库</a></dd>
                        </dl>
                        <dl class="dl w90"><dt><a href="#" >二手物品</a></dt>
                            <dd><a href="#">手机</a></dd>
                            <dd><a href="#">笔记本</a></dd>
                            <dd><a href="#">家具</a></dd>
                            <dd><a href="#">家电</a></dd>
                        </dl>
                        <dl class="dl w90"><dt><a href="#" >车辆买卖</a></dt>
                            <dd><a href="#">二手车</a></dd>
                            <dd><a href="#">新车</a></dd>
                            <dd><a href="#">工程车</a></dd>
                            <dd><a href="#">摩托车</a></dd>
                        </dl>
                        <dl class="dl w90"><dt><a href="#" >宠物</a></dt>
                            <dd><a href="#">宠物狗</a></dd>
                            <dd><a href="#">宠物猫</a></dd>
                            <dd><a href="#">花鸟鱼虫</a></dd>
                            <dd><a href="#">宠物服务</a></dd>
                        </dl>
                        <dl class="dl w90"><dt><a href="#" >票务</a></dt>
                            <dd><a href="#">门票</a></dd>
                            <dd><a href="#">电影票</a></dd>
                            <dd><a href="#">演出票</a></dd>
                        </dl>
                        <dl class="dl w100"><dt><a href="#"  >生活服务</a></dt>
                            <dd><a href="#">保姆</a>|<a href="#">快递</a></dd>
                            <dd><a href="#">月嫂</a>|<a href="#">维修</a></dd>
                            <dd><a href="#">保洁</a>|<a href="#">开锁</a></dd>
                            <dd><a href="#">搬家</a>|<a href="#">装修</a></dd>
                        </dl>
                        <dl class="dl w145"><dt><a href="#"  >商务服务</a></dt>
                            <dd><a href="#">公司注册</a>|<a href="#">投资理财</a></dd>
                            <dd><a href="#">网站建设</a>|<a href="#">网络维护</a></dd>
                            <dd><a href="#">设备租赁</a>|<a href="#">设计策划</a></dd>
                            <dd><a href="#">印刷包装</a>|<a href="#">数码快印</a></dd>
                        </dl>
                        <dl class="dl w90"><dt><a href="#"  >教育培训</a></dt>
                            <dd><a href="#">职业培训</a></dd>
                            <dd><a href="#">外语培训</a></dd>
                            <dd><a href="#">学历培训</a></dd>
                        </dl>
                        <dl class="recommend dl"><dt>精彩推荐</dt>
                            <dd><i class="qr qr_1"></i> 赶集网App</dd>
                            <dd><i class="qr qr_2"></i> 赶集小程序</dd>
                            <dd><i class="qr qr_3"></i> 赶集公众号</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--header end-->
    <!--图标和搜索发帖按钮start-->
    <!-- 1 gjLogo -->
    <div class="search clearfix"><a class="gjLogo" rel="nofollow" href="/" target='_blank'>赶集网</a>
        <a class="gjAdvert" rel="nofollow" href="http://mobile.ganji.com/?ca_name=mobile_home_navb"><img src="picture/gjadvert_20170921.png"></a>
        <div class="search-div fl">
            <div class="s-eara clearfix">
                <form class='clearfix' name="search" method="post"><i class="search-ico"></i><input name="search_keyword" type="text" class="txt_search fl" id="search_keyword" placeholder="搜索房子／工作／二手物品"><input name="search" id="search_button" type="submit" value="搜 索" class="btn-s btn fl" /></form>
                <p class="hot-s-word"><span class="zuji"></span><span class="tuijian"><a href="http://www.ganji.com/zpbiaoqian/p6/?autot=1">高薪工作</a><a href="http://www.ganji.com/ershouche/?autot=1">二手好车</a><a href="http://mobile.ganji.com/"><font color="#FF7200">赶集APP</font></a><a href="http://www.ganji.com/fang5/?autot=1" >特价房源</a><a href="http://www.ganji.com/canyxcjm/?autot=1" >小本创业</a></span></p>
            </div>
        </div>
        <div class="edit-eara fr"><a rel="nofollow" href="#" class="btn-post">免费发布信息</a><a rel="nofollow" href="#" class="btn-del">修改/删除信息</a></div>
    </div>
    <!--图标和搜索发帖按钮end-->
    <!-- 1tab-category 2dt 3dd 4 5 6 7 8 9-->
    <div class="content clearfix">
        <div class="content-tab clearfix">
            <!--tab start-->
            <div class="tab-nav tab-nav-l fl">
                <dl class="tab-category" data-role='tabItem'><dt class="dt"><a href="#" ><span class='dt-t'>工作</span><span class="tabIcon tabIcon-1"></span></a></dt>
                    <dd class="dd"><a href="#">全职</a><a href="#">兼职</a></dd>
                </dl>
                <dl class="tab-category" data-role='tabItem'><dt class="dt"><a href="#" ><span class='dt-t'>房产</span><span class="tabIcon tabIcon-2"></span></a></dt>
                    <dd class="dd"><a href="#">租房</a><a href="#">二手房</a></dd>
                </dl>
                <dl class="tab-category" data-role='tabItem'><dt class="dt"><a href="#" ><span class="dt-t">二手物品</span><span class="tabIcon tabIcon-3"></span></a></dt>
                    <dd class="dd"><a href="#">手机</a><a href="#">电脑</a></dd>
                </dl>
                <dl class="tab-category" data-role='tabItem'><dt class="dt"><a href="#" ><span class="dt-t">二手车</span><span class="tabIcon tabIcon-4"></span></a></dt>
                    <dd class="dd"><a href="#">准新车</a><a href="#">万元车</a></dd>
                </dl>
                <dl class="tab-category" data-role='tabItem'><dt class="dt"><a href="#"  ><span class="dt-t">宠物</span><span class="tabIcon tabIcon-5"></span></a></dt>
                    <dd class="dd"><a href="#">猫</a><a href="#">狗</a><a href="#">用品</a></dd>
                </dl>
                <dl class="tab-category" data-role='tabItem'><dt class="dt"><a href="#"  ><span class="dt-t">商务服务</span><span class="tabIcon tabIcon-6"></span></a></dt>
                    <dd class="dd"><a href="#">工商</a><a href="#">贷款</a></dd>
                </dl>
                <dl class="tab-category" data-role='tabItem'><dt class="dt"><a href="#"  ><span class="dt-t">生活服务</span><span class="tabIcon tabIcon-7"></span></a></dt>
                    <dd class="dd"><a href="#">搬家</a><a href="#">家政</a></dd>
                </dl>
            </div>
            <div class="tab-nav tab-nav-r fl">
                <div class="tab-more" data-interval="2000">
                    <div class="tab">更多精彩尽在赶集App<i class="iphone_ico"></i></div>
                    <div class='tab-list-con'>
                        <!-- 幻灯片容器 -->
                        <ul class='tab-list' data-role="list">
                            <li class='tab-item gongyouquan' data-role="item" data-title='gongyouquan' data-text1='下载赶集App' data-text2='加入职场吐槽交友社区'>
                                <a rel="nofollow"><img class="imgleft" src="picture/quan_ico.png" alt="" />
                                    <div class="txt">
                                        <p class="name"><img src="picture/g_img1.png" alt="" /><span>6739人热议中</span></p>
                                        <p class="title s-line1">不吹不黑3天找到工作，经验分享</p>
                                    </div>
                                </a>
                            </li>
                            <li class='tab-item zixun' data-role="item" data-title='zixun' data-text1='下载赶集App' data-text2='查看更多精彩内容资讯'>
                                <a rel="nofollow"><img class="imgleft" src="picture/zixun_ico.png" alt="" />
                                    <div class="txt">
                                        <p class="name"><img src="picture/g_img2.png" alt="" /><span>5657人热议中</span></p>
                                        <p class="title s-line1">大家都在看，羞羞哒小漫画</p>
                                    </div>
                                </a>
                            </li>
                            <li class='tab-item gongyouquan' data-role="item" data-title='gongyouquan' data-text1='下载赶集App' data-text2='加入职场吐槽交友社区'>
                                <a rel="nofollow"><img class="imgleft" src="picture/quan_ico.png" alt="" />
                                    <div class="txt">
                                        <p class="name"><img src="picture/g_img1.png" alt="" /><span>7655人热议中</span></p>
                                        <p class="title s-line1">不吹不黑3天找到工作，经验分享</p>
                                    </div>
                                </a>
                            </li>
                            <li class='tab-item zixun' data-role="item" data-title='zixun' data-text1='下载赶集App' data-text2='查看更多精彩内容资讯'>
                                <a rel="nofollow"><img class="imgleft" src="picture/zixun_ico.png" alt="" />
                                    <div class="txt">
                                        <p class="name"><img src="picture/g_img2.png" alt="" /><span>5831人热议中</span></p>
                                        <p class="title s-line1">大家都在看，羞羞哒小漫画</p>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- 跳转按钮 -->
                    <a class="nextBtn" data-role="next"></a>
                    <a class="prevBtn" data-role="prev"></a>
                </div>
            </div>
            <!--tab end-->
        </div>

        

        <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

#header {
    background-color: #fff;
    width: 100%;
    height: 33px;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
    z-index: 151;
}

.header {
    position: relative;
    margin: 0 auto;
    width: 1190px;
    height: 33px;
    line-height: 33px;
    color: #666;
    font-size: 12px;
    background-color: #fff;
}

.header a {
    color: #666;
}

.header .city,
.header .weather {
    float: left;
}

.header a.fc_city {
    font-weight: bold;
}

.header a:hover,
.header a.fc_city,
.header .wDay_t .wDay_w {
    color: #ff7200;
}

.header a:hover {
    text-decoration: underline;
}

.header_r {
    float: right;
}

.header_r .userInfo,
.header_r .gjMobile,
.header_r .helpCenter,
.header_r .websiteNav,
.userInfo .reg_login,
.userInfo .personCenter {
    float: left;
    padding: 0 10px;
}

.header .weather,
.header_r .personCenter,
.header_r .websiteNav {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

.weather .wDay,
.header .websiteNav .webInfo,
.personCenter .dl {
    display: none;
    position: absolute;
    top: 34px;
    left: -1px;
    z-index: 100;
    background: #fff;
    border-left: 1px solid #f5f5f5;
    border-right: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5
}

.weather:hover,
.websiteNav:hover,
.personCenter:hover {
    border-bottom: 1px solid #fff;
    border-left: 1px solid #f5f5f5;
    border-right: 1px solid #f5f5f5
}

.weather:hover .wDay,
.websiteNav:hover .webInfo,
.personCenter:hover .dl {
    display: block;
}

.header .weather {
    margin-left: 10px;
    padding: 0 20px 0 10px;
    position: relative;
}

.header .weather_t span {
    float: left;
    padding-left: 10px;
    cursor: pointer;
}

.header .weather .w_ico {
    float: left;
    width: 20px;
    height: 20px;
    position: relative;
    top: 6px;
}

.header .wDay {
    width: 510px;
    height: 220px;
    line-height: 17px;
    padding: 20px 0;
    overflow: hidden;
}

.header .wDay_t {
    padding: 0 10px;
    font-size: 12px;
    color: #999;
    line-height: 17px;
}

.header .wDay_t i {
    font-size: 14px;
    color: #39bc30;
}

.header .wDay_t .wDay_w {
    position: absolute;
    right: 10px;
}

.header .wDay_t .wDay_w:hover {
    text-decoration: underline;
}

.header .w_border {
    padding-top: 10px;
    border-right: 1px solid #f5f5f5;
}

.header .w_noborder {
    border-right: 0;
}

.header .wDay li {
    float: left;
    width: 170px;
    height: 202px;
    text-align: center;
}

.header .wDay .w_time {
    margin-top: 20px;
    ;
}

.header .wDay .w_temp {
    line-height: 31px;
    ;
}

.header .wDay img {
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto;
}

.header .websiteNav .webInfo {
    padding: 20px 15px;
    width: 1160px;
    line-height: 28px;
    font-size: 12px;
    color: #666;
}

.websiteNav .webInfo .dl {
    float: left;
}

.websiteNav .webInfo .dl a {
    margin: 0 8px;
}

.websiteNav .webInfo .dl dt {
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: bold;
}

.websiteNav .webInfo .dl dt a {
    color: #39bc30;
}

.w90 {
    width: 90px;
}

.w100,
.w145 {
    color: #f3f3f3
}

.w100 {
    width: 110px
}

.w145 {
    width: 145px
}

.websiteNav .recommend,
.websiteNav .recommend dd {
    float: left;
    text-align: center;
}

.websiteNav .recommend {
    width: 273px
}

.websiteNav .recommend dd {
    width: 33.3%
}

.websiteNav .qr {
    margin: 0 auto;
    display: block;
    width: 70px;
    height: 70px
}

.websiteNav .qr.qr_1 {
    background: url(images/qr_1.png) no-repeat;
}

.websiteNav .qr.qr_2 {
    background: url(images/qr_2.png) no-repeat;
}

.websiteNav .qr.qr_3 {
    background: url(images/qr_3.png) no-repeat;
}

.arrow {
    position: relative;
    left: 4px;
    display: inline-block;
    width: 11px;
    height: 6px;
    background: url(images/index_ico.png) no-repeat;
    background-position: -323px -111px;
    vertical-align: middle
}

.personCenter {
    position: relative;
    text-align: center;
    width: 66px;
}

.personCenter .dl {
    width: 100%;
    line-height: 28px;
    padding: 0 0 6px;
}

.personCenter .dl dd:hover {
    background-color: #f6f6f6;
}

html,
body {
    line-height: 150%;
    color: #4b4b4b;
    background: #f5f5f5;
    letter-spacing: 0
}

a {
    color: #0481e4
}

a:hover {
    text-decoration: underline
}

html,
body,
input,
textarea,
keygen,
select,
button {
    font: 14px/1.5 "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", arial, Tahoma, SimSun, sans-serif, "PingFang SC Regular"
}

body {
    -webkit-font-smoothing: subpixel-antialiased !important
}

* {
    margin: 0;
    padding: 0
}

img {
    border: 0
}

a {
    text-decoration: none
}

li {
    list-style: none
}

.gjLogo {
    background-image: url(images/index_ico.png);
    background-repeat: no-repeat;
    background-image: url(images/index_ico_hd.png) no-repeat;
    background-size: 560px 362px;
    position: relative;
    top: -2px;
    display: block;
    float: left;
    text-indent: -9999px;
    cursor: pointer;
    width: 135px;
    height: 45px;
    background-position: -24px -76px;
    margin: 0 8px 0 40px;
    *margin: 0 8px 0 20px;
    display: block;
    width: 87px;
    height: 32px;
    background-position: -18px -224px;
    margin: 0 26px 0 0
}

.gjLogo:hover {
    background-position: -210px -14px
}

.gjLogo,
.gjLogo-s,
.search-ico,
.hot,
 {
    background-image: url(images/index_ico.png);
    background-repeat: no-repeat
}



.red,
.btn-del:hover {
    color: #ff7200;
}


.search,
.category,
 {
    background-color: #fff;
}


.search,
.content,
{
    width: 1190px;
    margin: 0 auto
}

.search {
    border-bottom: 10px solid #f5f5f5
}

.gjLogo,
.gjAdvert {
    position: relative;
    top: -2px;
    display: block;
    float: left;
    text-indent: -9999px;
    cursor: pointer
}

.gjLogo {
    width: 135px;
    height: 45px;
    background-position: -24px -76px;
    margin: 0 8px 0 40px;
    *margin: 0 8px 0 20px
}

.gjAdvert {
    width: 150px;
    height: 46px
}

.gjLogo:hover {
    background-position: -210px -14px
}

 

.gjAdvert img {
    display: block;
    width: 130px;
    height: 46px
}

.search {
    padding: 24px 0 7px
}

.txt_search {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    width: 493px;
    height: 36px;
    line-height: 36px;
    vertical-align: middle;
    color: #1b1b1b;
    background: 0;
    background-color: #fff;
    overflow: hidden;
    float: left;
    text-indent: 30px;
    border: 3px solid #39bc30;
    border-right: 0
}

.search-div {
    position: relative;
    z-index: 2;
    zoom: 1;
    *zoom: 1
}

.search .search-div {
    width: 620px
}


.s-eara {
    position: relative
}


* html {
    background-image: url(../images/8c7f6f63fe7c4316aab664680b9fe483.gif);
    background-attachment: fixed
}


.search-ico {
    width: 18px;
    height: 16px;
    position: absolute;
    display: block;
    top: 13px;
    left: 11px;
    background-position: -209px -239px
}

.btn {
    border: 0
}

.btn-s {
    width: 121px;
    height: 42px;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0;
    background: #39bc30;
    cursor: pointer
}

.btn-s:hover {
    background: #4dc245
}

.btn-post,
.btn-del {
    display: block;
    text-align: center;
    letter-spacing: 0;
    margin: 0 40px 0 0
}

.btn-post {
    width: 150px;
    height: 42px;
    line-height: 42px;
    background: #ff7a00;
    font-size: 16px;
    color: #fff
}

.btn-post:hover {
    text-decoration: none;
    background: #ff8726
}

.btn-del {
    line-height: 26px;
    font-size: 12px;
    color: #666
}

.hot-s-word {
    line-height: 26px
}

.hot-s-word a {
    margin-right: 12px;
    font-size: 12px;
    color: #666;
    letter-spacing: 0
}


.tab-category .tabIcon.tabIcon-1 {
    background-position: -35px -44px;
   
}

.tab {
    padding: 11px 0;
    height: 11px;
    position: relative;
    z-index: 1;
    zoom: 1;
    *zoom: 1;
    background: #f8fcf4;
    font-size: 14px;
    color: #39bc30;
    line-height: 14px;
    text-align: center;
    text-indent: -15px;
    border-top: 1px solid #f8fcf4;
    border-left: 1px solid #f8fcf4;
    border-right: 1px solid #f8fcf4
}

.tab-more:hover .tab {
    background: #39bc30;
    color: #fff;
    border-top: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb
}

.tab a {
    width: 120px;
    height: 14px;
    display: block;
    color: #fff;
    border-right: 1px solid #656565
}

.tab-category {
    float: left;
    width: 120px;
    height: 128px;
    text-align: center;
    position: relative
}

.tab-category dd a:hover,
.tab-category dt a:hover {
    text-decoration: none
}

.tab-category .dt {
    height: 86px;
    line-height: 38px;
    font-weight: bold
}

.tab-category .dt a {
    font-size: 16px
}

.tab-category .tabIcon {
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 48px;
    background-image: url(images/tabicon.png) no-repeat;
}

.iconHD .tab-category .tabIcon {
    background-size: 1366px 130px;
    background-image: url(images/tabicon_hd.png) no-repeat;
}

.tab-category .tabIcon.tabIcon-1 {
    background-position: -35px -44px;
}

.tab-category .tabIcon.tabIcon-2 {
    background-position: -235px -44px;
}

.tab-category .tabIcon.tabIcon-3 {
    background-position: -435px -44px
}

.tab-category .tabIcon.tabIcon-4 {
    background-position: -635px -44px;
}

.tab-category .tabIcon.tabIcon-5 {
    background-position: -835px -44px;
}

.tab-category .tabIcon.tabIcon-6 {
    background-position: -1035px -44px;
}

.tab-category .tabIcon.tabIcon-7 {
    background-position: -1235px -44px;
}

.tab-category .dd {
    height: 42px;
    line-height: 42px;
}

.tab-category .dd a {
    padding: 1px 6px;
    margin: 0 3px;
    font-size: 12px;
    background: #eaf4f9;
    border-radius: 35px;
    -moz-border-radius: 35px;
    -ms-border-radius: 35px;
    -o-border-radius: 35px;
    -webkit-border-radius: 35px;
    color: #666;
}

.tab-category:hover .tabIcon {
    background-image: url(images/tabicon_hover.png) no-repeat;
}

.iconHD .tab-category:hover .tabIcon {
    background-size: 1366px 130px;
    background-image: url(images/tabicon_hover_hd.png) no-repeat;
}

.tab-category .dd a:hover {
    background: #39bc30;
    color: #fff;
}

.tab-more {
    width: 330px;
    height: 132px;
}

.tab-more .tab {
    z-index: auto;
}

.tab-more .tab-list {
    width: 990px;
    overflow: hidden;
}

.tab-more .tab-list-con {
    width: 328px;
    height: 97px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}

.tab-more .iphone_ico {
    background: url(images/mobile_ico.gif) no-repeat;
    width: 30px;
    height: 36px;
    float: left;
    position: absolute;
    top: 0
}

.tab-more:hover .iphone_ico {
    background: url(images/mobile_ico_hover.gif) no-repeat;
}

.tab-more .tab-item {
    padding: 25px 16px;
    width: 302px;
    height: 46px;
    float: left;
    cursor: pointer
}

.tab-more .tab-item a:hover {
    text-decoration: none
}

.tab-more .tab-item .imgleft {
    margin: 2px 16px 0 0;
    padding: 0 14px 0 16px;
    width: 42px;
    height: 44px;
    float: left;
    border-right: 1px solid #f5f5f5
}

.tab-more .tab-item .txt {
    float: left;
    width: 190px;
    overflow: hidden;
}

.tab-more .tab-item .name {
    position: relative;
    line-height: 29px;
    font-size: 12px;
}

.tab-more .tab-item .name img {
    float: left;
    height: 29px;
    margin-right: 5px;
}

.tab-more .tab-item .title {
    margin-top: 2px;
    width: 190px;
    color: #161616;
    letter-spacing: 0;
    line-height: 17px;
}

.nextBtn{
    background-image: url(images/index_ico.png);
    background-repeat: no-repeat;
    background-image: url(images/index_ico_hd.png) no-repeat;
    background-size: 560px 362px;
    display: none;
    position: absolute;
    right: 0;
    width: 14px;
    height: 30px;
    margin-top: 0;
    top: 68px;
    display: block;
    background-position: -91px -23px;
    top: 87px;

}

.nextBtn:hover {
    background-position: -132px -23px
}

.prevBtn{
    background-image: url(images/index_ico.png);
    background-repeat: no-repeat;
    background-image: url(images/index_ico_hd.png) no-repeat;
    background-size: 560px 362px;
    display: none;
    position: absolute;
    right: 0;
    width: 14px;
    height: 30px;
    margin-top: 0;
    top: 68px;
    display: block;
    left: 0;
    background-position: -71px -23px;

}

.prevBtn:hover {
    background-position: -111px -23px
}
.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%;
}

赶集网效果图片展示
在这里插入图片描述

在这里插入图片描述

Ustinian.'

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端-赶集网（四）

第四行第一列部分代码展示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"&
复制链接

扫一扫