安居客导航栏

已于 2022-06-24 18:45:14 修改
阅读量155 收藏
点赞数 2
文章标签： 大数据
于 2022-06-24 16:12:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangmengsasa/article/details/125447081
版权

HTML代码

    <div class="nav">
        <ul>
            <li>
                <a href="#">首页</a>
            </li>
            <li class="xinfang">
                <a href="#">新房</a>
                 <ul>
                    <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="ershoufang">
                <a href="#">二手房</a>
               <ul>
                <li><a href="#">房源</a></li>
                <li class="dixian"><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="zufang">
                <a href="#">租房</a>
                <ul>
                    <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="width shangpu">
                <a href="#">商铺写字楼</a>
                   <div>
                        <ul>
                            <li><b>商铺</b></li>
                            <li><a href="#">商铺出租</a></li>
                            <li><a href="#">商品新盘</a></li>
                            <li><a href="#">商品出售</a></li>
                        </ul>
                        <ul>
                            <li><b>写字楼</b></li>
                            <li><a href="#">写字楼出售</a></li>
                            <li><a href="#">写字楼新盘</a></li>
                            <li><a href="#">写字楼出租</a></li>
                            <li><a href="#">办公楼盘</a></li>
                        </ul>
                        <ul>
                            <li><b>厂房</b></li>
                            <li><a href="#">厂房出租</a></li>
                            <li><a href="#">厂房出售</a></li>
                            <li><a href="#">厂房转让</a></li>
                        </ul>
                        <ul>
                            <li><b>仓库</b></li>
                            <li><a href="#">仓库出租</a></li>
                            <li><a href="#">仓库转让</a></li>
                            <li><a href="#">仓库出售</a></li>
                        </ul>
                        <ul>
                            <li><b>土地</b></li>
                            <li><a href="#">土地出售</a></li>
                            <li><a href="#">土地转让</a></li>
                            <li><a href="#">土地财政</a></li>
                        </ul>
                        <ul>
                            <li><b>车位</b></li>
                            <li><a href="#">车位出售</a></li>
                            <li><a href="#">车位出租</a></li>
                            <li><a href="#">车位转让</a></li>
                        </ul>
                    </div>
            </li>
            <li class="width">
                <a href="#">海外地产</a>
            </li>
            <li>
                <a href="#">装修</a>
            </li>
            <li>
                <a href="#">楼讯</a>
            </li>
            <li class="width">
                <a href="#">房产研究院</a>
            </li>
            <li>
                <a href="#">房价</a>
            </li>
            <li>
                <a href="#">问答</a>
            </li>
            <li class="width">
                <a href="#"><span class="iconfont"></span>登录 注册</a>
            </li>
        </ul>
    </div>

