当前位置： 首页 > news >正文

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

news 2026/4/9 0:33:04

该实例使用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>

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

相关文章：

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

该实例使用float 浮动实现元素浮动在水平方向&#xff0c;从而实现水平导航栏效果。 overflow: hidden&#xff1a;当不给父级元素设置高度的时候&#xff0c;其内部元素浮动后会导致下面的元素顶上去&#xff0c;这是因为子元素浮动后&#xff0c;子元素脱离标准流&#xff0…...

编程日记 2023/8/5 12:09:19

IDEA超强XSD文件编辑插件-XSD / WSDL Visualizer

前言 XSD / WSDL Visualizer可以简化XML架构定义(XSD)和WSDL文件编辑过程; 通过使用与IntelliJ无缝集成的可视化编辑器&#xff0c;转换处理XSD和WSDL文件的方式。告别导航复杂和难以阅读的代码的挫败感&#xff0c;迎接流线型和直观的体验。 插件安装 在线安装 IntelliJ IDE…...

编程日记 2023/8/5 12:08:18

Nodejs 第三章（Npm Package json）

npm npm&#xff08;全称 Node Package Manager&#xff09;是 Node.js 的包管理工具&#xff0c;它是一个基于命令行的工具&#xff0c;用于帮助开发者在自己的项目中安装、升级、移除和管理依赖项。 https://www.npmjs.com/ 类似于 PHP 的工具&#xff1a;Composer。它是 …...

编程日记 2023/8/5 12:07:17

Tool Documentation Enables Zero-Shot Tool-Usage with Large Language Models

本文是LLM系列文章的内容&#xff0c;针对《Tool Documentation Enables Zero-Shot Tool-Usage with Large Language Models》的翻译。 工具文档赋能大模型零样本的工具使用 摘要1 引言2 相关工作3 实验设置3.1 常规的工作流3.2 工具使用提示方法3.3 评估任务 4 实证研究结果4…...

编程日记 2023/8/5 12:06:16

16 Springboot——登录功能实现

16.1 修改index.html中表单跳转的地址 将action的地址改为user/login&#xff0c;意思是点击提交按钮后&#xff0c;就会跳转到user/login地址&#xff0c;然后只要用Controller类的RequsetMapping去接这个地址就行了。 <body class"text-center"><form cl…...

编程日记 2023/8/5 12:05:14

数据结构-栈队列链表树

1 栈 概念 栈是⼀个线性结构&#xff0c;在计算机中是⼀个相当常⻅的数据结构。栈的特点是只能在某⼀端添加或删除数据&#xff0c;遵循先进后出的原则 实现 每种数据结构都可以⽤很多种⽅式来实现&#xff0c;其实可以把栈看成是数组的⼀个⼦集&#xff0c;所以这⾥使⽤数…...

编程日记 2023/8/5 12:04:12

clickhouse功能使用

离线聚合 物化视图 clickhouse需在AggregatingMergeTree之上建立物化视图来完成聚合的效果。以小时聚合为例说明 首先创建表，此处是本地表，且没有副本 #创建表 CREATE TABLE datasets.bt_stats (`btname` String,`record` UInt64,`EventTime` DateTime...

编程日记 2023/8/5 12:03:11

java中使用Jsoup和Itext实现将html转换为PDF

1.在build.gradle中安装所需依赖&#xff1a; implementation group: com.itextpdf, name: itextpdf, version: 5.5.13 implementation group: com.itextpdf.tool, name: xmlworker, version: 5.5.13 implementation group: org.jsoup, name: jsoup, version: 1.15.32.创建工具…...

编程日记 2023/8/5 12:02:09

无人驾驶实战-第七课（高精地图和V2X ）

高精地图是无人驾驶中的重要一环&#xff0c;对环境感知、规划与定位等都有重要的作用。 高精地图的特点&#xff1a; 可视化、静态目标、地图信息、点云数据 高精地图与导航地图的区别 High Definition Map Navigation Map Precision cm m Information 3D lane info Mo…...

编程日记 2023/8/5 12:01:07

springboot集成Sentinel

1、添加依赖 该版本匹配springboot 2.3.x和2.4.x <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-sentinel</artifactId><version>2021.1</version> </dependency> 2、Sentin…...

编程日记 2023/8/5 12:00:07

数据结构——单链表OJ题

单链表OJ题 前言一、删除链表中等于给定值 val 的所有节点二、反转一个单链表三、返回链表的中间结点四、输出该链表中倒数第k个结点五、将两个有序链表合并六、链表的回文结构七、将链表分割成两部分八、找出第一个公共结点九、判断链表中是否有环总结 前言 在前面的博客中我…...

