安居客头部买房部分书写

1.html和css实现效果如下：

当我们点击左侧的买房，卖房的时候，右边的内容也会跟着进行变化。这里主要使用的知识点还是定位，通过子绝父相的方式，对左边的位置信息进行调整，然后将右边的内容宽高同左边相一致，然后在没有点击卖房的时候，通过display：none将他们隐藏起来，但是买房作为显示的页面，就不需要进行隐藏。这里我只写了前面三个的效果，仅供参考。

html代码部分：

<!-- 左侧870px --><div class="zuoce"><!-- 主体页面左侧部分 --><div class="main1-left"><ul class="changp"><li class="shangp mf"><a href="">买 房</a><!-- 买房右侧框 --><div class="first"><!-- 右侧框上部分 --><div class="first-top"><form action=""><input type="text" value="请输入小区名称、地址. . ."></form><a href=""><span class="iconfont icon-fangdajing"></span>二手房</a><a href=""><span class="iconfont icon-fangdajing"></span>新房</a></div><!-- 右侧框下部分 --><div class="first-bottom"><div class="bottom-left"><p>二手房</p><a href=""><span class="iconfont icon-weibiaoti-3"></span>地图找房</a><div class="dizhi"><a href="">包河</a><a href="">蜀山</a><a href="">滨湖新区</a><a href="">庐阳</a><a href="">瑶海</a><a href="">经开</a><a href="">高新</a><a href="">新站</a><a href="">政务</a><a href="">肥西</a><a href="">北城新区</a><a href="">肥东</a><a href="">巢湖</a><a href="">庐江</a><a href="">长丰</a><a href="">其他</a></div><p><a href="">50万以下</a><a href="">50-60万</a><a href="">60-80万</a><a href="">80-100万</a></p></div><div class="bottom-right"><p>新房</p><a href=""><span class="iconfont icon-weibiaoti-3"></span>地图找房</a><div class="dizhi"><a href="">新站区</a><a href="">瑶海区</a><a href="">肥东县</a><a href="">包河区</a><a href="">滨湖新区</a><a href="">肥西县</a><a href="">长丰县</a><a href="">蜀山区</a><a href="">高新区</a><a href="">经济开发区</a><a href="">庐阳区</a><a href="">巢湖市</a><a href="">庐江县</a><a href="">合肥周边</a><a href="">政路区</a></div><p><a href="">1万以下</a><a href="">1-1.3万</a><a href="">1.3-1.6万</a><a href="">1.6-2万</a></p></div></div></div></li><!-- 买房右拉框结束 --><li class="shangp maif"> <a href="">卖 房</a><!-- 卖房右拉框开始 --><div class="second"><!-- 卖房右拉框左侧部分 --><div class="second-left"><div class="second-top"><p>卖房服务优势</p><ul><li>5分钟匹配到家</li><li>实时获取买家信息</li><li>安心买保障</li><li>品质中介服务</li></ul></div><div class="second-bottom"><p class="p1">快速买房只需<span>3</span>步</p><p class="p2"><span>1</span>填写信息<img src="data:image/左侧main/1.png"alt=""><span>2</span>信息认证<img src="data:image/左侧main/1.png"alt=""><span>3</span>房产展示</p></div></div><!-- 卖房右拉框右侧部分 --><div class="second-right"><div class="second-ma"><img src="data:image/左侧main/1.jpg" alt=""></div><div class="second-wenzi"><p class="p3">扫码立即卖房</p><p class="p4">微信扫一扫</p></div></div></div></li><!-- 卖房右拉框结束 --><li class="shangp zufang"> <a href="">租 房</a><!-- 租房右拉框开始 --><div class="three"><!-- 租房右拉框上部分 --><div class="three-top"><div class="sangong"><form action=""><input type="text" value="请输入小区名称、地址. . ."></form><a href="">二手房</a></div><p><span class="iconfont icon-weibiaoti-3"></span>地图找房</p></div><!-- 租房右下框部分 --><div class="three-bottom"><div class="three-left"><p>热门区域</p><div class="dizhi"><a href="">包河</a><a href="">蜀山</a><a href="">滨湖新区</a><a href="">庐阳</a><a href="">瑶海</a><a href="">经开</a><a href="">高新</a><a href="">新站</a><a href="">政务</a><a href="">肥西</a><a href="">北城新区</a><a href="">肥东</a><a href="">巢湖</a><a href="">庐江</a><a href="">长丰</a><a href="">其他</a></div></div><div class="three-center"><p>热门板块</p><div class="dizhi"><a href="">艾奎利亚</a><a href="">春晖学校</a><a href="">国防科技大学</a><a href="">其他</a><a href="">南熏门桥</a><a href="">力高共和城</a><a href="">大兴镇</a><a href="">安徽农业大学</a><a href="">蜀西湖</a><a href="">稻香村</a></div></div><div class="three-right"><p>租房预算</p><div class="jiage"><a href="">500元以下</a><a href="">500-800元</a><a href="">800-1000元</a><a href="">1000-1500元</a></div></div></div></div></li><!-- 租房右拉框结束 --><li class="shangp"> <a href="">商铺写字楼</a></li><li class="shangp"> <a href="">厂房厂库</a> </li></ul></div>

