前端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;——当鼠标悬浮时底色变换
            }

四、悬浮框的设置

.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.rhkb.cn/news/469622.html

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

相关文章

【大数据学习 | kafka高级部分】kafka中的选举机制

controller的选举 首先第一个选举就是借助于zookeeper的controller的选举 第一个就是controller的选举&#xff0c;这个选举是借助于zookeeper的独享锁实现的&#xff0c;先启动的broker会在zookeeper的/contoller节点上面增加一个broker信息&#xff0c;谁创建成功了谁就是主…

Android 开发指南:初学者入门

Android 是全球最受欢迎的移动操作系统之一&#xff0c;为开发者提供了丰富的工具和资源来创建各种类型的应用程序。本文将为你提供一个全面的入门指南&#xff0c;帮助你从零开始学习 Android 开发。 目录 1. 了解 Android 平台[1]2. 设置开发环境[2]3. 学习基础知识[3]4. 创…

漏洞挖掘 | 某医院小程序支付漏洞+越权

漏洞挖掘 | 某医院小程序支付漏洞越权 登陆后点击个人信息&#xff0c;抓包&#xff0c;放到repeter模块 修改strUserID参数可以越权查看别人信息 放intruder模块可以跑数据&#xff0c;这里有几万信息泄露 回到首页&#xff0c;点击医生咨询功能点 随便选一个需要付费的医…

MFC图形函数学习07——画扇形函数

绘制扇形函数是MFC中绘图的基本函数&#xff0c;它绘制的仍是由椭圆弧与椭圆中心连线构成的椭圆扇形&#xff0c;特例是由圆弧与圆心连线构成的圆扇形。 一、绘制扇形函数 原型&#xff1a;BOOL Pie(int x1,int y1,int x2,int y2,int x3,int y3,int x4,int y4); …

基于Python的膳食健康系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

头歌网络安全(11.12)

头歌禁止复制解决 必须先下篡改猴&#xff01;&#xff01;&#xff01;&#xff01; 头歌复制助手 Educoder Copy Helperhttps://scriptcat.org/zh-CN/script-show-page/1860 Java生成验证码 第1关&#xff1a;使用Servlet生成验证码 任务描述 本关任务&#xff1a;使用se…

ROM修改进阶教程------安卓14 安卓15去除app签名验证的几种操作步骤 详细图文解析

在安卓14 安卓15的固件中。如果修改了系统级别的app。那么就会触发安卓14 15的应用签名验证。要么会导致修改的固件会进不去系统,或者进入系统有bug。博文将从几方面来解析去除安卓14 15应用签名验证的几种方法。 💝💝💝通过博文了解: 1💝💝💝-----安卓14去除…

第七部分:2. STM32之ADC实验--AD多通道(AD采集三路传感器模块实验:光敏传感器、热敏传感器、反射式传感器附赠温湿度传感器教程)

这个多通道采用非扫描模式--单次转换模式 1.代码配置链路图 2. ADC的输入通道 3.ADC的非扫描模式的转换模式&#xff08;单次和连续&#xff09; 4.ADC的扫描模式的转换模式&#xff08;单次和连续&#xff09; 5.采集校准 代码实验&#xff1a; 代码部分&#xff1a; #inclu…

crond 任务调度 (Linux相关指令:crontab)

相关视频链接 crontab 进行 定时任务 的设置 概述 任务调度&#xff1a;是指系统在某个时间执行的特定的命令或程序 任务调度的分类&#xff1a; 1.系统工作&#xff1a;有些重要的工作必须周而复始地执行。如病毒扫描等。 2.个别用户可能希望执行某些程序&#xff0c;比如…

基于python 的opencv 使用GrabCut算法分割图像代码

#利用grabcut算法分割图像import numpy as np import cv2 from matplotlib import pyplot as plt import warningswarnings.filterwarnings("ignore", module "matplotlib")imgpath E:/code/image_opencv_test/lena.jpg img cv2.imread(imgpath)Coords1x…

