1.html和css實現(xiàn)效果如下：

?

?

?

?當(dāng)我們點擊左側(cè)的買房，賣房的時候，右邊的內(nèi)容也會跟著進(jìn)行變化。這里主要使用的知識點還是定位，通過子絕父相的方式，對左邊的位置信息進(jìn)行調(diào)整，然后將右邊的內(nèi)容寬高同左邊相一致，然后在沒有點擊賣房的時候，通過display：none將他們隱藏起來，但是買房作為顯示的頁面 ，就不需要進(jìn)行隱藏。這里我只寫了前面三個的效果，僅供參考。

html代碼部分：

<!-- 左側(cè)870px --><div class="zuoce"><!-- 主體頁面左側(cè)部分 --><div class="main1-left"><ul class="changp"><li class="shangp mf"><a href="">買 房</a><!-- 買房右側(cè)框 --><div class="first"><!-- 右側(cè)框上部分 --><div class="first-top"><form action=""><input type="text" value="請輸入小區(qū)名稱、地址. . ."></form><a href=""><span class="iconfont icon-fangdajing"></span>二手房</a><a href=""><span class="iconfont icon-fangdajing"></span>新房</a></div><!-- 右側(cè)框下部分 --><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="">濱湖新區(qū)</a><a href="">廬陽</a><a href="">瑤海</a><a href="">經(jīng)開</a><a href="">高新</a><a href="">新站</a><a href="">政務(wù)</a><a href="">肥西</a><a href="">北城新區(qū)</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="">新站區(qū)</a><a href="">瑤海區(qū)</a><a href="">肥東縣</a><a href="">包河區(qū)</a><a href="">濱湖新區(qū)</a><a href="">肥西縣</a><a href="">長豐縣</a><a href="">蜀山區(qū)</a><a href="">高新區(qū)</a><a href="">經(jīng)濟(jì)開發(fā)區(qū)</a><a href="">廬陽區(qū)</a><a href="">巢湖市</a><a href="">廬江縣</a><a href="">合肥周邊</a><a href="">政路區(qū)</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><!-- 買房右拉框結(jié)束 --><li class="shangp maif"> <a href="">賣 房</a><!-- 賣房右拉框開始 --><div class="second"><!-- 賣房右拉框左側(cè)部分 --><div class="second-left"><div class="second-top"><p>賣房服務(wù)優(yōu)勢</p><ul><li>5分鐘匹配到家</li><li>實時獲取買家信息</li><li>安心買保障</li><li>品質(zhì)中介服務(wù)</li></ul></div><div class="second-bottom"><p class="p1">快速買房只需<span>3</span>步</p><p class="p2"><span>1</span>填寫信息<img src="image/左側(cè)main/1.png"alt=""><span>2</span>信息認(rèn)證<img src="image/左側(cè)main/1.png"alt=""><span>3</span>房產(chǎn)展示</p></div></div><!-- 賣房右拉框右側(cè)部分 --><div class="second-right"><div class="second-ma"><img src="image/左側(cè)main/1.jpg" alt=""></div><div class="second-wenzi"><p class="p3">掃碼立即賣房</p><p class="p4">微信掃一掃</p></div></div></div></li><!-- 賣房右拉框結(jié)束 --><li class="shangp zufang"> <a href="">租 房</a><!-- 租房右拉框開始 --><div class="three"><!-- 租房右拉框上部分 --><div class="three-top"><div class="sangong"><form action=""><input type="text" value="請輸入小區(qū)名稱、地址. . ."></form><a href="">二手房</a></div><p><span class="iconfont icon-weibiaoti-3"></span>地圖找房</p></div><!-- 租房右下框部分 --><div class="three-bottom"><div class="three-left"><p>熱門區(qū)域</p><div class="dizhi"><a href="">包河</a><a href="">蜀山</a><a href="">濱湖新區(qū)</a><a href="">廬陽</a><a href="">瑤海</a><a href="">經(jīng)開</a><a href="">高新</a><a href="">新站</a><a href="">政務(wù)</a><a href="">肥西</a><a href="">北城新區(qū)</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="">春暉學(xué)校</a><a href="">國防科技大學(xué)</a><a href="">其他</a><a href="">南熏門橋</a><a href="">力高共和城</a><a href="">大興鎮(zhèn)</a><a href="">安徽農(nóng)業(yè)大學(xué)</a><a href="">蜀西湖</a><a href="">稻香村</a></div></div><div class="three-right"><p>租房預(yù)算</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><!-- 租房右拉框結(jié)束 --><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數(shù)值包含在width和height之內(nèi)，這樣的好處就是修改border和padding數(shù)值盒子的大小不變。 */box-sizing: border-box; }.shangp>a {font-size: 18px;color: #000; }.shangp:hover {background-color: #fff;border-right: none; }/* 買房右側(cè)框內(nèi)容 */ .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;/* 圓角邊框?qū)傩?*/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; }/* 右框上部分結(jié)束 */ /* 右框下部分開始 */ .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; }/* 右框下半部分結(jié)束 */ /* 買房右側(cè)框全部都結(jié)束 *//* 賣房右側(cè)框開始 */ .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; }/* 賣房右拉框左側(cè)部分 */ .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;可以恢復(fù)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; }/* 賣房右拉框右側(cè)部分 */ .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; }/* 賣房右拉框結(jié)束 *//* 租房右拉框開始 */ .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表單部分結(jié)束 */.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; }/* 租房右拉框結(jié)束 */

?

這里的代碼還有很多可以改善的地方，希望大家可以相互學(xué)習(xí)，積極提出更改和優(yōu)化的方法

總結(jié)

以上是生活随笔為你收集整理的安居客头部买房部分书写的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。