【css】使用float实现水平导航栏

该实例使用float 浮动实现元素浮动在水平方向,从而实现水平导航栏效果。

overflow: hidden:当不给父级元素设置高度的时候,其内部元素浮动后会导致下面的元素顶上去,这是因为子元素浮动后,子元素脱离标准流,不占位,父元素检测不到子元素的大小,从而高度为0。下面的ul要是没有添加该属性时,只显示主页,其他隐藏。

去掉overflow: hidden的效果:高度为零。
在这里插入图片描述
去掉overflow: hidden和添加高度的效果:
在这里插入图片描述
下面是添加了 overflow: hidden的代码:

<style>
ul {list-style-type: none;//去掉列表样式margin: 0;padding: 0;overflow: hidden;//这个很重要,玄学,溢出隐藏,没有这个的话,会导致只显示主页,其他隐藏background-color: #333;
}li {float: left;//向左浮动
}li a {display: inline-block;//设置行内块color: white;text-align: center;padding: 14px 16px;text-decoration: none;//去掉文本装饰
}li a:hover {background-color: #111;//鼠标悬浮显示样式
}.active {background-color: red;//激活类样式
}
</style>
</head>
<body><ul><li><a href="#home" class="active">主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系</a></li><li><a href="#about">关于</a></li>
</ul></body>

渲染效果:
在这里插入图片描述

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

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

相关文章

组合总和——力扣39