CSS代码

   <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        a{
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        .nav{
            width: 100%;
        }
        .nav>ul{
            width: 1320px;
            height: 40px;
            border: 1px solid gray;
            margin: 20px auto;
            display: flex;
            justify-content: space-between;
        }
        .nav>ul>li{
            width: 60px;
            height: 40px;
        }
        .nav>ul>li>a{
            display: block;
            width: 60px;
            height: 40px;
            font-size: 12px;
            text-align: center;
            line-height: 40px;
        }
        .nav>ul>.width{
            width: 140px;
            height: 40px;
        }
        .nav>ul>.width>a{
            display: block;
            width: 120px;
            height: 40px;
            font-size: 12px;
            /* text-align: center; */
            line-height: 40px;
        }
        .nav>ul>li>a:hover{
            background: pink;
            color: grey;
        }
        .nav>ul>.xinfang>ul{
            width: 100px;
            border: 1px solid gray;
            display: none;
        }
        .nav>ul>.xinfang>ul>li>a{
            display: block;
            color: grey;
            width: 100px;
            height: 30px;
            line-height: 30px;  
            margin-top: 5px;
            text-indent: 1em;
        }
        .nav>ul>.xinfang>ul>li>a:hover{
            color: white;
            background: grey;
        }
        .nav>ul>.ershoufang>ul{
            width: 140px;
            border: 1px solid gray;
            display: none;
        }
        .nav>ul>.ershoufang>ul>li>a{
            display: block;
            width: 140px;
            height: 30px;
            line-height: 30px;
            text-indent: 1em;
            margin-top: 10px;
            color: grey;
        }
        .nav>ul>.ershoufang>ul>li>a:hover{
             color: white;
             background: green;
        }
        .nav>ul>.zufang>ul{
             width: 120px;
             border: 1px solid gray;
             display: none;
        }
        .nav>ul>.zufang>ul>li>a{
            display: block;
            width: 120px;
            height: 30px;
            text-indent: 1em;
            line-height: 30px;
            color: grey;
            margin-top: 5px;
        }
        .nav>ul>.zufang>ul>li>a:hover{
            color: white;
            background: green;
        }
        .nav>ul>.shangpu>div{
            width: 600px;
            border: 1px solid gray;
            /* display: flex; */
            justify-content: space-between;
            padding: 10px;
            display: none;
        }
        .nav>ul>.shangpu>div::after{
            display: table;
            content:'';
            clear: both;
        }
        .nav>ul>.shangpu>div>ul{
            float: left;
        }
        .nav>ul>.shangpu>div>ul>li>a{
            display: block;
            width: 100px;
            height: 30px;
            color: grey;
            line-height: 30px;
        }
        .nav>ul>.shangpu>div>ul>li>a:hover{
            color: white;
            background: green;
            text-indent: 1em;
        }
       </style>

JS代码

  <script>
        //获取元素
        let lis=document.querySelectorAll('.nav>ul>li');
        let div=document.querySelector('.nav>ul>.shangpu>div');
        //循环元素绑定鼠标事件
        for(i=0;i<lis.length;i++){
            // console.log(lis[i].childNodes[2]); //换行和空格都算文本节点
            //鼠标移入事件
            lis[i].onmouseover=function(){
               
                //让循环的这个li时它的第二个子元素显示 这里写children[1]是更居索引获得索引号为1的子元素
                this.children[1].style.display='block' 
            }
            //鼠标移出事件
            lis[i].onmouseout=function(){
                this.children[1].style.display='none'
            }
        }
        
    </script>

效果图

我若成魔，佛赖我何，我就是程序狂魔
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动开发十年
GitChat
04-12 4107
内容简介 2017，顶着刘海的 iPhone X 带着“史上升级变动最大”的 iOS 11，依然碎片化严重的 Android 带着“更快、更强大、更安全” 的8.0来到我们面前。回首过去十年，从诺记的 Symbian、摩托罗拉的 Linux、苹果的 iOS、微软的 Windows Phone、三星的 Tizen 到 Google 的 Android 等，移动操作系统也曾百花齐放，但经过十年厮杀各自...
安居客头部导航栏的编写
m0_72313625的博客
07-19 229
安居客头部导航栏的书写，以及思路分析和代码展示。
仿安居客首页导航栏及二级下拉菜单Html+Css+JavaScript
余月初贰的博客
06-27 512
这次仿写的是安居客的首页导航栏，要求实现二级下拉菜单 css部分 JavaScript部分 最后是代码运行效果
python爬虫爬取安居客房源信息
qq_39321513的博客
12-24 7667
爬取安居客房源信息Xpath插件的安装爬取重庆花溪附近的房源信息（进入正题啦~）代码代码的问题 & 运行时可能出现的问题结果数据处理部分（写给我自己哒~） Xpath插件的安装 链接：https://pan.baidu.com/s/1T3V11Ev8dPODa2fCRbeuCg 提取码：qvzf 将这个安装包解压缩 打开谷歌浏览器的扩展程序 ----> 打开开发者模式 ----> 点击加载已解压的扩展程序 ----> 选择解压的文件夹 看下图操作 就会出现这个 浏览器导
python爬虫爬取房源_python爬虫爬取安居客房源信息
weixin_39600319的博客
02-04 767
Xpath插件的安装链接：https://pan.baidu.com/s/1T3V11Ev8dPODa2fCRbeuCg提取码：qvzf将这个安装包解压缩打开谷歌浏览器的扩展程序 ----> 打开开发者模式 ----> 点击加载已解压的扩展程序 ----> 选择解压的文件夹看下图操作就会出现这个浏览器导航栏上也会出现X图标点击图标就会弹出 再点击就会关闭(或者使用快捷键ctrl+...
HTML&CSS布局练习---360导航页面
weixin_34123613的博客
12-26 467
一共分为7个部分：由HTML和CSS外部样式表做成 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht...
155款安卓开源项目源码整理，总有你要找的
热门推荐
csdn_wanziooo的博客
10-10 1万+
https://www.jianshu.com/p/a0dd06565747 1、BeautifulRefreshLayout-漂亮的美食下拉刷新 https://github.com/android-cjj/BeautifulRefreshLayout/tree/BeautifulRefreshForFood 2、Material Design-动画风格的选项卡tab切换功能 ht...
Android 开源交流分享汇总
Hankkin的博客小园
05-19 3039
目录 开源交流 1 群 ------ 开源交流 2 群 ------ 开源交流 3 群 开源交流 4 群 ------ 开源交流 5 群 ------ 开源交流 6 群 原创 简介 几群 作者 加速球效果 4 群 gavin 可翻转Layout(正反面),可以翻转显示其背面的View，像真实的卡片一样 2群 Eric
CSS+JavaScript下拉菜单布局与代码执行
m0_71345904的博客
06-27 975
导读：今天来通过一个安居客web下拉菜单来总结一下怎么用css布局以及通过js切换css效果首先看案例原图： 头部的布局以及下拉菜单布局实现代码： css布局部分： css这一块主要核心是通过盒子浮动，定位来布局，还有对选择器的熟练掌握。js代码块实现鼠标移入目标事件，显示下拉菜单，失去鼠标焦点隐藏下拉菜单主要重点在于逻辑的判断，通过for循环来遍历鼠标移入目标的具体项，主要防止效果重复不消失然后就是DOM中对于父子节点的掌握，通过父节点找到子节点，实现下拉菜单的显示隐藏 这里需要注意得是这样通
易语言导航栏
08-21
"易语言导航栏源码"是一个专门用于实现导航栏功能的代码资源，通过这个源码，开发者可以学习到如何在易语言中创建和管理导航栏。下面将详细解析其中涉及的关键知识点： 1. **创建组件**：在易语言中，创建组件是指...
jetpack compose 底部导航栏
08-17
在Android应用设计中，底部导航栏（Bottom Navigation Bar）是一个常见的组件，用于在多个主视图之间提供平滑的导航。在这个讨论中，我们将深入探讨如何使用Jetpack Compose来创建一个“完美的”底部导航栏。 首先...
小米官网导航栏代码实现
01-30
小米官网 导航栏 HTML页面
jquery 悬浮 导航栏
07-07
在网页设计中，导航栏是页面布局的重要组成部分，它帮助用户快速访问网站的不同部分。"jQuery 悬浮导航栏"是一种常见的网页交互效果，当用户滚动页面时，导航栏会固定在屏幕顶部，始终保持可见，提供便捷的导航。在...
uniapp 自定义导航栏
08-18
uniapp 自定义导航栏
rabbitmq集群创建admin用户之后，提示can access virtual hosts是No access状态
jiang0615csdn的博客
07-11 255
rabbitmq集群创建admin用户之后，提示can access virtual hosts是No access状态
Python机器学习、深度学习技术提升气象、海洋、水文领域实践技术
最新发布
weixin_58566962的博客
07-15 220
Python是功能强大、免费、开源，实现面向对象的编程语言，能够在不同操作系统和平台使用，简洁的语法和解释性语言使其成为理想的脚本语言。除了标准库，还有丰富的第三方库，Python在数据处理、科学计算、数学建模、数据挖掘和数据可视化方面具备优异的性能。上述优势使得Python在气象、海洋、地理、气候、水文和生态等地学领域的科研和工程项目中得到广泛应用。人工智能和大数据技术在许多行业都取得了颠覆式的成果，气象和海洋领域拥有海量的模式和观测数据，是大数据和人工智能应用的天然场景。
Mac M1安装配置Hadoop+Flink SQL环境
zhujiahui622的专栏
07-12 1090
Flink 1.18.1+ Hadoop 3.4.0
kafka部署以及常用命令详细总结
Mr.L-OAM的博客
07-12 416
kafka部署，kafka常用命令总结，kafka命令大全
uniapp自定义导航栏内容
04-10
在`pages.json`文件中，可以设置`navigationBarTitleText`字段来定义导航栏标题文字，设置`navigationBarBackgroundColor`字段来定义导航栏背景颜色，设置`navigationBarTextStyle`字段来定义导航栏标题文字的颜色...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值