了解了58同城的大体构建,建议多用div分块较为方便,从这次历时两天的实战中,我深深的体会到了前端在构建网站时,必须要从大体着手细节,而不是走一步再想下一步,在入手构建之前,我先用画图软件构建出了大体的分块布局,相对位置,从大的分块中再一一实现小的细节分块,这考验了一个网站开发者的清晰思路还有构建能力。
现在只是利用在HTML与CSS的基础知识上进行构建,还没有加入JavaScript的动态效果,我相信再往后的学习JS中,也能够对网站的建立更加熟悉熟练。
我写的大体的类似58的界面,在链接的Style中我觉得我运用的有点麻烦,不简洁,在之后的改进中会做改进,变得简洁而不繁琐重复。
以下是我这不到两天时间的成果截图及其源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My 58同城</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="daohang1">
<ul class="one">
<li>济南</li>
<li><a href="#">[切换城市]</a></li>
<li>晴 35 ~ 26℃ 良</li>
</ul>
<ul class="two">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">个人中心</a></li>
<li><a href="#">商家中心</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#">最近浏览</a></li>
<li><a href="#">网站导航</a></li>
</ul>
</div>
<div id="daoyin">
<div class="A">
<img src="img/1.png"/>
</div>
<div class="B">
<form>
<input type="text" name="搜索" value="搜索关键词" style="border:2px solid rgb(255,85,46);width:550px; height:40px"/>
<input type="button" name="搜索" value="搜索" style="background-color: rgb(255,85,46);width:80px; height:50px"/>
<input type="button" name="免费发布信息" value="免费发布信息" style="background-color: rgb(255,85,46);width:150px; height:50px">
</form>
</div>
<div id="mulu">
<nav>
<ul class="three">
<li><a href="#">首页</a></li>
<li><a href="#">58APP</a></li>
<li><a href="#">商家APP</a></li>
<li><a href="#">58公众号</a></li>
<li><a href="#">小程序</a></li>
<li><a href="#">金融</a></li>
<li><a href="#">安居客</a></li>
<li><a href="#">中华英才</a></li>
<li><a href="#">58车</a></li>
<li><a href="#">58同镇</a></li>
<li><a href="#">我要推广</a></li>
</ul>
</nav>
</div>
</div>
<div id="num1">
<div id="aa">
<ul>
<li><img src="img/2.png" alt="此图片打开错误" /><br><a href="#">招聘</a><br><a href="#"><span>全职 / 兼职 / 简历</span></a></li>
<li><img src="img/3.png" alt="此图片打开错误" /><br><a href="#">房产</a><br><a href="#"><span>租房 / 二手房</span></a></li>
<li><img src="img/4.png" alt="此图片打开错误" /><br><a href="#">二手车</a><br><a href="#"><span>3万内 / SUV / 货车</span></a></li>
<li><img src="img/5.png" alt="此图片打开错误" /><br><a href="#">二手市场</a><br><a href="#"><span>手机 / 设备 / 回收</span></a></li>
<li><img src="img/6.png" alt="此图片打开错误" /><br><a href="#">宠物</a><br><a href="#"><span>狗 / 猫 / 鱼 / 用品</span></a></li>
<li><img src="img/7.png" alt="此图片打开错误" /><br><a href="#">本地商务</a><br><a href="#"><span>工商 / 租赁 / 加盟</span></a></li>
<li><img src="img/8.png" alt="此图片打开错误" /><br><a href="#">本地服务</a><br><a href="#"><span>搬家 / 教育 / 修家电</span></a></li>
</ul>
</div>
<div id="bb">
<ul>
<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">济南本地服务</a></li><br>
<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">快速办证</a></li>
<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">生活家</a></li>
<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">留学排行</a></li>
<br>
<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">家政服务</a></li>
<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">搬家指南</a></li>
<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">大扫除</a></li>
<hr />
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">搬家</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">居民/公司/小型</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">长途/设备</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">保姆</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">月嫂/育儿嫂/钟点工</a></li><br />
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">家务</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">保洁/配送/回收/开锁/鲜花</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">维修</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">家电/房屋/家具/电脑/数码</a></li>
</ul>
<ul>
<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">装修建材</a></li>
<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">除甲醛</a></li>
<hr />
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">家装装修/设计/效果图</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">建材</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">家具/家纺</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">厂房/餐厅/酒店/自建房</a></li>
<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">商务服务</a></li>
<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">注册公司</a></li>
<hr />
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">财务</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">会计</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">法律</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">商标专利</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">广告传媒</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">设计策划</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">印刷包装</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">喷绘/制卡</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">投资担保</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">物流专线</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">快递</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">租赁</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">网站建设</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">网站维护</a></li>
</ul>
<ul>
<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">餐饮美食</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">美食</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">外卖</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">快餐/团膳</a></li>
<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">休闲娱乐 </a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">健身</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">酒吧</a></li>
<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">KTV</a></li>
</ul>
</div>
</div>
<div id="num2">
<div id="cc">
<ul>
<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:rgb(68,173,233);margin: 0px;padding: 0;">跳蚤市场</a></li>
<li><a href="#"><span style="font-size: 12px;color: rgb(68,173,233);margin: 0px;padding: 0;">官方质检iPhone</a></li>
<hr />
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">宠物狗/泰迪/宠物猫</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">摩托车/自行车/电动车</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">二手手机/苹果</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">台式机/配件</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">二手笔记本</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">平板电脑/iPad</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">数码产品/相机</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">二手家电/空调/冰箱</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">服装/鞋帽/箱包</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">母婴/儿童用品/玩具</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">艺术品/收藏品</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">图书/音像/软件</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">文体/户外/乐器</a></li><br>
<li><a href="#"><span style="font-size: 16px;color:red;margin: 0px;padding: 0;">二手设备</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">礼品转让/二手求购</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">其他跳蚤/更多</a></li><br>
</ul>
</div>
<div id="dd">
<ul>
<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">二手车</a></li>
<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">平行进口车</a></li>
<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">0首付购车</a></li>
<hr />
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">0-3万 3-5万</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">5-8万 8-10万</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">10-15万</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">15-20万</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">>20万</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">轿车/跑车SUV/MPV面包车</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">个人好车</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">练手车</a></li>
<li><a href="#"><span style="font-size: 16px;color: red;margin: 0px;padding: 0;">底价新车</a></li><br>
<hr />
<li><a href="#"><span style="font-size: 12px;color: rgb(170,170,170);margin: 0px;padding: 0;">全部品牌</a></li>
<li><a href="#"><span style="font-size: 12px;color: rgb(170,170,170);margin: 0px;padding: 0;">急售</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">大众</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">别克</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">福特</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">标致</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">丰田</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">本田</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">现代</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">日产</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">五菱</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">吉利</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">奇瑞</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">雪佛兰</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">马自达</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">比亚迪</a></li>
<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">新车</a></li>
<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">选车</a></li>
<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">降价</a></li>
<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">底价新车</a></li>
<hr />
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">A6L/CDX</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">哈弗H6/730</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">卡罗拉/福克斯指南者/GL6 </a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">租车</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">货车/大巴/中巴/面包</a></li>
<li><a href="#"><span style="font-size: 16px;color: red;margin: 0px;padding: 0;">买车</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">4S店/过户/美容装饰</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">拼车</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">长途专车/上下班/包车</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">学车</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">驾校/教练/陪练/代驾</a></li>
</ul>
</div>
<div id="ee">
<ul>
<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">济南招聘</a></li>
<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">济南求职简历</a></li>
<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">急速招聘</a></li>
<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">热门兼职</a></li>
<hr id="ihr"/>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">包吃包住</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">夏季招聘会</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">周末双休</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">职位晋升</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">五险一金</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">应届生专区</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">热门兼职</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">求职安全</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">高薪职位</a></li>
<br>
<li><a href="#"><span style="font-size: 12px;color: rgb(170,170,170);margin: 0px;padding: 0;">求职神器</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">求职服务 </a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">应聘快车道</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">职业测评</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">更多服务</a></li>
<br>
<li><a href="#"><span style="font-size: 12px;color: rgb(170,170,170);margin: 0px;padding: 0;">热门职业</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: red;margin: 0px;padding: 0;">销售</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">销售代表/电话销售/网络销售</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">普工/技工</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">普工/操作工/电工/切割/焊工</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">餐饮</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">服务员/餐饮管理/厨师</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">超市/零售</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">营业员/促销/导购/收银员/店长</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">人事/行政</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">文员/前台/人事专员/行政专员</a></li>
<li><a href="#"><span style="font-size: 16px;color: red;margin: 0px;padding: 0;">司机/交通</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">商务司机/货运司机</a></li><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">仓储/物流</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">快递员/仓库管理员/装卸/搬运</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">客服</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">客服专员/电话客服/售前/售后</a></li>
</ul>
</div>
<div id="ff">
<ul>
<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:red;margin: 0px;padding: 0;">便民服务</a></li><br>
<hr id="ahr"/>
<ul id="three">
<li><a href="#">职场取经</a></li>
<li><a href="#">实用工具</a></li>
<li><a href="#">车辆出行</a></li>
<li><a href="#">生活经验</a></li>
<li><a href="#">结婚生子</a></li>
<li><a href="#">旧物回收</a></li>
<li><a href="#">健康生活</a></li>
<li><a href="#">采购批发</a></li>
</ul>
</ul>
</div>
<div id="gg">
<a href="#"><img src="img/13.jpg" alt="此图片打开错误" style="width: 1205px;" /></a>
</div>
<div id="hh">
<a href="#"><img src="img/14.png" alt="此图片打开错误" style="margin-left: 65px;margin-top: 65px;" /></a>
<div id="left">
<ul>
<li><a href="#"><span style="font-size: 25px;color: black;">帮助中心</a></li><br><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">常见问题</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">更多帮助</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">意见反馈</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">隐私权条款</a></li>
</ul>
</div>
<div id="center">
<ul>
<li><a href="#"><span style="font-size: 25px;color: black;">服务支持</a></li><br><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">推广服务</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">渠道招商</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">先行赔付</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">举报平台</a></li>
</ul>
</div>
<div id="right">
<ul>
<li><a href="#"><span style="font-size: 25px;color: black;">会员服务</a></li><br><br>
<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">会员介绍</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">推广热线</a></li>
<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">开通招聘会员</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<hr id="ifooter"/>
<ul>
<li><span style="font-size: 14px;color: rgb(170,170,170);">友情链接:<li>
<li><a href="#"><span style="font-size: 14px;color: rgb(170,170,170);">济南房地产网|</a></li>
<li><a href="#"><span style="font-size: 14px;color: rgb(170,170,170);">青岛装饰网|</a></li>
<li><a href="#"><span style="font-size: 14px;color: rgb(170,170,170);">济南旅游|</a></li>
<li><a href="#"><span style="font-size: 14px;color: rgb(170,170,170);">笔记本维修|</a></li>
<li><a href="#"><span style="font-size: 14px;color: rgb(170,170,170);">深圳旅游攻略|</a></li>
<li><a href="#"><span style="font-size: 14px;color: rgb(170,170,170);">遵义人才网|</a></li>
<li><a href="#"><span style="font-size: 14px;color: rgb(170,170,170);">上海公交|</a></li>
<li><a href="#"><span style="font-size: 14px;color: rgb(170,170,170);">更多...</a></li>
</ul>
<footer>京公网备案信息11010502000809|京ICP证060405|京ICP备10012705号-2|津网文【2016】0811-010号|乙测资字11018014|联系我们|反欺诈联盟<br> </footer>
<footer id="ifo">违法信息举报:4008135858 jubao@58ganji.com|员工舞弊举报:wb@58.com </footer>
</div>
</body>
</html>
body{background-color: rgb(248,248,248);}
#daohang1
{
margin: 0;padding: 0;
}
#daohang1
{
border-bottom:1px solid rgb(221,221,221);height: 30px;background-color: white;
}
a
{
text-decoration: none;color:black;
}
a:hover
{
color:red;
}
.one li
{
display:inline-block;font-size: 16px;color: black;margin-top: 10px;
margin-left: 30px;
}
.two{float: right;margin-top: -40px;}
.two li
{
display:inline-block;font-size: 16px;color: black;
margin-right: 30px;
}
.A
{
background-color: white;width: 200px;height: 22px;
margin-left: 65px;
}
.B
{
margin-left: 420px;margin-top: -22px;
background-color: white;width: 850px;height: 77px;
}
#mulu
{
background-color: white;width: 1205px;height: 20px;
margin-left:65px;margin-top: 0px;
}
nav ul
{
margin: 0;padding: 0;
}
nav ul li
{
display: inline-block;list-style: none;
}
nav ul li a
{
color: black;text-decoration: none;padding: 30px;
}
#aa
{
background-color: white;width: 900px;height: 130px;
margin-left:65px;margin-top: 8px;
position: relative;
}
ul li
{
display: inline-block;list-style: none;font-size: 14.5px;text-align:center;line-height: 25px;
}
ul li a
{
color: black;text-decoration: none;padding: 3px;
}
span
{
color: rgb(68,173,233);
}
span:hover
{
color: red;text-decoration: underline;
}
#bb
{
background-color: white;width: 290px;height: 620px;
position: absolute;right: 70px;top: 160px;
}
#bb ul li
{
display: inline-block;list-style: none;font-size: 14.5px;text-align:left;line-height:28px;
}
hr
{color:gainsboro;width: 215px;text-align: center;}
#cc
{
background-color: white;width: 270px;height: 473px;
margin-left:65px;margin-top: 15px;
}
ul li
{
display: inline-block;list-style: none;font-size: 14.5px;text-align:center;line-height: 25px;
}
ul li a
{
color: black;text-decoration: none;padding: 3px;
}
#dd
{
background-color: white;width: 260px;height: 473px;
margin-left:350px;margin-top: -489px;
}
#ee
{
background-color: white;width: 340px;height: 473px;
margin-left:625px;margin-top: -489px;
}
#ihr
{
color:gainsboro;width: 286px;text-align: center;
}
#ff
{
background-color: white;width: 1205px;height: 120px;
margin-left:65px;margin-top: 0px;
}
#ahr
{
color:gainsboro;width: 1120px;text-align: center;
}
#three
{
color: blue;text-decoration: none;padding: 25px;margin:auto;
}
#three li a:hover
{
background-color: red;color:white;
}
#gg
{
background-color: dodgerblue;width: 1205px;height: 30px;
margin-left:65px;margin-top: 15px;
}
#hh
{
background-color: white;height: 230px;
margin-left:0px;margin-right:0px;margin-top: 35px;
}
#left ul li
{
display: block;
}
#left
{
margin-left:-250px;margin-top: -130px;
}
#center ul li
{
display: block;
}
#center
{
margin-left:250px;margin-top: -180px;
}
#right ul li
{
display: block;
}
#right
{
margin-left:750px;margin-top: -180px;
}
#footer
{
background-color:white ;height: 130px;margin-top:-10px;
}
#ifooter
{
width: auto;
}
footer
{
text-align: center;
}
#ifo
{
text-align: center;
}