文章目录 题目描述回溯 题目描述 回溯 class Solution { public:vector<vector<int>> res;vector<int> seq; void dfs(vector<int>& nums, int pos, int target){if(target0){res.emplace_back(seq);return;}if(posnums.size()){return;}//直接跳过…

Python源码编译时碰到的问题:fatal error LNK1104: cannot open file libffi-7.lib

因为工作原因需要对python源码进行调试&#xff0c;所以Github上拉下来的cpython源码&#xff0c;编译一切顺利&#xff0c;除了一个报告说 LNK1104&#xff1a;无法打开libffi-7.lib 因为这些externals库是通过&#xff1a;PCbuild\get_externals.bat下载下来的&#xff0c;…

Java实现十大经典排序算法之快速排序

0 算法简介 快速排序是一种高效率排序算法&#xff0c;它是对冒泡排序的一种改进&#xff0c;它也是一种不稳定排序算法。快速排序的核心是比较、交换和递归。 在待排序数组中指定一个基准元素pivot&#xff08;一般选取数组首元素&#xff09;&#xff0c;使得数组排序之后基…

uniapp 使用iconfont

问题描述&#xff1a;在开发过程中会遇到使用自定义icon的情况&#xff0c;在uniapp项目中使用iconfont步骤如下。 问题解决 步骤一&#xff1a; 打开iconfont网址------我的项目-----下载至本地 下载成功的文件内容&#xff1a; 步骤二&#xff1a; 以管理员身份运行终端&am…

Linux的基本指令(2)

指令1&#xff1a;man 作用&#xff1a;可以查询linux指令语法内容。 格式&#xff1a; man 指令 安装man指令&#xff1a; yum install -y man-pages 例如&#xff1a; 查询 指令 ls 的语法内容。 man ls 查询 fork 指令的语法内容。 man fork 在man中存在9个手册&…

华为OD面试记录

The experience of applying for software test engineer(Dispatcher) 记录保存 招聘岗位: 测试工程师 Base:西安 华为面试流程如下&#xff1a; 流程名内容机试三题,总分400分,最后一道题200分人力资源面试询问私人问题&#xff0c;不谈薪资一面技术面二面技术面主管问项目…

根据Pytorch源码实现的 ResNet18

一&#xff0c;类模块定义: import torch import torch.nn as nn import torch.nn.functional as F from torch import Tensorclass ResBlock(nn.Module):def __init__(self, inchannel, outchannel, stride1) -> None:super(ResBlock, self).__init__()# 这里定义了残差块…

CountDownLatch的使用(判断多个线程是否都执行完毕)

使用CountDownLatch的情景 有一些”多线程下载器"&#xff0c;可以把一个大的文件给拆分成多个小的部分&#xff0c;使用多个线程分别下载&#xff0c;每个线程负责下载一部分&#xff0c;此时每个线程都是一个网络连接&#xff0c;这样就可以大幅度提高下载速度。 假设&a…

Spring Boot使用的关键点

目录 1. 构建系统 1.1. 依赖管理 1.2. Maven Maven项目结构 1.3. Starter 2. 代码结构 2.1. “default” 包 2.2. 启动类的位置 3. Configuration 类 3.1. 导入额外的 Configuration 类 3.2. 导入 XML Configuration 4. 自动装配&#xff08;配置&#xff09; 4.1…

【云原生】深入掌握k8s中Pod和生命周期

个人主页&#xff1a;征服bug-CSDN博客 kubernetes专栏&#xff1a;kubernetes_征服bug的博客-CSDN博客 目录 1 什么是 Pod 2 Pod 基本操作 3 Pod 运行多个容器 4 Pod 的 Labels(标签) 5 Pod 的生命周期 1 什么是 Pod 摘取官网: Pod | Kubernetes 1.1 简介 Pod 是可以在 …

idea打开传统eclipse项目

打开传统web项目 1.打开后选择项目文件 2.选择项目结构 3.设置jdk版本 4.导入当前项目模块 5.选择eclipse 6. 设置保存目录 7.右键模块&#xff0c;添加spring和web文件 8. 设置web目录之类的&#xff0c;并且创建打包工具 9.如果有本地lib&#xff0c;添加为库 最后点击应用&…

Databend 开源周报第 104 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 从 Kafka 载入数…

安装win版本的neo4j(2023最新版本)

安装win版本的neo4j 写在最前面安装 win版本的neo4j1. 安装JDK2.下载配置环境变量&#xff08;也可选择直接点击快捷方式&#xff0c;就可以不用配环境了&#xff09;3. 启动neo4j 测试代码遇到的问题及解决&#xff08;每次环境都太离谱了&#xff0c;各种问题&#xff09;连接…

Java系列之数据库geometry的相关函数

文章目录 前言一、geometry是什么&#xff1f;二、geometry常用函数1.OGC标准函数①管理函数②几何对象关系函数③几何对象处理函数④几何对象存取函数⑤几何对象构造函数 2.PostGIS扩展函数①管理函数②几何操作符③几何量测函数④几何对象输出⑤几何对象创建⑥几何对象编辑⑦…

小研究 - 微服务系统服务依赖发现技术综述(二)

微服务架构得到了广泛的部署与应用, 提升了软件系统开发的效率, 降低了系统更新与维护的成本, 提高了系统的可扩展性. 但微服务变更频繁、异构融合等特点使得微服务故障频发、其故障传播快且影响大, 同时微服务间复杂的调用依赖关系或逻辑依赖关系又使得其故障难以被及时、准确…

AI算法图形化编程加持|OPT(奥普特)智能相机轻松适应各类检测任务

OPT&#xff08;奥普特&#xff09;基于SciVision视觉开发包&#xff0c;全新推出多功能一体化智能相机&#xff0c;采用图形化编程设计&#xff0c;操作简单、易用&#xff1b;不仅有上百种视觉检测算法加持&#xff0c;还支持深度学习功能&#xff0c;能轻松应对计数、定位、…

Spring mvc:SpringServletContainerInitializer

SpringServletContainerInitializer实现了Servlet3.0规范中定义的ServletContainerInitializer&#xff1a; public interface ServletContainerInitializer {void onStartup(Set<Class<?>> c, ServletContext ctx) throws ServletException; }SpringServletCont…

Android 获取网关 ip 和 DNS ip

参考下方 PingUtil.java 代码 import android.content.Context; import android.net.DhcpInfo; import android.net.wifi.WifiManager; import android.text.format.Formatter;import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; impor…

记一次 .NET 某物流API系统 CPU爆高分析

一&#xff1a;背景 1. 讲故事 前段时间有位朋友找到我&#xff0c;说他程序CPU直接被打满了&#xff0c;让我帮忙看下怎么回事&#xff0c;截图如下&#xff1a; 看了下是两个相同的程序&#xff0c;既然被打满了那就抓一个 dump 看看到底咋回事。 二&#xff1a;为什么会打…

新人如何高效写 API 文档

什么是 API 文档&#xff1f; 在深入研究 API 文档之前&#xff0c;让我简要解释一下 API 是什么以及它的基本功能。 API 是应用程序编程接口的首字母缩写。 ​ 编辑 切换为居中 通过 API 将设备连接到数据库 无论你是初学者还是高级开发人员&#xff0c;你都会在软件开发…