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

web入门——导航栏

news 2025/11/10 3:19:17

本专栏内容代码来自《响应式web（HTML5+CSS3+Bootstrap）》教材。

导航栏

实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器的使用</title><style>.nav {width: 300px;}li {background-color: rgba(0, 0, 0,0.4);height: 35px;line-height: 35px;overflow: hidden;}li:nth-of-type(2n) {background-color: rgba(0,0,0,0.5);}li:hover {background: #0099E5;}a {text-decoration: none;display: block;color: #fff;height: 35px;padding: 0 38px;}</style>
</head>
<body><div class="nav"><ul><li><a href="#">a</a></li><li><a href="#">b</a></li><li><a href="#">c</a></li><li><a href="#">d</a></li><li><a href="#">e</a></li><li><a href="#">f</a></li></ul></div>
</body>
</html>

实现效果：
在这里插入图片描述
笔记：

  1. li 标签中
height：35px;
line-height:35px;

height属性和line-height属性设值相同，达到行中文字垂直居中的效果。
原理：

height: 这是一个基本的CSS属性，用于设置元素的高度。在你提供的例子中，height: 35px;意味着li元素的高度被设定为35像素。
line-height: 这个属性用于设置行之间的距离，也就是行的高度。在你提供的例子中，line-height: 35px;意味着li元素内文字的行高（即从一行文字的基线到下一行文字的基线的距离）被设定为35像素。这也间接决定了文字的垂直居中显示，换句话说，当一个容器的height和line-height被设定为相同的值时，这个容器内的文字会垂直居中。

  1. li:nth-of-type(n) : 这是一个CSS选择器，它会选择其父元素的第n个li元素。其中，n可以是数字，表达式或关键字 “even” 和 “odd”。
    例如，li:nth-of-type(2n) { background-color: rgba(0,0,0,0.5); }这行代码表示每个父元素的第2n个li元素（即偶数位置的li元素）的背景色设置为半透明的黑色.
  2. a标签中的display属性：
    display 属性在CSS中用于定义如何展示一个元素，或者说如何对元素进行布局。下面是一些常见的display属性值及其含义：
  • none： 元素不会被显示。
  • inline： 默认的属性值。将元素显示为内联元素，元素前后没有换行符。例如，span就是典型的内联元素。这类元素只接受左右的margin和padding，不接受宽高设置。
  • block： 元素会被展示为块级元素，元素前后会带有换行符。例如，div就是典型的块级元素。块级元素会独占一行，宽度默认拉伸到其父元素的宽度，可以接受所有的margin, padding, width及height设置。
  • inline-block： 行内块元素。元素会被展示为内联元素，同时也会具有块元素的属性。即可以与其他元素同一行内显示，同时可以接受宽高，margin，padding等属性。
  • flex： 元素变为弹性盒子模型。这是一种现代网页布局的方式，可以轻松的实现多种复杂布局。它的子元素也会按照特定的方式进行布局。
  • grid： 元素会变为网格容器，实现复杂的二维布局。
  • table、table-row、table-cell等： 用于使元素像HTML表格一样显示。

实现一个横向的网站导航栏

实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>横向导航栏</title><style>html body {width: 100%;height: 100%;margin: 0;padding: 0;}.nav ul {width: 100%;height: 50px;/* 也是为了紧贴窗口 */margin: 0;padding: 0;}.nav-item {/* 横向排列 */float: left;/* 因为是五个li，所以是20% */width: 20%;height: 100%;/* 去掉列表点 */list-style: none;background-color: rgba(0,0,0,0.4);/* 让文字水平居中、垂直居中 */text-align: center;line-height: 50px;}.nav-item:nth-of-type(2n) {background-color: rgba(0,0,0,0.5);}.nav-item:hover {background-color: #0099E5;}.nav-itema {color:white;text-decoration: none;}</style>
</head>
<body><div class="nav"><ul><!-- 设置类名有助于代码管理 --><li class="nav-item"><a href="#">web1</a></li> <li class="nav-item"><a href="#">web2</a></li><li class="nav-item"><a href="#">web3</a></li><li class="nav-item"><a href="#">we41</a></li><li class="nav-item"><a href="#">web5</a></li></ul></div>
</body>
</html>

实现效果：
在这里插入图片描述

根据上面的知识，我们自己编写实现一个网站的横向导航栏
笔记：

  1. 将html对象和body对象的height和width属性都设置为100%，是为了让后面的内容对象（如导航栏），可以占满整个窗口。
  2. body对象中的 margin:0; 和 padding: 0; 使得内容紧贴窗口，不然会有空白间隙，可以自己实践下看看效果。

相关文章：

web入门——导航栏

本专栏内容代码来自《响应式web&#xff08;HTML5CSS3Bootstrap&#xff09;》教材。 导航栏 实现代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content&…...

编程日记 2024/5/15 8:44:52

基于梯度流的扩散映射卡尔曼滤波算法的信号预处理matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 扩散映射&#xff08;Diffusion Maps&#xff09; 4.2 卡尔曼滤波 4.3 基于梯度流的扩散映射卡尔曼滤波&#xff08;GFDMKF&#xff09; 5.完整程序 1.程序功能描述 基于梯度流的扩散…...

编程日记 2024/5/15 8:41:48

Flutter 中的 ListTile 小部件：全面指南

Flutter 中的 ListTile 小部件&#xff1a;全面指南 在Flutter中&#xff0c;ListTile是一个用于快速创建列表项的组件&#xff0c;它通常用于ListView中&#xff0c;以展示包含文本、图标、开关、滑块等元素的行。ListTile不仅使得界面看起来美观&#xff0c;而且提供了一种简…...

编程日记 2024/5/15 8:39:44

Kubernetes——CNI网络组件

目录 一、Kubernetes三种接口 二、Kubernetes三种网络 三、VLAN与VXLAN 1.VLAN 2.VXLAN 3.区别 3.1作用不同 3.2vxlan支持更多的二层网络 3.3已有的网络路径利用效率更高 3.4防止物理交换机Mac表耗尽 3.5相对VLAN技术&#xff0c;VXLAN技术具有以下优势 四、CNI网…...

编程日记 2024/5/15 8:38:43

对关系型数据库管理系统的介绍

1.数据库的相关介绍 关系型数据库管理系统&#xff1a;&#xff08;英文简称&#xff1a;RDBMS&#xff09; 为我们提供了一种存储数据的特定格式&#xff0c;所谓的数据格式就是表&#xff0c; 在数据库中一张表就称为是一种关系. 在关系型数据库中表由两部分组成&#xf…...

编程日记 2024/5/15 8:37:41

Nodejs 第七十一章（libuv）

libuv 在Node.js中&#xff0c;libuv是作为其事件循环和异步I/O的核心组件而存在的。Node.js是构建在libuv之上的&#xff0c;它利用libuv来处理底层的异步操作&#xff0c;如文件I/O、网络通信和定时器等。 libuv在Node.js中扮演了以下几个重要角色&#xff1a; 事件循环&a…...

编程日记 2024/5/15 8:36:40

mysql实战题目练习

1、创建和管理数据库 创建一个名为school的数据库。 列出所有的数据库&#xff0c;并确认school数据库已经创建。 如果school数据库已经存在&#xff0c;删除它并重新创建。 mysql> create database school; Query OK, 1 row affected (0.01 sec)mysql> mysql> sh…...

编程日记 2024/5/15 8:35:38

Linux 案例命令使用操作总结

在信息技术日新月异的今天&#xff0c;Linux以其开源、稳定、高效的特性&#xff0c;逐渐成为了众多专业人士的首选操作系统。然而&#xff0c;关于Linux知识的学习&#xff0c;却常常陷入一个误区——许多人认为&#xff0c;掌握Linux就是死记硬背各种命令和参数。这种观念&am…...

编程日记 2024/5/15 8:34:36

图的拓扑序列（DFS2）

reference way&#xff1a;在图里面能延伸的越远&#xff0c;deep越大&#xff0c;说明它能从自己延伸很长到别的节点&#xff08;别的节点一定有入度&#xff09;&#xff0c;它越可能没有入度。 way&#xff1a;感觉和DFS1差不多&#xff0c;只是从远变成了多。 #include&l…...

编程日记 2024/5/15 8:31:33

2024年小学生古诗文大会备考：吃透历年真题和知识点（持续）

根据往年的安排&#xff0c;2024年小学生古诗文大会预计这个月就将启动。该如何备考2024年小学生古诗文大会呢&#xff1f;根据往期的经验&#xff0c;只要吃透这些真题和背后的知识点&#xff0c;通过上海小学生古诗文大会的初选&#xff08;初赛&#xff09;一点问题都没有。…...

编程日记 2024/5/15 8:30:32

SystemC学习使用记录

一、概述 对于复杂的片上系统&#xff0c;在进行RTL编码前&#xff0c;需进行深入的系统级仿真&#xff0c;以确认设计的体系结构是否恰当、总线是否能满足吞吐量和实现性要求以及存储器是否浪费&#xff0c;所进行的这些仿真要求在芯片的仿真模型上运行大量的软件&#xff0c…...

编程日记 2024/5/15 8:29:30

Github20K星开源团队协作工具：Zulip

Zulip&#xff1a;让团队协作的每一次交流&#xff0c;都精准高效。- 精选真开源&#xff0c;释放新价值。 概览 随着远程工作的兴起和团队协作的需求不断增加&#xff0c;群组聊天软件成为了日常工作中不可或缺的一部分。Zulip 是github上一个开源的团队协作工具&#xff0c;…...

编程日记 2024/5/15 8:26:26

C语言基础-标准库函数

C语言的标准库函数是由C语言标准库&#xff08;如C99、C11等&#xff09;提供的一系列预定义函数&#xff0c;这些函数通常用于执行常见的编程任务&#xff0c;如字符串操作、内存管理、数学计算、文件操作等。通过使用标准库函数&#xff0c;程序员可以更加高效地编写C语言程序…...

编程日记 2024/5/15 8:24:23

「51媒体」家居生活发布会，展览展会有哪些媒体邀约资源

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 家居生活类媒体包括多种类型&#xff0c;包括门户网站家居生活消费频道&#xff0c;专业的家居消费生活门户&#xff0c;以及行业媒体&#xff0c;平面媒体&#xff0c;KOL和意见领袖。下…...

编程日记 2024/5/15 8:23:22

力扣刷题--数组--第五天

昨天做了几道关于双指针求解的算法题&#xff0c;今天继续看相关的题目。 844. 比较含退格的字符串 给定 s 和 t 两个字符串&#xff0c;当它们分别被输入到空白的文本编辑器后&#xff0c;如果两者相等&#xff0c;返回 true 。# 代表退格字符。   注意&#xff1a;如果对空…...

编程日记 2024/5/15 8:21:20

kafka学习笔记04（小滴课堂）

Kafka的producer生产者发送到Broker分区策略讲解 Kafka核心API模块-producer API讲解实战 代码&#xff1a; ProducerRecord介绍和key的作用 Kafka核心API模块-producerAPI回调函数实战 producer生产者发送指定分区实战 我们设置5个分区。 我们指定分区。 重新指定一个分区&am…...

编程日记 2024/5/15 8:20:19

三菱ＦＸ３Ｕ－４ＡＤ模拟量电压输入采集实例

硬件&#xff1a;&#xff30;&#xff2c;&#xff23;模块　&#xff26;&#xff38;&#xff13;&#xff27;&#xff21;-&#xff12;&#xff14;&#xff2d;&#xff34;　&#xff1b;&#xff21;&#xff0f;&#xff24;模块&#xff26;&#xff38;&#xff13…...

编程日记 2024/5/15 8:18:17

OpenAI推出DALL·E 3识别器、媒体管理器

5月8日&#xff0c;OpenAI在官网宣布&#xff0c;将推出面向其文生图模型DALLE 3 的内容识别器&#xff0c;以及一个媒体管理器。 随着ChatGPT、DALLE 3等生成式AI产品被大量应用在实际业务中&#xff0c;人们越来越难分辨AI和人类创建内容的区别&#xff0c;这个识别器可以帮…...

编程日记 2024/5/15 8:16:15

Spring Boot 整合讯飞星火3.5通过接口Api接口实现聊天功能（首发）复制粘贴即可使用，后续更新WebSocket实现聊天功能

程序员必备网站&#xff1a; 天梦星服务平台 (tmxkj.top)https://tmxkj.top/#/ 1.pom.xml <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.72</version></dependency><depen…...

编程日记 2024/5/15 8:15:14

信息系统项目管理师——十大管理过程输入、工具和技术、输出（论文篇）一

一、项目整合管理 制定项目章程 在项目管理中&#xff0c;制定项目章程是一个关键的初始过程&#xff0c;它正式授权项目的开始并为项目设定高层次的方向。项目章程的编制涉及特定的输入、采用的工具和技术&#xff0c;以及产生的输出。以下是这些方面的详细说明&#xff1a;…...

编程日记 2024/5/15 8:14:13

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/11/8 12:28:27

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/11/8 22:34:22

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2025/11/8 7:31:37

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/11/8 8:17:50

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/11/8 10:30:28

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/11/7 19:35:25

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2025/11/7 19:58:13

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2025/11/7 7:56:22

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

编程新知 2025/10/31 20:37:10

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/7/20 6:08:51