通過html和css實現(xiàn)的效果如下：

1.樣式分析：

????????可以將上面基本分為兩部分進行書寫，首先是版心的設(shè)置，版心就是你所寫頁面位于居中的位置；然后可以將上面分為左側(cè)和右側(cè)兩個部分進行書寫，左側(cè)紅色方框里面可以使用無序列表進行書寫，讓它們左浮動；右側(cè)的內(nèi)容讓它們右浮動顯示，然后里面的內(nèi)容可以用兩個盒子進行包裹，然后一個左浮動，一個右浮動顯示；因為都具有跳轉(zhuǎn)的效果，所以里面的內(nèi)容都是使用a標簽對文字進行包裹。

?

????????然后是下方的下拉框內(nèi)容，因為該下拉是商鋪寫字樓的下拉列表，所以商鋪寫字樓是它的父親，所以在定位時，可以給下拉列表絕對定位，可以給商鋪寫字樓相對定位，然后根據(jù)需要，調(diào)整下拉列表的位置；上面的小三角可以使用邊跨三角的方法進行書寫，三角的寫法可以借鑒7月18號發(fā)布的三角制作的博客；然后是下拉列表的內(nèi)容，可以在無序列表和自定義列表當中進行選擇。

2.html代碼塊內(nèi)容：

<div id="header"><div class="header-bx"><ul class="header-left"><li class="header-nav shouye"><a href="">首 頁</a></li><li class="header-nav"><a href="">新 房</a><ul class="nav"><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="#">商業(yè)地產(chǎn)</a></li><li><a href="#">海外地產(chǎn)</a></li><li><a href="#">品牌專場</a></li></ul></li><li class="header-nav"><a href="">二手房</a><ul class="nav"><li><a href="#">房源</a></li><li class="nav-hr"><a href="#">小區(qū)</a></li><li><a href="#">地圖找房</a></li><li><a href="#">主題找房</a></li><li><a href="#">找經(jīng)紀人</a></li><li><a href="#">優(yōu)秀經(jīng)紀人榜</a></li><li><a href="#">違規(guī)經(jīng)紀人</a></li><li><a href="#">我要賣房</a></li></ul></li><li class="header-nav"><a href="">租 房</a><ul class="nav"><li><a href="#">區(qū)域找房</a></li><li class="nav-hr"><a href="#">地鐵找房</a></li><li><a href="#">地圖找房</a></li><li><a href="#">小區(qū)</a></li><li><a href="#">民宿短租</a></li><li><a href="#">品牌公寓</a></li></ul></li><li class="header-nav"><a href="">商鋪寫字樓</a><ul class="nav nav-o"><li class="buto"><dl><dt><a href="#">商鋪</a></dt><dd><a href="#">商鋪出租</a></dd><dd><a href="#">商鋪出售 </a></dd><dd><a href="#">商鋪新盤</a></dd></dl></li><li class="buto"><dl><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></li><li class="buto"><dl><dt><a href="#">廠房</a></dt><dd><a href="#">廠房出租</a></dd><dd><a href="#">廠房出售</a></dd><dd><a href="#">廠房轉(zhuǎn)讓</a></dd></dl></li><li class="buto"><dl><dt><a href="#">倉庫</a></dt><dd><a href="#">倉庫出租</a></dd><dd><a href="#">倉庫出售</a></dd><dd><a href="#">倉庫轉(zhuǎn)讓</a></dd></dl></li><li class="buto"><dl><dt><a href="#">土地</a></dt><dd><a href="#">土地出租</a></dd><dd><a href="#">土地出售</a></dd><dd><a href="#">土地轉(zhuǎn)讓</a></dd></dl></li><li class="buto"><dl><dt><a href="#">車位</a></dt><dd><a href="#">車位出租</a></dd><dd><a href="#">車位出售</a></dd><dd><a href="#">車位轉(zhuǎn)讓</a></dd></dl></li></ul></li><li class="header-nav"><a href="">海外地產(chǎn)</a></li><li class="header-nav"><a href="">裝 修</a></li><li class="header-nav"><a href="">樓 訊</a></li><li class="header-nav"><a href="">房產(chǎn)研究院</a></li><li class="header-nav"><a href="">房 價</a></li><li class="header-nav"><a href="">問 答</a></li></ul><div class="header-right"><ul class="zc"><li><a href="#"><span class="iconfont icon-renyuan"></span> 登錄</a></li><li><a href="">注冊</a></li></ul><ul class="xz"><li><a href=""><span class="iconfont icon-shouji"></span> 下載APP</a><div class="xz-one"><img src="image/nav/1.png" alt="二維碼"><div class="jieshi"><span>下載安居客APP</span><p>隨時隨地查看新上房源</p></div></div></li></ul></div></div></div>