编程日记 2023/8/5 11:59:05

【雕爷学编程】MicroPython动手做（31）——物联网之Easy IoT

1、物联网的诞生 美国计算机巨头微软(Microsoft)创办人、世界首富比尔盖茨&#xff0c;在1995年出版的《未来之路》一书中&#xff0c;提及“物物互联”。1998年麻省理工学院提出&#xff0c;当时被称作EPC系统的物联网构想。2005年11月&#xff0c;国际电信联盟发布《ITU互联网…...

编程日记 2023/8/5 11:58:02

《前端开发 实践之 构建工具的了解》

目录 构建工具的了解Vite 构建工具了解基本使用 构建工具的了解 前端构建工具之一&#xff1a;vite Vite 构建工具了解 todo 基本使用 todo...

编程日记 2023/8/5 11:57:02

MySQL 主从搭建

文章目录 前言一、MySQL 主从是什么&#xff1f;二、通过 Docker 部署三、配置主从关系四、实际情况分析&解决方案五、常见问题处理1、CLONE需要版本不同2、CLONE需要参数相同 总结 前言 MySQL 主从搭建 操作系统&#xff1a;CentOS Linux release 7.9.2009 (Core) 操作系…...

编程日记 2023/8/5 11:56:01

国内GitHub加速访问工具-Fetch GitHub Hosts

一、工具介绍 Fetch GitHub Hosts是一款开源跨平台的国内GitHub加速访问工具&#xff0c;主要为解决研究及学习人员访问 Github 过慢或其他问题而提供的 Github Hosts 同步工具。 项目原理&#xff1a;是通过部署此项目本身的服务器来获取 github.com 的 hosts&#xff0c;而…...

编程日记 2023/8/5 11:54:59

Webpack5新手入门简单配置

1.初始化项目 yarn init -y 2.安装依赖 yarn add -D webpack5.75.0 webpack-cli5.0.0 3.新建index.js 说明&#xff1a;写入下面的一句话 console.log("hello webpack"); 4.执行命令 说明&#xff1a;如果没有安装webpack脚手架就不能执行yarn webpack&#xff08…...

编程日记 2023/8/5 11:53:58

基于ali-oss实现不同类型文件上传不同的bucket

基于ali-oss实现不同类型文件上传不同的bucket,并根据大小选择直接上传还是分片上传 1 配置OSS2 引入依赖3 上传核心代码4 文件回显 1 配置OSS 可以看阿里云文档 ps:记得配置跨域 2 引入依赖 pnpm install ali-oss -save3 上传核心代码 import OSS from "ali-oss"…...

编程日记 2023/8/5 11:52:57

域名校验？反爬界的掩耳盗铃！

这一集我们讲一个比较简单的域名校验&#xff0c;可能你没有听过这个名字&#xff0c;因为这个名字是我编的&#xff0c;那么它究竟是什么呢&#xff1f;又为什么说它是掩耳盗铃呢&#xff1f;我们来看看下面的案例&#xff1a; 必应搜索页隐藏内容虎嗅新闻跳转404 import re…...

编程日记 2023/8/5 11:51:55

Cesium 实战教程 - 调整 3dtiles 倾斜摄影大小

Cesium 实战教程 - 调整 3dtiles 倾斜摄影大小 核心代码完整代码在线示例 之前由于误解遇到一个特殊的需求&#xff1a;想要把三维球上叠加倾斜摄影进行自由放大缩小&#xff0c;跟随地图的缩放进行缩放。 后来经过搜索、尝试&#xff0c;终于实现了需求。 但是&#xff0c;后…...

编程日记 2023/8/5 11:50:52

python机器学习（七）决策树(下) 特征工程、字典特征、文本特征、决策树算法API、可视化、解决回归问题

决策树算法 特征工程-特征提取 特征提取就是将任意数据转换为可用于机器学习的数字特征。计算机无法直接识别字符串&#xff0c;将字符串转换为机器可以读懂的数字特征&#xff0c;才能让计算机理解该字符串(特征)表达的意义。 主要分为&#xff1a;字典特征提取(特征离散化)…...

编程日记 2023/8/5 11:49:49

RWA抵押：稳定币的“硬锚革命”如何撬动十万亿级金融新基建？

——波士顿咨询预言&#xff1a;当国债、房产上链&#xff0c;加密货币将迎来“信用时代”引言&#xff1a;稳定币的“信任危机”与RWA的破局之道2022年&#xff0c;LUNA/UST崩盘事件让全球加密市场陷入恐慌&#xff0c;算法稳定币的“无锚风险”暴露无遗。这场危机揭示了一个核…...

