前端web

题目:制作带有下拉悬停菜单的导航栏

效果图

一、先制作菜单栏

<body>
        <div id="menu">
            <div id="container">
                <div class="item">游戏1
                    <div class="down_menu">
                        <div>游戏下载</div>
                        <div>游戏社交</div>
                        <div>游戏论坛</div>
                        <div>游戏bug</div>
                    </div>
             
                </div>
                <div class="item">游戏2
                    <div class="down_menu">
                        <div>游戏下载</div>
                        <div>游戏社交</div>
                        <div>游戏bug</div>
                        <div>游戏论坛</div>
                    </div>
                </div>
                <div class="item">游戏3
                    <div class="down_menu">
                        <div>游戏下载</div>
                        <div>游戏交易</div>
                        <div>游戏外挂</div>
                        <div>游戏攻略</div>
                    </div>
                </div>
                <div class="item">游戏4</div>
                <div class="item">游戏5</div>
                <div class="item">游戏6</div>
                <div class="item">游戏7</div>
            </div>
        </div>

二、使用浮动属性让块标签处在同一列

.item {
     
                float: left;
                width: 100px;
                height: 50px;
                line-height: 50px;
                text-align: center;——字体置中
                color: antiquewhite;——字体颜色
                position: relative;
            }
        

三、设置菜单栏底色并置顶

        * {
                margin: 0;
                padding: 0;
            }
        
            #menu {
                background-color: aqua;
                width: 100%;
                height: 50px;
            }

    .item:hover {
                background-color: royalblue;——当鼠标悬浮时选项的底色变换
            }

#container {
                width: 720px;
                margin: auto;——使菜单处于中间

四、悬浮框的设置

.down_menu>div {
                color: black;——悬浮框里的字体颜色
            }

            .down_menu {
                background-color: #cccccc;——悬浮框的底色
                display: none;
                position: absolute;
            }

            .item:hover>.down_menu {   
                display: block;————————悬浮框的大小设置
                width: 100px;
                left: 0px;
                top: 50px;
            }

五、完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;/* border: 1px solid red; */}#menu {background-color: aqua;width: 100%;height: 50px;}.item {/* 浮动属性可以让块标签,处在同一行 */float: left;width: 100px;height: 50px;line-height: 50px;/* border: 1px solid red; */text-align: center;color: antiquewhite;position: relative;}.item:hover {background-color: royalblue;}#container {width: 720px;margin: auto;}.down_menu>div {color: black;}.down_menu {background-color: #cccccc;display: none;position: absolute;}.item:hover>.down_menu {display: block;width: 100px;left: 0px;top: 50px;}</style></head><body><div id="menu"><div id="container"><div class="item">游戏1<div class="down_menu"><div>游戏下载</div><div>游戏社交</div><div>游戏论坛</div><div>游戏bug</div></div><!-- <div style="width: 100px;height: 100px;background-color: black;"></div> --></div><div class="item">游戏2<div class="down_menu"><div>游戏下载</div><div>游戏社交</div><div>游戏bug</div><div>游戏论坛</div></div></div><div class="item">游戏3<div class="down_menu"><div>游戏下载</div><div>游戏交易</div><div>游戏外挂</div><div>游戏攻略</div></div></div><div class="item">游戏4</div><div class="item">游戏5</div><div class="item">游戏6</div><div class="item">游戏7</div></div></div></body>
</html>

效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/886275.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue之插槽(slot)

插槽是vue中的一个非常强大且灵活的功能&#xff0c;在写组件时&#xff0c;可以为组件的使用者预留一些可以自定义内容的占位符。通过插槽&#xff0c;可以极大提高组件的客服用和灵活性。 插槽大体可以分为三类&#xff1a;默认插槽&#xff0c;具名插槽和作用域插槽。 下面…

unity3d————Resources异步加载

知识点一&#xff1a;Resources异步加载是什么&#xff1f; 在Unity中&#xff0c;资源加载可以分为同步加载和异步加载两种方式。同步加载会在主线程中直接进行&#xff0c;如果加载的资源过大&#xff0c;可能会导致程序卡顿&#xff0c;因为从硬盘读取数据到内存并进行处理…

fatal error C1083: 无法打开包括文件: “stdio.h”: No such file or directory

在 Windows 上的 “终端” 里&#xff0c;对于已经执行过 cmake -S . -B build -G Ninja 的工程&#xff0c;执行了 cmake --build build出现了报错&#xff1a; fatal error C1083: 无法打开包括文件: “stdio.h”: No such file or directory 原因是&#xff0c;当前 “终端…

SpringBoot+Vue3实现数据可视化大屏

前端工程的地址:UserManagerFront: 数据可视化前端 (gitee.com) 效果展示&#xff0c;可以展现出来了&#xff0c;样式可能还有一些丑。 后端代码 后端主要是拿到数据并对数据进行处理&#xff0c;按照前端需要的格式进行返回即可。 import com.njitzx.entity.Student; impor…

vue3: toRef, reactive, toRefs, toRaw

vue3&#xff1a; toRef, reactive, toRefs, toRaw 扫码或者点击文字后台提问 <template><div>{{ man }}</div><hr><!-- <div>{{ name }}--{{ age }}--{{ like }}</div> --><div><button click"change">修…

《网络硬件设备完全技术宝典》

《网络硬件设备完全技术宝典》 网卡 集线器 交换机 路由器 双绞线 光缆 无线接入点AP 交换机技术与选择策略 冗余链路技术 由于物理链路和网络模块的损坏都将导致网络链路的失败&#xff0c;因此两个设备之间&#xff0c;特别是核心交换机与汇聚交换机之间的单链路…

Win10下使用Anaconda安装GPU版本PyTorch

