安居客头部导航栏的编写

最新推荐文章于 2024-09-13 23:32:49 发布
最新推荐文章于 2024-09-13 23:32:49 发布
阅读量244 收藏 1
点赞数
文章标签： 前端 html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72313625/article/details/125869767
版权

通过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="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.具体的显示效果为：

安居客头部导航效果

夜夜夜璟归
关注
前端代码分享——常用的手机端底部导航栏（内含源码）
Why_does_it_work的博客
07-14 2909
【代码】前端代码分享——常用的手机端底部导航栏。
css3基础100问之header部分nav导航栏(li+a)方法怎样准确实现呢?(28）
weixin_45147894的博客
06-16 2491
做成第三部分样式该如何做呢？是个重点呢？ 主体html代码如下：用li加a的方法来做啊。 效果如下，前面有小点怎末办呢？ 除去li的样式就行了 现在就没有了小点 可是nav区域不在header区域一行内啊！ 当然需要浮动了！加入浮动哟！ 还是没有解决？偶偶，原来第一个logo没有浮动啊！ 给logo加上浮动，因为一浮全浮啊，兄弟元素必须都浮动才能起作用呀！ 现在可以了，在一行了！可是离logo区域太近了，怎末解决呢？ 量...
固定头部导航栏案例
One By One
11-26 2373
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0...
实战经验（1）——头部导航栏制作技巧
weixin_45604020的博客
07-03 5441
一般网页logo不只是一个图片那么简单，它可以给用户提供网页跳转到首页的功能，更重要的是搜索引擎优化让百度搜索名更靠前。搜索框是一个供用户输入的表单框，需要用到input标签，至于搜索按钮就是一个背景图可用a标签或button标签制作。用户头像包含图片和文字，点击头像或文字都可以跳转到相应页面。导航栏其实就是几个超链接，目的就是为了跳转页面。
web网页如何实现响应式导航栏--移动端导航栏
qq_26780317的博客
02-20 3824
web网页如何实现响应式导航栏--移动端导航栏
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
10-16
在微信小程序开发中，有时我们需要对默认的头部导航栏进行自定义，以满足特定的设计需求。本篇文章将详细介绍如何实现微信小程序自定义头部导航栏和导航栏背景图片，以及处理与`navigationStyle`相关的技术问题。 ...
jQuery仿网易新闻头部导航栏代码
04-07
【jQuery仿网易新闻头部导航栏代码】是一种常见的前端网页交互设计，主要应用于网站的顶部导航区域，以提供用户友好的浏览体验。这个代码实现的核心是利用JavaScript库jQuery，结合CSS样式和HTML结构，来创建一个...
微信小程序自定义头部导航栏（组件化）
01-03
本文实例为大家分享了微信小程序自定义头部导航栏的具体代码，供大家参考，具体内容如下 效果图 支持 导航栏自定义背景颜色、背景图片 支持返回文字自定义 支持导航标题自定义 首先在app.json window配置项添加 ...
小米官网导航栏代码实现
01-30
小米官网 导航栏 HTML页面
安居客头部买房部分书写
m0_72313625的博客
07-21 160
安居客头部内容的书写，以及对定位的掌握和使用。
制作web网页头部导航栏
yuwoxinanA3的博客
12-04 3万+
（1）新建HTML文件。写入代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> （2）网页头部导航栏的一堆按钮实际是由<ul>和<li>标签制作..
顶部导航栏的写法
清音的博客
02-22 580
.goodsType { white-space: nowrap; overflow-x: scroll; -webkit-overflow-scrolling: touch; padding: 0.5rem 3%; } .goodsTypeitem { margin-right: 0.8rem; display: inline-block; ...
头部导航栏的简单制作（微信小程序）
Slash_youth的博客
10-29 1807
 头部的导航栏，以前总以为是通过按钮来跳转的，，今天刚接触了一种新的方式，超想分享一下的，效果图如下：  总体思路是这样的：     先在 js 文件中用数组列出关键字，并编写导航栏的点击跳转事件     开始布局，声明跳转的事件、隐藏的信息等     最后描写布局的样式  下面开始：  1. 在页面  index.js 文件中，用数组写出跳转的关键字和跳转的“tabnav”方法，编...
html+css网页开发 之 头部导航条（logo、导航栏、搜索框）
热门推荐
qq_43623147的博客
12-10 4万+
页面布局整体思路： 确定页面的版心（可视区），测量可知。 分析页面中的行模块，以及每个行模块中的列模块。 一行中列模块常用浮动布局，先确定每个列的大小，之后确定列的位置。 制作HTML结构。遵循先有结构，后有样式的原则。 头部制作 1号是版心盒子header 1200*42的盒子水平居中对齐 版心盒子内包含2号盒子logo 版心盒子内包含3号盒子nav导航栏 版心盒子内包含4号盒子search搜索框 版心盒子内包含5号盒子user个人信息 注意4个盒子都必须是浮动 style.c..
HTML5基本标签使用header，nav和footer
qq_38163146的博客
09-02 3433
header标签: 基本意思是“一组介绍性的护着导航相关的辅助内容”。字面上理解header标签不单单只是定义页头内容，也可以定义页头以下其它内容的介绍。这和我们传统的页面header定义并不完全一致。例如： <header> <h1>HTML5基本标签使用，header，Nav和footer</h1> <div class="post-meta...
小米商城头部实例
m0_61159638的博客
02-08 1068
在用html+css写小米商城首页时，最繁琐的可谓是头部和导航栏，在这里对头部进行实现 可以看到头部有16个超链接形式，左边12个，右边4个，并且整个布局的内容是在中间宽度的，所以可以在头部标签嵌套一个宽度为1226px的标签wrap，为了实现内容，在wrap里面设置两个盒子 一个header-left，一个headder-right，区分左右盒子，如图 <div class="header"> <div class="wrap"> <ul c
-webkit-box-reflect属性与倒影效果的实现
最新发布
读心悦
09-13 423
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 420
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 941
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
uniapp自定义头部导航栏
03-20
在components文件夹下创建CustomNavbar.vue文件，编写自定义导航栏组件的样式和布局。可以使用uni-app提供的组件和样式来实现个性化的导航栏设计。例如： ```html , color: textColor }"> <text class="title">{...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值