03仿赶集网——(三)-程序员宅基地

技术标签: #网页实例  css  html  

仿赶集网的初步页面:
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-->
  <!-- 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="zhaopin/" ><span class='dt-t'>工作</span><span class="tabIcon tabIcon-1"></span></a></dt>
                <dd class="dd"><a href="zhaopin/">全职</a><a href="jianzhi/">兼职</a></dd>
            </dl>
            <dl class="tab-category" data-role='tabItem'><dt class="dt"><a href="fang/" ><span class='dt-t'>房产</span><span class="tabIcon tabIcon-2"></span></a></dt>
                <dd class="dd"><a href="zufang/">租房</a><a href="ershoufang/">二手房</a></dd>
            </dl>
            <dl class="tab-category" data-role='tabItem'><dt class="dt"><a href="wu/" ><span class="dt-t">二手物品</span><span class="tabIcon tabIcon-3"></span></a></dt>
                <dd class="dd"><a href="shouji/">手机</a><a href="bijibendiannao/">电脑</a></dd>
            </dl>
            <dl class="tab-category" data-role='tabItem'><dt class="dt"><a href="ershouche/" ><span class="dt-t">二手车</span><span class="tabIcon tabIcon-4"></span></a></dt>
                <dd class="dd"><a href="ershouche/l2/">准新车</a><a href="ershouche/p1/">万元车</a></dd>
            </dl>
            <dl class="tab-category" data-role='tabItem'><dt class="dt"><a href="chongwu/"  ><span class="dt-t">宠物</span><span class="tabIcon tabIcon-5"></span></a></dt>
                <dd class="dd"><a href="mao/"></a><a href="gou/"></a><a href="chongwuyongpin/">用品</a></dd>
            </dl>
            <dl class="tab-category" data-role='tabItem'><dt class="dt"><a href="shangwu/"  ><span class="dt-t">商务服务</span><span class="tabIcon tabIcon-6"></span></a></dt>
                <dd class="dd"><a href="zhucegongsi/">工商</a><a href="danbaobaoxian/">贷款</a></dd>
            </dl>
            <dl class="tab-category" data-role='tabItem'><dt class="dt"><a href="huangye/"  ><span class="dt-t">生活服务</span><span class="tabIcon tabIcon-7"></span></a></dt>
                <dd class="dd"><a href="banjia/">搬家</a><a href="jiazheng/">家政</a></dd>
            </dl>
        </div>
        <!-- 1tab-more 2tab 3iphone_ico 4tab-list-con 5tab-list 6imgleft 7txt 8name 9nextBtn 10prevBtn-->
        <div class="tab-nav tab-nav-r fl">
            <div class="tab-more" data-interval="2000" data-loop-fn="" data-slide-fn="">
                <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>  

CSS样式层叠表:

<!--前面的CSS样式表在01,02中-->

.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
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_53549930/article/details/119707650

智能推荐

如何配置DNS服务的正反向解析_dns反向解析-程序员宅基地

文章浏览阅读3k次,点赞3次,收藏13次。root@server ~]# vim /etc/named.rfc1912.zones #添加如下内容,也可直接更改模板。[root@server ~]# vim /etc/named.conf #打开主配置文件,将如下两处地方修改为。注意:ip地址必须反向书写,这里文件名需要和反向解析数据文件名相同。新建或者拷贝一份进行修改。nslookup命令。_dns反向解析

设置PWM占空比中TIM_SetCompare1,TIM_SetCompare2,TIM_SetCompare3,TIM_SetCompare4分别对应引脚和ADC通道对应引脚-程序员宅基地

文章浏览阅读2.5w次,点赞16次,收藏103次。这个函数TIM_SetCompare1,这个函数有四个,分别是TIM_SetCompare1,TIM_SetCompare2,TIM_SetCompare3,TIM_SetCompare4。位于CH1那一行的GPIO口使用TIM_SetCompare1这个函数,位于CH2那一行的GPIO口使用TIM_SetCompare2这个函数。使用stm32f103的除了tim6和tim7没有PWM..._tim_setcompare1

多线程_进程和线程,并发与并行,线程优先级,守护线程,实现线程的四种方式,线程周期;线程同步,线程中的锁,Lock类,死锁,生产者和消费者案例-程序员宅基地

文章浏览阅读950次,点赞33次,收藏19次。多线程_进程和线程,并发与并行,线程优先级,守护线程,实现线程的四种方式,线程周期;线程同步,线程中的锁,Lock类,死锁,生产者和消费者案例

在 Linux 系统的用户目录下安装 ifort 和 MKL 库并配置_在linux系统的用户目录下安装ifort和mkl库并配置-程序员宅基地

文章浏览阅读2.9k次。ifort 编译器的安装ifort 编译器可以在 intel 官网上下载。打开https://software.intel.com/content/www/us/en/develop/tools/oneapi/components/fortran-compiler.html#gs.7iqrsm点击网页中下方处的 Download, 选择 Intel Fortran Compiler Classic and Intel Fortran Compiler(Beta) 下方对应的版本。我选择的是 l_在linux系统的用户目录下安装ifort和mkl库并配置

使用ftl文件生成图片中图片展示无样式,不显示_ftl格式pdf的样式调整-程序员宅基地

