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

web前端之float布局与flex布局

news 2026/2/8 10:29:36

float布局 

<style>.nav {overflow: hidden;background-color: #6adfd0; /* 导航栏背景颜色 */}.nav a {float: left;display: block;text-align: center;padding: 14px 16px;text-decoration: none;color: #000000; /* 导航栏文字颜色 */}.nav a:hover {background-color: #21c2c7; /* 鼠标悬停时的背景颜色 */}</style><div class="nav"><a href="#">首页</a><a href="#">关于</a><a href="#">服务</a><a href="#">联系我们</a></div>

flex布局

<style>.nav {display: flex;background-color: #f8f8f8; /* 导航栏背景颜色 */}.nav a {flex: 1;display: flex;align-items: center;justify-content: center;padding: 14px 16px;text-decoration: none;color: #555555; /* 导航栏文字颜色 */}.nav a:hover {background-color: #dddddd; /* 鼠标悬停时的背景颜色 */}
</style><div class="nav"><a href="#">首页</a><a href="#">关于</a><a href="#">服务</a><a href="#">联系我们</a>
</div>

相关文章：

web前端之float布局与flex布局

float布局 <style>.nav {overflow: hidden;background-color: #6adfd0; /* 导航栏背景颜色 */}.nav a {float: left;display: block;text-align: center;padding: 14px 16px;text-decoration: none;color: #000000; /* 导航栏文字颜色 */}.nav a:hover {background-col…...

编程日记 2023/9/23 8:14:54

expected ‘，’ after expression in R【R错误】

出现如下错误&#xff1a; 在红色叉的位置&#xff0c;会有提示“expected . after expression”&#xff0c;咋一看出现红色叉的位置没有任何的错误&#xff0c;怎么会出现错误呢&#xff1f; 解决办法&#xff1a; 寻找这个代码第一次出现红色叉的位置&#xff0c;看其是否…...

编程日记 2023/9/23 8:09:44

算法|图论 2

LeetCode 695- 岛屿的最大面积 题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目描述&#xff1a;给你一个大小为 m x n 的二进制矩阵 grid 。 岛屿 是由一些相邻的 1 (代表土地) 构成的组合&#xff0c;这里的「相邻」要求…...

编程日记 2023/9/23 8:08:42

使用C#实现服务端与客户端的简陋聊天

服务端代码: using System; using System.Net.Sockets; using System.Net; using System.IO;//服务器程序 namespace CSharpStudy_09_21 {class Program{static void Main(string[] args){int port 8865;TcpClient tcpClient;//创建tcp对象IPAddress[] serverIp Dns.GetHost…...

编程日记 2023/9/23 8:07:40

生成式模型和判别式模型区别

目录 1.概念 2.定义​ 3.举例​ &#xff08;1&#xff09;例子 A​ &#xff08;2&#xff09;例子 B​ 4.特点 5.优缺点 6.代表算法 1.概念 首先我们需要明确&#xff0c;两种不同的模型都用于监督学习任务中。监督学习的任务就是从数据中学习一个模型&#xff0c;并用…...

编程日记 2023/9/23 8:00:32

【kafka实战】03 SpringBoot使用kafka生产者和消费者示例

本节主要介绍用SpringBoot进行开发时&#xff0c;使用kafka进行生产和消费 一、引入依赖 <dependencies><dependency><groupId>org.springframework.kafka</groupId><artifactId>spring-kafka</artifactId></dependency><depen…...

编程日记 2023/9/23 7:59:31

Only file and data URLs are supported by the default ESM loader

1.版本问题 说明&#xff1a;将node版本提高就可以了。 2.nvm 说明&#xff1a;如果不想重复安装node版本&#xff0c;那么可以参考本人的nvm文档. nvm版本控制工具_FOREVER-Q的博客-CSDN博客...

编程日记 2023/9/23 7:58:30

LeetCode01

LeetCode01 两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和 为目标值 target 的那两个整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你…...

编程日记 2023/9/23 7:56:28

计算机网络高频面试题集锦

问题1&#xff1a;谈一谈对OSI七层模型和TCP/IP四层模型的理解&#xff1f; 回答点&#xff1a;七层模型每层对应的作用及相关协议、为什么分层、为什么有TCP/IP四层模型 参考&#xff1a; 1、OSI七层参考模型是一个ISO组织所提出的一个标准参考分层模型&#xff0c;它按照数…...

编程日记 2023/9/23 7:55:26

Linux启动过程详解 Xmind导图笔记

参考大佬博客&#xff1a; 简要描述linux系统从开机到登陆界面的启动过程 Linux启动过程详解 Bootloader详解 来源&#xff1a;从BIOS开始画图了解Linux启动过程——老杨Linux...

编程日记 2023/9/23 7:53:23

Qt5开发及实例V2.0-第十七章-Qt版MyWord字处理软件

Qt5开发及实例V2.0-第十七章-Qt版MyWord字处理软件 第17章-Qt版MyWord字处理软件17.1 运行界面17.1.1 菜单设计基本操作17.1.2.MyWord系统菜单 17.2 工具栏设计17.2.1 与菜单对应的工具条17.2.2 附加功能的工具条 这段代码的作用是加载系统标准字号集&#xff0c;只要在主窗体构…...

编程日记 2023/9/23 7:52:21

机器视觉工程师们，常回家看看

我们在这个社会上扮演着多重角色&#xff0c;有时候我们很难平衡好这些角色之间的关系。 人们常言&#xff0c;积善成德&#xff0c;改变命运。善修者&#xff0c;懂得积累&#xff0c;懂得改变命运的重要性。 我曾年少不知父母之不易。一路依靠&#xff0c;一路成长。 所谓…...

编程日记 2023/9/23 7:51:19

网络隔离下实现的文件传输，现有的方式真的安全吗？

在当今的信息化时代&#xff0c;网络安全已经成为了各个企业和机构不可忽视的问题。为了保护内部数据和系统不受外部网络的攻击和泄露&#xff0c;一些涉及国家安全、商业机密、个人隐私等敏感信息的企业和机构&#xff0c;通常会对内外网进行隔离&#xff0c;即建立一个独立的…...

编程日记 2023/9/23 7:50:18

[医学图像知识]CT图和PET图的成像表现形式

1.CT图通常来说是单通道灰色图&#xff0c;用灰度值表示了结构对于x射线的吸收程度。 2.PET/SPECT图最初也是灰度图&#xff0c;用灰度值表示细胞的反射gama射线的程度&#xff0c;但是为了更好的观测不同细胞等的区别&#xff0c;通常将灰度图转化为了 伪彩色图像。 找个例子…...

编程日记 2023/9/23 7:49:16

聊聊wireshark的进阶使用功能 | 京东云技术团队

1. 前言 emmm&#xff0c;说起网络知识学习肯定离不来wireshark工具&#xff0c;这个工具能够帮助我们快速地定位网络问题以及帮助正在学习网络协议这块的知识的同学验证理论与实际的一大利器&#xff0c;平时更多的只是停留在初步的使用阶段。也是利用部门内部的网络兴趣小组…...

编程日记 2023/9/23 7:47:15

小米手机安装面具教程（Xiaomi手机获取root权限）

文章目录 1.Magisk中文网&#xff1a;2.某呼&#xff1a;3.最后一步打开cmd命令行输入的时候:4.Flash Boot 通包-Magisk&#xff08;Flash Boot通刷包&#xff09;5.小米Rom下载&#xff08;官方刷机包&#xff09;6.Magisk最新版本国内源下载 1.Magisk中文网&#xff1a; htt…...

编程日记 2023/9/23 7:46:14

DSU ON TREE

DSU ON TREE DSU&#xff1a;并查集 DSU ON TREE&#xff1a;树上启发式合并 我也不知道为啥树上并查集就是树上启发式合并 启发式合并的思想是每次把小的往大的合并&#xff0c;也就是最大化利用已有的答案&#xff08;大的数组不用清空&#xff0c;在原基础上加上小的即可&…...

编程日记 2023/9/23 7:45:13

Java“对象”

Java&#xff1a;PO、VO、BO、DO、DAO、DTO、POJO PO持久化对象&#xff08;Persistent Object&#xff09; PO是持久化对象&#xff0c;用于表示数据库中的实体或表的映射通常与数据库表的结构和字段对应PO的属性对应数据库表的字段&#xff0c;可以进行持久化操作&#xff0…...

编程日记 2023/9/23 7:44:12

vuepress+gitee免费搭建个人在线博客（无保留版）

文章目录 最终效果&#xff0c;一睹为快&#xff01;一、工具选型二、什么是VuePress三、准备工作3.1 node 安装3.2 Git安装3.3 Gitee账号注册 四、搭建步骤4.1 初始化VuePress4.2 安装VuePress4.3 初始化目录4.4 编写文章 五、部署到Gitee5.1 创建仓库5.2 个人空间地址设置4.3…...

编程日记 2023/9/23 7:43:11

Android 12.0 系统限制上网系列之iptables用IOemNetd实现app上网白名单的功能实现

1.前言 在12.0的系统rom定制化开发中，对于系统限制网络的使用，在system中netd网络这块的产品需要中，会要求设置app上网白名单的功能， liunx中iptables命令也是比较重要的，接下来就来在IOemNetd这块实现app上网白名单的的相关功能，就是在 系统中只能允许某个app上网，就是…...

编程日记 2023/9/23 7:41:07

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/2/4 16:15:43

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/11/28 2:51:33

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2026/1/24 15:08:45

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2026/2/6 7:30:33

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2026/1/21 12:29:04

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2026/1/29 14:27:00

MySQL：分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

编程新知 2026/2/2 18:52:32