?3.css樣式表部分：

注意：1.因為之前引入了css樣式重置表，所以就沒有清除樣式的步驟。

???????????2.里面的偽類選擇器，例如nth-of-type是因為使用的是單類名進行書寫的，可以通過設(shè)置多個類名，這樣調(diào)用類名和書寫css樣式的時候，都可以大大簡化；而且也可以減少對偽類選擇器進行選擇時，所需要主義的事項。

#header {width: 100%;height: 50px;background-color: #63AB05; }.header-bx {width: 1180px;margin: 0px auto; }/* 頭部左側(cè)開始 */ .header-left {width: 920px;float: left; }.header-nav {position: relative;float: left; }/* 三角 */ .header-nav:not(.header-nav:first-child)::after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);margin-top: 15px;width: 0;height: 0;border: 10px solid transparent;border-bottom: 10px solid #fff;display: none; }/* hover選中偽元素選擇器時,直接在hover后面加上::after就可以選擇選中 */ /* .header-nav:nth-of-type(2):hover::after, .header-nav:nth-of-type(3):hover::after, .header-nav:nth-of-type(4):hover::after, .header-nav:nth-of-type(5):hover::after{display: block; } */.header-nav:not(.header-nav:nth-of-type(n+6)):hover::after {display: block; }/* 三角結(jié)束 */.header-nav:hover {background-color: #528e01; }.header-nav>a {line-height: 50px;font-size: 18px;font-weight: 400;color: #fff;padding: 0px 13px;}.shouye {background-color: #528e01; }/* 下拉菜單設(shè)置 */ .header-nav>.nav {border: 1px solid #999;border-top: none;position: absolute;padding: 5px 5px;display: none;background: #F9F9F9;/* 優(yōu)先級提高,優(yōu)先顯示在頁面的上方 */z-index: 1; }.header-nav:hover>.nav {display: block; }.nav-hr {margin-bottom: 5px;border-bottom: 1px solid black; }.header-nav>.nav>li>a {white-space: nowrap;margin-top: 15px;padding: 0 15px 0 10px;font-size: 16px;line-height: 35px; } /* 商鋪寫字樓部分 */.nav-o {width: 600px; }.nav>.buto {width: 100px;float: left; }.nav>.buto>dl {float: left;padding-left: 10px;padding-right: 10px; }.nav>.buto>dl>dt, .nav>.buto>dl>dd {padding: 10px 0; }.nav>.buto>dl>dd {font-size: 14px; }.header-nav>.nav>li>a:hover {color: #528E04; } /* 商鋪寫字樓結(jié)束 */ /* 左側(cè)結(jié)束 *//* 頭部右側(cè)部分 */ .header-right {width: 249px;height: 50px;line-height: 50px;float: right; }.zc {float: left;color: #fff;text-decoration: none;padding: 0px 5px; }.zc>li {float: left;height: 30px;padding-right: 10px;position: relative; }.zc>li>a {float: left;color: #DCE8CC;line-height: 30px;text-align: center;border-radius: 2px;margin-top: 10px; }.xz {float: right; }.xz>li>a {padding: 5px;background-color: #dce8cc; }.xz>li>a>span {color: #62ab02; }.xz>li {position: relative; }.xz>li:hover>.xz-one {display: block; }/* 頭部右側(cè)下拉列表部分 */ .xz-one {width: 410px;height: 200px;margin-top: 20px;left: -100px;background-color: #ffffff;position: absolute;display: none; }.xz-one>img {float: left;width: 160px;margin: 20px; }.jieshi {float: left;margin-top: 50px;margin-left: 10px; }.jieshi>span {font-size: 20px;text-align: center; }.jieshi>p {width: 160px;line-height: 20px;font-size: 20px;color: #979b9e; }

?代碼書寫還存在一些問題，以上代碼僅供參考，感謝您的觀看。

4.具體的顯示效果為：

安居客頭部導(dǎo)航效果

總結(jié)

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

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