文章浏览阅读689次,点赞7次,收藏8次。些项目时需要一个生成图片的方法,我在网上找到比较方便且适合我去设置一些样式的生成方式之一就是使用Freemarker,在对应位置上先写好一个html格式的ftl文件,在对应位置用${参数名}填写上。还记得当时为了解决图片大小设置不上,搜索了好久资料,不记得是在哪看到的需要在里面使用width与height直接设置,而我当时用style去设置,怎么都不对。找不到,自己测试链接,准备将所有含有中文的图片链接复制一份,在服务器上存储一份不带中文的文件。突然发现就算无中文,有的链接也是打不开的。_ftl格式pdf的样式调整

orin Ubuntu 20.04 配置 Realsense-ROS_opt/ros/noetic/lib/nodelet/nodelet: symbol lookup -程序员宅基地

文章浏览阅读1.5k次,点赞6次,收藏12次。拉取librealsense。_opt/ros/noetic/lib/nodelet/nodelet: symbol lookup error: /home/admin07/reals

随便推点

操作系统精选习题——第四章_系统抖动现象的发生由什么引起的-程序员宅基地

文章浏览阅读3.4k次,点赞3次,收藏29次。一.单选题二.填空题三.判断题一.单选题静态链接是在( )进行的。A、编译某段程序时B、装入某段程序时C、紧凑时D、装入程序之前Pentium处理器(32位)最大可寻址的虚拟存储器地址空间为( )。A、由内存的容量而定B、4GC、2GD、1G分页系统中,主存分配的单位是( )。A、字节B、物理块C、作业D、段在段页式存储管理中,当执行一段程序时,至少访问()次内存。A、1B、2C、3D、4在分段管理中,( )。A、以段为单位分配,每._系统抖动现象的发生由什么引起的

UG NX 12零件工程图基础_ug-nx工程图-程序员宅基地

文章浏览阅读2.4k次。在实际的工作生产中,零件的加工制造一般都需要二维工程图来辅助设计。UG NX 的工程图主要是为了满足二维出图需要。在绘制工程图时,需要先确定所绘制图形要表达的内容,然后根据需要并按照视图的选择原则,绘制工程图的主视图、其他视图以及某些特殊视图,最后标注图形的尺寸、技术说明等信息,即可完成工程图的绘制。1.视图选择原则工程图合理的表达方案要综合运用各种表达方法,清晰完整地表达出零件的结构形状,并便于看图。确定工程图表达方案的一般步骤如下:口分析零件结构形状由于零件的结构形状以及加工位置或工作位置的不._ug-nx工程图

智能制造数字化工厂智慧供应链大数据解决方案(PPT)-程序员宅基地

文章浏览阅读920次,点赞29次,收藏18次。原文《智能制造数字化工厂智慧供应链大数据解决方案》PPT格式主要从智能制造数字化工厂智慧供应链大数据解决方案框架图、销量预测+S&OP大数据解决方案、计划统筹大数据解决方案、订单履约大数据解决方案、库存周转大数据解决方案、采购及供应商管理大数据模块、智慧工厂大数据解决方案、设备管理大数据解决方案、质量管理大数据解决方案、仓储物流与网络优化大数据解决方案、供应链决策分析大数据解决方案进行建设。适用于售前项目汇报、项目规划、领导汇报。

网络编程socket accept函数的理解_当在函数 'main' 中调用 'open_socket_accept'时.line: 8. con-程序员宅基地

文章浏览阅读2w次,点赞38次,收藏102次。在服务器端,socket()返回的套接字用于监听(listen)和接受(accept)客户端的连接请求。这个套接字不能用于与客户端之间发送和接收数据。 accept()接受一个客户端的连接请求,并返回一个新的套接字。所谓“新的”就是说这个套接字与socket()返回的用于监听和接受客户端的连接请求的套接字不是同一个套接字。与本次接受的客户端的通信是通过在这个新的套接字上发送和接收数_当在函数 'main' 中调用 'open_socket_accept'时.line: 8. connection request fa

C#对象销毁_c# 销毁对象及其所有引用-程序员宅基地

文章浏览阅读4.3k次。对象销毁对象销毁的标准语法Close和Stop何时销毁对象销毁对象时清除字段对象销毁的标准语法Framework在销毁对象的逻辑方面遵循一套规则,这些规则并不限用于.NET Framework或C#语言;这些规则的目的是定义一套便于使用的协议。这些协议如下:一旦销毁,对象不可恢复。对象不能被再次激活,调用对象的方法或者属性抛出ObjectDisposedException异常重复地调用对象的Disposal方法会导致错误如果一个可销毁对象x 包含或包装或处理另外一个可销毁对象y,那么x的Disp_c# 销毁对象及其所有引用

笔记-中项/高项学习期间的错题笔记1_大型设备可靠性测试可否拆解为几个部分进行测试-程序员宅基地

文章浏览阅读1.1w次。这是记录,在中项、高项过程中的错题笔记;https://www.zenwu.site/post/2b6d.html1. 信息系统的规划工具在制订计划时,可以利用PERT图和甘特图;访谈时,可以应用各种调查表和调查提纲;在确定各部门、各层管理人员的需求,梳理流程时,可以采用会谈和正式会议的方法。为把企业组织结构与企业过程联系起来,说明每个过程与组织的联系,指出过程决策人,可以采用建立过程/组织(Process/Organization,P/O)矩阵的方法。例如,一个简单的P/O矩阵示例,其中._大型设备可靠性测试可否拆解为几个部分进行测试