css样式部分：

.zuoce {width: 870px;float: left;
}.main1-left {margin-top: 10px;width: 139px;height: 291px;border-radius: 5px;float: left;
}.changp {float: left;
}.shangp {width: 139px;height: 58px;line-height: 58px;text-align: center;border: 1px solid #d8d8d8;background-color: #F7F7F7;/* box-sizing: border-box就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变。 */box-sizing: border-box;
}.shangp>a {font-size: 18px;color: #000;
}.shangp:hover {background-color: #fff;border-right: none;
}/* 买房右侧框内容 */
.mf {position: relative;
}.zuoce>.main1-left>.changp>li>div {height: 288px;border: 1px solid #d8d8d8;
}.first {position: absolute;width: 727px;float: right;margin-top: -61px;margin-left: 139px;/* overflow: hidden; *//* display: block; */
}.first-top {width: 668px;height: 61px;line-height: 61px;margin-top: 10px;background-color: #eee;margin: 20px auto;/* 圆角边框属性 */border-radius: 10px;
}.first-top>form {width: 360px;height: 50px;line-height: 51px;display: inline-block;border: 1px solid #cccccc;background-color: #ffffff;border-radius: 5px;font-size: 13px;margin: 5px 10px;float: left;
}.first-top>form>input {width: 320px;height: 40px;border-radius: 10px;
}.first-top>a {display: inline-block;width: 120px;height: 45px;background-color: orange;border-radius: 5px;line-height: 45px;text-align: center;margin: 10px 5px;color: #fff;font-size: 18px;
}.first-top>a:hover {background-color: #CB7617;
}.first-top>a:nth-of-type(2) {background-color: #FB652D;
}.first-top>a:nth-of-type(2):hover {background-color: #C74A06;
}/* 右框上部分结束 */
/* 右框下部分开始 */
.first-bottom {width: 678px;height: 180px;overflow: hidden;
}.bottom-left {width: 310px;height: 162px;float: left;border-right: 1px solid #999;margin-left: 35px;
}.bottom-left>p,
.bottom-right>p {float: left;display: inline-block;font-size: 18px;line-height: 18px;color: #000;margin-top: 10px;padding: 0;
}.bottom-left>a,
.bottom-right>a {line-height: 18px;margin-right: 30px;float: right;margin-top: 10px;color: #2c81cd;
}.bottom-left>a:hover,
.bottom-right>a:hover,
.dizhi>a:hover,
.bottom-left>p:nth-of-type(2)>a:hover,
.bottom-right>p:nth-of-type(2)>a:hover {text-decoration: underline;color: red;
}.dizhi {margin-top: 40px;line-height: 16px;
}.dizhi>a {white-space: nowrap;font-size: 12px;float: left;margin-bottom: 20px;margin-right: 20px;color: #000;
}.dizhi>a:nth-of-type(1),
.dizhi>a:nth-of-type(2),
.dizhi>a:nth-of-type(3) {color: red;
}.bottom-left>p:nth-of-type(2)>a,
.bottom-right>p:nth-of-type(2)>a {font-size: 13px;margin-top: 10px;color: #000;
}.bottom-right {width: 310px;height: 164px;float: right;
}/* 右框下半部分结束 */
/* 买房右侧框全部都结束 *//* 卖房右侧框开始 */
.maif {position: relative;
}.second {position: absolute;display: none;width: 727px;height: 289px;float: right;margin-top: -118px;margin-left: 139px;border: 1px solid #d8d8d8;background-color: #fff;
}.maif:hover>.second {display: block;
}/* 卖房右拉框左侧部分 */
.second-left {font-family: "PingFangSC-Semibold, PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", tahoma, arial, simhei;margin-top: 65px;float: left;margin-left: 54px;width: 360px;/* font-weight: bold; */
}.second-top>p {font-size: 16px;line-height: 16px;font-weight: 700;color: #528d01;float: left;
}.second-top>ul {margin-top: 10px;line-height: 14px;float: left;margin-left: 20px;
}.second-top>ul>li {/* 引入重置样式文件之后,通过list-style: initial;可以恢复li的项目符号 */list-style: initial;float: left;margin-top: 10px;margin-right: 40px;
}.second-top>ul>li:last-child {margin-left: 22px;
}/* 更改li前面项目符号的颜色  通过 ：：marker */
.second-top>ul>li::marker {color: #61ab02;
}.second-bottom>.p1 {font-size: 16px;line-height: 16px;font-weight: 700;color: #528d01;float: left;margin-top: 30px;
}.second-bottom>.p2 {margin-top: 20px;float: left;font-size: 14px;line-height: 14px;
}.second-bottom>.p2>span {display: inline-block;width: 18px;height: 18px;color: #61ab02;background: rgba(97, 171, 2, 0.1);font-family: "Avenir-Black", "Microsoft YaHei", "微软雅黑", "Hiragino Sans GB", tahoma, arial, "simhei";border-radius: 9px;line-height: 18px;font-weight: bold;text-align: center;margin-right: 4px;
}.second-bottom>.p2>img {height: 14px;vertical-align: middle;
}/* 卖房右拉框右侧部分 */
.second-right {width: 173px;float: right;margin-right: 75px;margin-top: 48px;
}.second-ma {height: 146px;background: #ffffff;border: 1px solid transparent;border-radius: 10px 10px 0 0;box-shadow: 0 0 2px black;
}.second-ma>img {width: 113px;margin: 15px 30px;
}.second-wenzi {background-color: #61ab02;height: 67px;border: 1px solid transparent;border-radius: 0 0 10px 10px;
}.p3 {padding-top: 10px;font-size: 16px;line-height: 16px;color: #fff;
}.p4 {font-size: 14px;line-height: 14px;margin-top: 10px;color: #bddc96;
}/* 卖房右拉框结束 *//* 租房右拉框开始 */
.zufang {position: relative;
}.three {position: absolute;display: none;width: 727px;height: 289px;float: right;margin-top: -176px;margin-left: 139px;border: 1px solid #d8d8d8;background-color: #fff;/* background-color: red; */
}.zufang:hover>.three {display: block;
}.three-top {width: 670px;margin: 20px auto;
}.sangong {width: 552px;float: left;background-color: #ececec;border-radius: 10px;
}.sangong>form {width: 360px;height: 51px;line-height: 51px;display: inline-block;border: 1px solid #cccccc;background-color: #ffffff;border-radius: 5px;font-size: 13px;margin: 5px 10px;float: left;
}.sangong>form>input {width: 320px;height: 40px;border-radius: 10px;
}.sangong>a {display: inline-block;width: 120px;height: 45px;background-color: orange;border-radius: 5px;line-height: 45px;text-align: center;margin: 10px 5px;color: #fff;font-size: 18px;
}.sangong>a:hover {background-color: #CB7617;
}.three-top>p {float: left;margin-left: 10px;color: #2c81cd;
}/* form表单部分结束 */.three-bottom {width: 678px;height: 180px;padding-top: 20px;overflow: hidden;
}.three-left {width: 210px;height: 162px;float: left;border-right: 1px solid #999;margin-left: 35px;
}.three-left>p,
.three-center>p,
.three-right>p {float: left;display: inline-block;font-size: 18px;line-height: 18px;color: #000;margin-top: 10px;padding: 0;
}.three-left>a,
.three-center>a,
.three-right>a {line-height: 18px;margin-right: 30px;float: right;margin-top: 10px;color: #2c81cd;
}.three-left>a:hover,
.three-center>a:hover,
.dizhi>a:hover,
.three-left>p:nth-of-type(2)>a:hover,
.three-right>p:nth-of-type(2)>a:hover {text-decoration: underline;color: red;
}.dizhi {margin-top: 40px;line-height: 16px;
}.dizhi>a {white-space: nowrap;font-size: 12px;float: left;margin-bottom: 20px;margin-right: 20px;color: #000;
}.jiage {margin-top: 40px;line-height: 16px;
}.jiage>a {/* float: left; */display: block;white-space: nowrap;font-size: 12px;float: left;margin-bottom: 20px;margin-right: 20px;color: #000;
}.dizhi>a:nth-of-type(1),
.dizhi>a:nth-of-type(2),
.dizhi>a:nth-of-type(3) {color: red;
}.bottom-left>p:nth-of-type(2)>a,
.bottom-right>p:nth-of-type(2)>a {font-size: 13px;margin-top: 10px;color: #000;
}.three-center {width: 222px;height: 164px;float: left;margin-left: 24px;margin-right: 14px;border-right: 1px solid #999;
}.three-right {width: 100px;height: 164px;float: left;
}/* 租房右拉框结束 */