AndroidStudio-文本显示

一、设置文本的内容 1.方式&#xff1a; &#xff08;1&#xff09;在XML文件中通过属性&#xff1a;android:text设置文本 例如&#xff1a; <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.andr…

css:没错又是我

背景 给元素添加背景样式 还可以设置背景颜色、背景图片&#xff08;教练我要学这个&#xff09;、背景平铺、背景图片位置、背景图像固定 背景颜色 这个我们用过&#xff0c;就是&#xff1a; a {background-color: hotpink; } 一般默认值是transparent&#xff0c;也就…

使用Git工具在GitHub的仓库中上传文件夹(超详细)

如何使用Git工具在GitHub的仓库中上传文件夹&#xff1f; 如果觉得博主写的还可以&#xff0c;点赞收藏关注噢~ 第一步&#xff1a;拥有一个本地的仓库 可以fork别人的仓库或者自己新创建 fork别人的仓库 或者自己创建一个仓库 按照要求填写完成后&#xff0c;点击按钮创建…

uniapp的基本使用(easycom规范和条件编译)和uview组件的安装和使用

文章目录 1、uniapp1.uview组件安装2.uview-plus组件安装 2、条件编译3、easycom规范1.组件路径符合规范2.自定义easycom配置的示例 总结 1、uniapp UniApp的UI组件库&#xff0c;如TMUI、uViewUI、FirstUI、TuniaoUI、ThorUI等&#xff0c;这些组件库适用于Vue3和TypeScript&…

攻防世界37-unseping-CTFWeb

攻防世界37-unseping-CTFWeb <?php highlight_file(__FILE__);class ease{private $method;private $args;function __construct($method, $args) {$this->method $method;$this->args $args;}function __destruct(){if (in_array($this->method, array("…

【大数据学习 | HBASE高级】region split机制和策略

1. region split机制 ​ HRegionServer拆分region的步骤是&#xff0c;先将该region下线&#xff0c;然后拆分&#xff0c;将其子region加入到hbase:meta表中&#xff0c;再将他们加入到原本的HRegionServer中&#xff0c;最后汇报Master。 split前&#xff1a;hbase:meta表有…

FMC 扩展子卡6 路 422,8 组 LVDS,8 路 GPIO

FMC 扩展子卡6 路 422,8 组 LVDS,8 路 GPIO 卡是一款支持多路 LVCMOS 和 LVDS 信号互转的 FMC 扩展子板。它能支持 6 路 422 信号的输入 / 输出 ,8 组 LVDS 信号的输入 / 输出和 8 路 GPIO 信号的输入 / 输出。本产品基于一些逻辑转换芯片而设计&#xff0c;能实现差分信号转单…

old-cms(原生PHP开发的企业网站管理系统)

old-cms是一个使用原生PHP开发的实用的PHP企业网站管理系统&#xff0c;包括企业网站常用的功能板块&#xff0c;如&#xff1a;产品管理、新闻管理、栏目管理、模板标签管理、分类管理、诚聘英才、在线留言反馈、关于我们&#xff08;公司简介&#xff09;等等&#xff0c;也有…

IPv4与IPv6的优缺点

IPv4 和 IPv6 都是 TCP/IP 协议的版本。IP 是指互联网协议&#xff0c;是传输控制协议/互联网协议套件&#xff08;TCP/IP&#xff09;的主要部分。 TCP/IP 是一套标准和规则&#xff0c;用于规范不同网络上的设备之间打包数据&#xff08;数据报&#xff09;的传输和交换。互…

git命令及原理

git: 目录则被称之为“树” 文件被称作 Blob 对象. git help <command>: 获取 git 命令的帮助信息 git init: 创建一个新的 git 仓库&#xff0c;其数据会存放在一个名为 .git 的目录下 git status: 显示当前的仓库状态 git add <filename>: 添加文件到暂存区 git …