编程新知 2026/4/9 0:14:26

阻抗匹配原理与实战：射频电路设计核心技能

1. 阻抗匹配&#xff1a;电子工程师的必修课作为一名在射频电路设计领域摸爬滚打多年的工程师&#xff0c;我深知阻抗匹配这个看似基础的概念在实际工程中的重要性。记得刚入行时&#xff0c;就因为没处理好一个简单的天线匹配电路&#xff0c;导致整批样机射频性能不达标&…...

编程新知 2026/4/9 0:08:23

2025降AI率工具怎么选？7款热门产品实测优缺点

2025年各类降AI率工具质量参差不齐&#xff0c;不少学生、科研工作者都踩过“降不下来AI率、花了钱还耽误事”的坑&#xff0c;怎么选靠谱的降AIGC工具成了大家的普遍需求。本文将从实用维度出发&#xff0c;梳理2025年降Ai率工具测评&#xff1a; 7个爆款降AI率工具的优缺点总…...

编程新知 2026/4/8 23:23:39

别再傻傻翻文档了！用这个API一键获取Prometheus里所有监控指标（附Node Exporter实战清单）

高效掌握Prometheus监控指标的实战指南 当你第一次登录到公司的Prometheus监控系统&#xff0c;面对成千上万的指标名称&#xff0c;是否感到无从下手&#xff1f;作为运维工程师&#xff0c;我们经常需要在短时间内理解一个全新系统的监控状况&#xff0c;而直接翻阅Exporter…...

编程新知 2026/4/8 23:13:28

大白话讲清楚什么是LLM、Agent、Token、Skill

AI不再是一个聊天框。它已经进化成你的数字化同事。而你需要学会和它相处的"行话"。 引言&#xff1a;你的AI同事已经到岗 还记得2023年人们第一次用ChatGPT的时候吗&#xff1f;大家的反应是&#xff1a;"哇&#xff0c;AI能写诗和画画&#xff01;"然后就…...

编程新知 2026/4/8 23:03:14

D435i多传感器标定全流程：从驱动安装到生成标定板的完整Checklist

D435i多传感器标定全流程&#xff1a;从驱动安装到生成标定板的完整Checklist 第一次接触D435i多传感器标定时&#xff0c;我被各种驱动安装、参数配置和标定工具搞得晕头转向。作为一款集成了RGB摄像头、双目视觉和IMU的深度相机&#xff0c;D435i在机器人导航、三维重建等领域…...

编程新知 2026/4/8 22:56:46

微信小程序与H5深度交互：实现扫码功能的无缝传递与数据回传

1. 微信小程序与H5交互的核心技术解析 微信小程序与H5页面的交互一直是移动开发中的热门话题。在实际项目中&#xff0c;我们经常需要在小程序内嵌H5页面&#xff0c;同时又要调用小程序原生功能。这种混合开发模式既能利用H5的跨平台特性&#xff0c;又能享受小程序的原生能力…...

编程新知 2026/4/8 22:40:29

Kali渗透测试环境搭建：一站式部署Docker与ARL资产侦察灯塔

1. Kali渗透测试环境搭建的必要性 渗透测试是网络安全工作中不可或缺的一环&#xff0c;而Kali Linux作为最流行的渗透测试操作系统&#xff0c;内置了数百种安全工具。但原生Kali在实际使用中往往面临工具版本老旧、环境依赖冲突等问题。这时候Docker就派上了大用场 - 它能将每…...

编程新知 2026/4/8 22:14:02

从体素到三维模型：解析Volumetric Method在复杂场景重建中的核心算法

1. 什么是Volumetric Method&#xff1f;从体素到三维世界的魔法 第一次接触三维重建时&#xff0c;我被那些从照片变成立体模型的演示惊呆了。后来才知道&#xff0c;这背后藏着一种叫Volumetric Method的技术&#xff0c;它就像用乐高积木搭建世界——把空间切成无数小方块&a…...

编程新知 2026/4/8 21:33:23

DDR5 SDRAM中的DQS间隔振荡器：原理、应用与误差分析

1. DDR5 SDRAM中的DQS间隔振荡器是什么&#xff1f; 如果你拆开过电脑内存条&#xff0c;可能会注意到那些排列整齐的黑色芯片——这就是SDRAM。而DDR5作为最新一代的内存标准&#xff0c;在速度和能效上都比前代有了显著提升。但今天我们要聊的不是这些宏观特性&#xff0c;而…...

编程新知 2026/4/8 21:05:03