安居客头部导航栏的编写

通过html和css实现的效果如下：

1.样式分析：

可以将上面基本分为两部分进行书写，首先是版心的设置，版心就是你所写页面位于居中的位置；然后可以将上面分为左侧和右侧两个部分进行书写，左侧红色方框里面可以使用无序列表进行书写，让它们左浮动；右侧的内容让它们右浮动显示，然后里面的内容可以用两个盒子进行包裹，然后一个左浮动，一个右浮动显示；因为都具有跳转的效果，所以里面的内容都是使用a标签对文字进行包裹。

然后是下方的下拉框内容，因为该下拉是商铺写字楼的下拉列表，所以商铺写字楼是它的父亲，所以在定位时，可以给下拉列表绝对定位，可以给商铺写字楼相对定位，然后根据需要，调整下拉列表的位置；上面的小三角可以使用边跨三角的方法进行书写，三角的写法可以借鉴7月18号发布的三角制作的博客；然后是下拉列表的内容，可以在无序列表和自定义列表当中进行选择。

2.html代码块内容：

<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="#">商业地产</a></li><li><a href="#">海外地产</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="#">小区</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></li><li class="header-nav"><a href="">租 房</a><ul class="nav"><li><a href="#">区域找房</a></li><li class="nav-hr"><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></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="#">厂房转让</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></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></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></dl></li></ul></li><li class="header-nav"><a href="">海外地产</a></li><li class="header-nav"><a href="">装 修</a></li><li class="header-nav"><a href="">楼 讯</a></li><li class="header-nav"><a href="">房产研究院</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="data: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是因为使用的是单类名进行书写的，可以通过设置多个类名，这样调用类名和书写css样式的时候，都可以大大简化；而且也可以减少对伪类选择器进行选择时，所需要主义的事项。

#header {width: 100%;height: 50px;background-color: #63AB05;
}.header-bx {width: 1180px;margin: 0px auto;
}/* 头部左侧开始 */
.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;
}/* 三角结束 */.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;
}/* 下拉菜单设置 */
.header-nav>.nav {border: 1px solid #999;border-top: none;position: absolute;padding: 5px 5px;display: none;background: #F9F9F9;/* 优先级提高,优先显示在页面的上方 */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;
}
/* 商铺写字楼结束 */
/* 左侧结束 *//* 头部右侧部分 */
.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;
}/* 头部右侧下拉列表部分 */
.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.具体的显示效果为：

安居客头部导航效果

安居客头部导航栏的编写相关推荐

仿安居客首页导航栏及二级下拉菜单Html+Css+JavaScript
这次仿写的是安居客的首页导航栏,要求实现二级下拉菜单首先,这是原网页的效果接下来是html部分 <div class="box1"><ul id=" ...
Bootstarp：网站导航栏的编写设计
hello,大家好,我是wangzirui32,今天我们来学习Bootstarp的网站导航栏的编写设计,开始学习吧! HTML代码: <!DOCTYPE html> <html la ...
小程序自定义头部导航栏(“navigationStyle“: “custom“)，自定义tabBar
一.自定义顶部导航 1.在某些时候,不想要自带的顶部导航栏,需要自己定义,这时可以将自定义的导航栏做成一个组件,然后做一下初始配置,在每个页面引用,初始化,即可得到一个自定义的顶部导航栏: 2.代码部 ...
（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
演练网站的头部导航栏的制作 1014 HTML
演练网站的头部导航栏的制作 1014 HTML 视频演练菜单按钮的制作 HTML5 2216 - 西瓜视频 https://www.ixigua.com/6883480625635033613/ ...
微信小程序头部导航栏自定义
微信小程序头部导航栏自定义参考网址微信开放文档 navigationStyle导航栏样式:仅支持以下值:default默认样式,custom 自定义导航栏,只保留右上角胶囊按钮配置示例 {&quo ...
头部导航栏和底部图片pic 字体图标设置文字大小
1.头部导航栏和底部用position: fixed;固定在游览器上面,下方的内容需要margin导航栏的距离,防止下方内容遮住了 2.图片pic 图片用pic套起来,需要给pic设置高宽 3.字体 ...
html中关于侧边导航栏和导航栏的编写
侧边导航栏 <style>.box{width: 50px;height: 50px;background-color: #483957;transition: width .5s,bac ...
微信小程序实现原生导航栏和自定义头部导航栏
原生导航栏: 可以在 app.json 的 window 属性中或页面的 JSON 文件中设置 navigationBarTitleText(导航栏标题内容).navigationBarTextSty ...
制作web网页头部导航栏
(1)新建HTML文件.写入代码. <!DOCTYPE html> <html lang="en"><head><meta charset ...

安居客头部导航栏的编写

安居客头部导航栏的编写相关推荐

最新文章

热门文章