PyTorch是一个开源机器学习框架&#xff0c;最初来自Meta Ai。如果你想研究人工智能或从事人工智能项目方面的工作&#xff0c;那么在本地机器上使用PyTorch设置开发环境对于许多项目来说都是必不可少的。GPU&#xff08;图形处理单元&#xff09;是一种专用处理器&#xff0c;…

灰狼优化算法

灰狼优化算法&#xff08;Grey Wolf Optimizer&#xff0c;GWO&#xff09;是一种群智能优化算法&#xff0c;由澳大利亚格里菲斯大学学者Mirjalili等人于2014年提出。该算法灵感来源于灰狼群体的捕食行为&#xff0c;通过模拟灰狼的社会等级分层、跟踪、包围和攻击猎物等步骤来…

Chromium 中sqlite数据库操作演示c++

本文主要演示sqlite数据库 增删改查创建数据库以及数据库表的基本操作&#xff0c;仅供学习参考。 一、sqlite数据库操作类封装&#xff1a; sql\database.h sql\database.cc // Copyright 2012 The Chromium Authors // Use of this source code is governed by a BSD-sty…

Docker部署Kafka集群,增加 SASL_SSL认证,并集成到Spring Boot,无Zookeeper版

1&#xff0c;准备好Kafka 镜像包&#xff1a; bitnami/kafka:3.9.0 镜像资源包 2&#xff0c;准备好kafka.keystore.jks 和 kafka.truststore.jks证书 具体操作可参考&#xff1a; Docker部署Kafka SASL_SSL认证&#xff0c;并集成到Spring Boot-CSDN博客 3&#xff0c;配置…

apipost下载安装教程、脚本详细使用教程

目录 apipost脚本使用教程 缘由&#xff1a; 实现流程&#xff1a; 1、设置接口需要的URL&#xff1a; 2、boby: 3、预执行操作&#xff1a; 4、断言 5、执行结果&#xff1a; 什么是ApiPost&#xff1f; 下载以及安装&#xff1a; apipost使用文档介绍&#xff1a;…

Python Web 应用开发基础知识

Python Web 应用开发基础知识 引言 随着互联网的快速发展&#xff0c;Web 应用程序的需求日益增加。Python 作为一种简单易学且功能强大的编程语言&#xff0c;已经成为 Web 开发中广受欢迎的选择之一。本文将深入探讨 Python Web 开发的基础知识&#xff0c;包括常用框架、基…

SpringBoot多环境+docker集成企业微信会话存档sdk

SpringBoot多环境docker集成企业微信会话存档sdk 文章来自于 https://developer.work.weixin.qq.com/community/article/detail?content_id16529801754907176021 SpringBoot多环境docker集成企业微信会话存档sdk 对于现在基本流行的springboot环境&#xff0c;官方文档真是比…

在openi平台 基于华为顶级深度计算平台 openmind 动手实践

大家可能一直疑问&#xff0c;到底大模型在哪里有用。 本人从事的大模型有几个方向的业务。 基于生成式语言模型的海事航行警告结构化解析。 基于生成式语言模型的航空航行警告结构化解析。 基于生成式生物序列&#xff08;蛋白质、有机物、rna、dna、mrna&#xff09;的多模态…

【论文分享】基于街景图像识别和深度学习的针对不同移动能力老年人的街道步行可达性研究——以南京成贤街社区为例

全球老龄化趋势加剧, 许多城市中老年人数量不断增加&#xff0c;而现有街道和社区基础设施往往未能满足其步行安全和便利需求。本次我们给大家带来一篇SCI论文的全文翻译&#xff0c;该论文通过探讨不同步行能力的老年人对城市步行环境的需求&#xff0c;提供了关于如何改善城市…

Android Osmdroid + 天地图 (二)

Osmdroid 天地图 &#xff08;二&#xff09; 前言正文一、定位监听二、改变地图中心三、添加Marker四、地图点击五、其他配置① 缩放控件② Marker更换图标③ 添加比例尺④ 添加指南针⑤ 添加经纬度网格线⑥ 启用旋转手势⑦ 添加小地图 六、源码 前言 上一篇中我们显示了地图…

CSS基础知识04

文本溢出通常是指在限定的空间内不能容纳所输入的文字&#xff0c;导致文字超出了容器的边界 一、文本溢出 1.1.css属性处理 所用到的属性 属性属性值overflowvisible&#xff1a;默认值&#xff0c;内容不会被修剪&#xff0c;会呈现在元素框之外。hidden&#xff1a;内容会…

gitlab和jenkins连接

一&#xff1a;jenkins 配置 安装gitlab插件 生成密钥 id_rsa 要上传到jenkins&#xff0c;id_rsa.pub要上传到gitlab cat /root/.ssh/id_rsa 复制查看的内容 可以看到已经成功创建出来了对于gitlab的认证凭据 二&#xff1a;配置gitlab cat /root/.ssh/id_rsa.pub 复制查…

Modbus TCP转Modbus ASCII解决方案

Modbus TCP和Modbus ASCII是两种不同的通信协议。Modbus TCP是一种二进制协议&#xff0c;Modbus ASCII是一种基于文本的协议。二者不能直接转换&#xff0c;因为它们的数据表示方式、消息结构、字符编码等都不相同。 如果你需要将Modbus TCP转换为Modbus ASCII&#xff0c;你…

十三、注解配置SpringMVC

文章目录 1. 创建初始化类&#xff0c;代替web.xml2. 创建SpringConfig配置类&#xff0c;代替spring的配置文件3. 创建WebConfig配置类&#xff0c;代替SpringMVC的配置文件4. 测试功能 1. 创建初始化类&#xff0c;代替web.xml 2. 创建SpringConfig配置类&#xff0c;代替spr…