web入门——导航栏

本专栏内容代码来自《响应式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; 使得内容紧贴窗口,不然会有空白间隙,可以自己实践下看看效果。

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

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

相关文章

【harbor】harbor的搭建与使用

harbor的搭建与使用 文章目录 harbor的搭建与使用1. harbor的下载2. 创建ssl证书3.harbor的配置3. docker修改4.启动harbor5.使用docker总结 1. harbor的下载 harbor仓库地址&#xff1a;https://github.com/goharbor/harbor harbor主要是go语言写的&#xff0c;但是我们dock…

金三银四面试题(二十七):适配器模式知多少?

什么是适配器模式 适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许将一个类的接口转换为客户期望的另一个接口。通过适配器&#xff0c;原本不兼容的接口可以一起工作&#xff0c;从而提高系统的灵活性和可扩展性。 关键元素&…

java中EQ、NE、GE、GT、LE、LT

关系运算符 包括EQ、NE、GE、GT、LE、LT几个&#xff0c;关系运算符返回的是真“True”或假“False”。 eq&#xff08;Equal to&#xff09; 等 运算符 &#xff0c;如果运算符两边相同则返回真&#xff0c;否则返回假&#xff1b; ne&#xff08;Not Equal to&#xff09; 不…

Linux/Brainfuck

Brainfuck Enumeration Nmap 扫描发现对外开放了 22&#xff0c;25&#xff0c;110&#xff0c;143&#xff0c;443 五个端口&#xff0c;使用 nmap 扫描端口详细信息 ┌──(kali㉿kali)-[~/vegetable/HTB/Insane] └─$ nmap -sC -sV -p 22,25,110,143,443 -oA nmap 10.10…

避坑指南!RK3588香橙派yolov5生成RKNN模型!

地址1&#xff0c;转换模型 地址2&#xff0c;转换模型 地址3&#xff0c;解决ppa 下载k2 本文目录 一、将.pt模型转为onnx模型文件。&#xff08;Windows&#xff09;二、将.onnx模型转为.rknn模型文件。&#xff08;Linux&#xff09;三、将.rknn模型部署到开发板RK3588中…

MyCat实现分库分表

两个集群 两个库 两个表 搭建数据库服务使用docker启动两个mysql 3506 3507连接MyCat创建两个数据源连接MyCat创建集群 mycat创建逻辑库MyCat创建全局表广播表创建分片表mycat逻辑库MyCat插入数据mycat查看数据物理库3506查看数据物理库3507查看数据 ER表创建ER表mycat插入数据…

射频识别技术RFID

射频识别技术RFID RFID介绍 射频识别&#xff1a; 英文名称是(Radio Frequency Identification)&#xff0c; 简称是“ RFID” 又称 无线射频识别&#xff0c; RFID是物联网的其中一种终端技术。 RFID是一种通信技术&#xff0c; 可通过无线电讯号耦合识别特定目标并读写相关…

Python使用Rembg库去除图片背景

一、引入Rembg库 #库地址 https://github.com/danielgatis/rembg#CPU使用 pip install rembg # for library pip install rembg[cli] # for library cli#GPU使用&#xff08;系统支持onnxruntime-gpu&#xff09; pip install rembg[gpu] # for library pip install rembg[gp…

基于ChatGLM+Langchain离线搭建本地知识库(免费)

目录 简介 服务部署 实现本地知识库 测试 番外 简介 ChatGLM-6B是清华大学发布的一个开源的中英双语对话机器人。基于 General Language Model (GLM) 架构&#xff0c;具有 62 亿参数。结合模型量化技术&#xff0c;用户可以在消费级的显卡上进行本地部署&#xff08;INT…

深入理解 Kolmogorov–Arnold Networks (KAN)

深入理解 Kolmogorov–Arnold Networks (KAN) 最近&#xff0c;一篇名为 KAN: Kolmogorov–Arnold Network 的论文在机器学习领域引起了广泛关注。这篇论文提出了一种全新的神经网络视角&#xff0c;并提出了一种可以替代现有多层感知器&#xff08;MLP&#xff09;的新方案。要…

19 分页:快速地址转换(TLB)

通过上一节中的知识&#xff0c;可以知道使用分页作为核心机制来实现虚拟内存是比较不错的&#xff0c;但是因为复杂的查询和转换逻辑&#xff0c;导致性能开销比较大。这里就要使用硬件来提升了&#xff0c;便出现了地址转换旁路缓冲存储器&#xff08;TLB&#xff09;&#x…

中职智慧校园建设内容规划

1. 渠道先行 1) IT根底设施渠道是支撑智慧学校使用体系所必需的运转环境&#xff0c;是首要需求建造的内容&#xff0c;但是要遵从有用准则&#xff0c;IT设备开展很快&#xff0c;更新很快&#xff0c;不要片面追求全而新&#xff1b; 2) 使用根底渠道是支撑智慧学校使用体系作…

动态多目标优化算法:基于自适应启动策略的混合交叉动态约束多目标优化算法(MC-DCMOEA)求解DCP1-DCP9(提供MATLAB代码)

一、动态多目标优化问题 1.1问题定义 1.2 动态支配关系定义 二、 基于自适应启动策略的混合交叉动态多目标优化算法 基于自适应启动策略的混合交叉动态多目标优化算法&#xff08;Mixture Crossover Dynamic Constrained Multi-objective Evolutionary Algorithm Based on Se…

Git系列:git tag 使用技巧

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

机器学习:葡萄酒品质预测

说明&#xff0c;此项目是我的期末大作业&#xff0c;包括了对数据集探索&#xff0c;预处理以及分类的各个详细过程与描述&#xff0c;代码简单&#xff0c;主要是一个分类项目的流程&#xff0c;并没有对模型进行深度研究&#xff0c;因此我写在这里。 目录 一、问题介绍 …

分层存储无法拯救 Kafka

01 引言 Apache Kafka 自诞生之日起&#xff0c;就以其卓越的设计和强大的功能&#xff0c;成为了流处理领域的标杆。它不仅定义了现代流处理架构&#xff0c;更以其独特的分布式日志抽象&#xff0c;为实时数据流的处理和分析提供了前所未有的能力。Kafka 的成功&#xff0…

nacos命名空间的配置

给微服务配置namespace 给微服务配置namespace只能通过修改配置来实现。 例如&#xff0c;修改order-service的application.yml文件&#xff1a; spring:cloud:nacos:server-addr: localhost:8848discovery:cluster-name: HZnamespace: 492a7d5d-237b-46a1-a99a-fa8e98e4b0f…

NodeMCU ESP8266 获取I2C从机地址

文章目录 前言关于地址位读写位程序总结前言 I2C总线上可以挂载很多的从设备,每个设备都会有一个自己唯一的一个地址; 关于地址位 通常地址位占7位数据,主设备如果需要向从机发送/接收数据,首先要发送对应从机的地址,然后会匹配总线上挂载的从机的地址; 读写位 该位…

windows编译opencv4.9

opencv很多人在windows上编译感觉特别麻烦&#xff0c;没有linux下方便&#xff0c;设定以下三点&#xff0c;我们几乎会无障碍。 1 安装cuda&#xff0c;cudnn 安装好cuda&#xff0c;cudnn&#xff0c;把cudnn的头文件&#xff0c;库等等拷贝到cuda的安装目录下面&#xff…