这里的代码还有很多可以改善的地方，希望大家可以相互学习，积极提出更改和优化的方法

安居客头部买房部分书写相关推荐

爬虫爬取安居客二手房和新房信息，你是买新房还是二手的呢？
本文主要讲解爬取安居客买房类别中的二手房和新房,将提取的信息存储在记事本中,也可以转存CSV格式或者MongoDB中. 网站HTML信息提取比较简单,没有什么特别的地方,作为爬虫入门可以让初学者快速了 ...
安居客上市，难挑58大梁？
被58收入麾下六年的安居客,终于重启上市计划了. 据路透社旗下媒体IFR消息,安居客计划今年在香港进行IPO,将募资至少10亿美元. 如今安居客已完成58心愿成为了国内第一找房平台.但值得注意的是,去 ...
python爬取房源数据_python爬取安居客二手房网站数据(实例讲解)
是小打小闹哈哈,现在开始正式进行爬虫书写首先,需要分析一下要爬取的网站的结构:作为一名河南的学生,那就看看郑州的二手房信息吧! 在上面这个页面中,我们可以看到一条条的房源信息,从中我们发现了什么,发 ...
python爬取安居客二手房网站数据（转）
之前没课的时候写过安居客的爬虫,但那也是小打小闹,那这次呢, 还是小打小闹哈哈,现在开始正式进行爬虫书写首先,需要分析一下要爬取的网站的结构: 作为一名河南的学生,那就看看郑州的二手房信息吧! 在 ...
bs4+phantomjs爬取安居客二手房信息
bs4+phantomjs爬取安居客二手房信息这是我的第一篇博客,希望通过养成写博客的习惯来督促自己学习. 开发环境以及需要安装的模块 - Python3.6 - requests pip inst ...
“安居客“住房系统-基于Python-Django前后端分离开发（二）——基于RESTful架构的数据接口配置以及Redis高速缓存
"安居客"住房系统-基于Python-Django前后端分离开发(二) 基于Django-Rest-Framework创建接口数据(二) 文章目录 "安居客"住 ...
python 自动抓取分析房价数据——安居客版
引言中秋回家,顺便想将家里闲置的房子卖出去.第一次卖房,没经验,于是决定委托给中介.中介要我定个价.最近几年,房价是涨了不少,但是长期在外,也不了解行情.真要定个价,心里还没个数.网上零零散散看了下 ...
爬虫系列（1）：极简爬虫——基于requests和re爬取安居客上海二手房价数据
爬虫系列(1):极简爬虫--基于requests和re爬取安居客上海二手房价数据入坑爬虫已经有一年多,一直想好好记录下从各位前辈和大佬处学到的技术,因此开了一个爬虫系列,想借此细致地介绍和演示其中的 ...
[Python爬虫实战2]爬取济南安居客网站上所需街区的二手房平均房价数据
文章目录一.项目简介二.安居客网页分析 1.整体分析 2.细节分析 2.1提取一个页面所有的房源信息 2.2提取每个房源信息中的信息 2.3如何爬取下一页的房源信息三.程序编写 1.数据去重 2 ...
安居客检测到网页抓取_安居客天津租房情况分析
本篇文章通过对安居客官网天津市租房信息的进行抓取,然后对房价信息进行了简单的描述性统计分析. 工具和技术:VBA知识.Power Bi 一.采集数据过程抓取思路: 安居客租房信息网址为简单的静态网页, ...

安居客头部买房部分书写

安居客头部买房部分书写相关推荐

最新文章

热门文章