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

最新推荐文章于 2024-08-14 12:22:11 发布
最新推荐文章于 2024-08-14 12:22:11 发布
阅读量169 收藏
点赞数
分类专栏： #网页实例 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53549930/article/details/119743871
版权

仿赶集网的初步页面：
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%;
}

网页截图：
在这里插入图片描述
在这里插入图片描述

MK—咔咔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Swift-下拉菜单-模拟地址选择
敛柒的博客
01-21 492
建议直接观看原文(下方有链接)，原文有图片演示，本文只是添加了一些注释。 class XXXXXXXXXXXXXXXXX: UIViewController , DropMenuViewDataSource, DropMenuViewDelegate struct DropMenuData { static var TitleDatas = ["出售", "区域", "来源"] ...
ym——android源码大放送（实战开发必备）
陈宇明
08-10 4万+
文件夹 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt │   ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMo
05 仿赶集网--第二列
Woo~
08-23 122
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"> <t
android安卓源码海量项目合集打包-1
热门推荐
chenhao0568的专栏
06-11 13万+
下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar │ │ Android 实现 标签 拖动 改变位置.rar │ │ android 流式布局和热门标签.zip │ │ ...
2023年-暑期旅行的复盘（0701~0820）
weixin_44439675的博客
09-10 1万+
感谢
android安卓源码海量项目合集大全打包6000套-2续
chenhao0568的专栏
06-13 1万+
文章太长，接上一篇。 │ Android应用源码之HTMLViewer.zip │ Android应用源码之http 演示Demo.zip │ Android应用源码之http.zip │ Android应用源码之http1.zip │ Android应用源码之IA...
转--2014年最新810多套android源码2.46GB免费一次性打包下载
weixin_30394669的博客
06-29 467
转载自：http://www.eoeandroid.com/thread-497046-1-1.html 感谢该博客主人无私奉献~~ 下面的源码是从今年3月份开始不断整理源码区和其他网站上的安卓例子源码，目前总共有810套左右，根据实现的功能被博主分成了100多个类，总共接近2.5G，还在不断更新。初学者可以快速方便的找到自己想要的例子，大神也可以看一下别人的方法实现。虽然的例子都是博主一个人...
安卓UI相关开源项目库汇总
丿灬安之若死
02-28 3348
awesome-github-android-ui 是由OpenDigg整理并维护的安卓UI相关开源项目库集合。我们会定期同步OpenDigg上的项目到这里，也欢迎各位提交项目给我们。 如果收录的项目有错误，可以通过issue反馈给我们。这里的项目Star数不是实时更新的，一般是一周更新一次。 内容 抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条Ta
数据分析侠A的成长故事
数据之路
03-09 7万+
数据分析侠A的成长故事面包君 同学A：22岁，男，大四准备实习，计算机专业，迷茫期作为一个很普通的即将迈入职场的他来说，看到周边的同学都找了技术开发的岗位，顿觉自己很迷茫，因为自己不是那么喜欢钻研写代码，而自己又没太多的经验。那年他实习，选择了一家国内一线梯队的电商公司，HR问道想选择什么岗位，而他本人自己也比较困惑，说对数据感兴趣。而恰好那年公司打算成立一个数据部门，就把同学A分配到了市场部的数
高仿赶集网58同城模板-二次开发程序更新 v3.2.zip
07-07
仿赶集网地方分类信息整站核心是QB cms 是赶集网58同城模板，是多城市的，作为一个地方分类信息网还是比较好的还有想做分类信息的比较不错了。   仿赶集网58地方分类信息整站安装方式： 1：下载安装包后，解压...
高仿赶集网58同城源码 v3.2
04-03
高仿赶集网58同城源码 v3.2，该源码主要是模仿了赶集网地方分类信息整站核心是QB cms 是赶集网58同城模板，是多城市的，作为一个地方分类信息网还是比较好的还有想做分类信息的比较不错了。 仿赶集网58地方分类信息...
PHP仿赶集网源码
11-13
【PHP仿赶集网源码】是一个基于PHP编程语言开发的分类信息网站程序，它旨在模仿和实现赶集网的功能和界面，为用户提供一个类似的服务平台。赶集网作为一个知名的在线分类广告网站，包含了租房、求职、二手交易、车辆...
PHP实例开发源码-php高仿赶集网58同城源码.zip
11-21
本文将深入探讨一份PHP实例开发源码，即php高仿赶集网58同城源码，旨在帮助读者理解其设计思路，提升PHP编程技能。 一、源码结构与功能模块 赶集网和58同城是知名的分类信息网站，它们提供了包括租房、求职、二手...
电子商务案例分析-赶集网(与“信息”有关的文档共40张).pptx
11-14
电子商务案例分析-赶集网(与“信息”有关的文档共40张).pptx
css实现水滴效果图
yinge0508的博客
08-12 1150
【代码】css实现水滴效果图。
CSS 基础
jht_520的博客
08-10 335
比如，增加内边距可以使元素内部的内容与边框之间有更多的空间，而调整外边距可以控制元素与周围元素的距离。通过使用媒体查询，我们可以针对不同的屏幕宽度设置不同的 CSS 规则。例如，在小屏幕设备上，可以隐藏一些不必要的元素，或者改变导航栏的样式，以提供更好的用户体验。它可以决定网页中文字的字体、大小、颜色，还能设置元素的背景颜色、边框样式等。比如，通过 CSS 我们可以将网页的标题设置为醒目的大字号、独特的字体和鲜艳的颜色，使其更加吸引用户的注意力。CSS，即层叠样式表，是网页设计中不可或缺的一部分。
【playwright篇】CSS 选择器 详细用法
最新发布
qadnkz的专栏
08-14 840
在 Playwright 中，CSS 选择器是非常重要的，因为它们用于定位页面上的元素。CSS 选择器允许您通过 HTML 元素的属性、类名、ID 等来定位元素。以下是 CSS 选择器的一些基本用法和示例。
CSS（层叠样式表）
Chujun123528的博客
08-09 1243
CSS全称为Cascading Style Sheets（层叠样式表），是一种用于描述网页样式的语言。它可以将HTML文档中的内容与样式分离，使得网页的结构和呈现分离，提高了页面的可维护性和可重用性。CSS允许开发者对HTML元素进行各种视觉方面的样式控制，包括文字和字体属性、颜色和背景、布局和定位等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值