01仿赶集网

编程入门行业动态更新时间:2024-10-08 14:39:01

01仿<a href=https://www.elefans.com/category/jswz/34/1765210.html style= 赶集网"/>

01仿赶集网

仿赶集网的初步页面：

导航栏部分：

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！" /><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="/" target="_blank" class="fc_city">泰安</a><a href=".htm" target="_blank">[切换城市]</a></div><div class="weather" rel="nofollow"><div class="weather_t"><img class='w_ico' src="picture/小雨.png" alt="" /><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/jump.php?urls=/">查看一周天气情况 ></a></p><ul><li><p class="w_time">今天(周四)</p><p class="w_border"><img src="picture/小雨_1.png" alt="" /><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" alt="" /><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" alt="" /><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=".php?next=/" >登录</a><i>/</i><a rel="nofollow" target="_self" href=".php?next=/">注册</a></span></div><div class="personCenter"><a rel="nofollow" href="/">个人中心</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="/?ca_name=mobile_home_navb">手机上赶集</a><a class="helpCenter" rel="nofollow" href="/">帮助中心</a><div class="websiteNav"><a class='' 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="v"  >商务服务</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-->

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
}