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

0x01 html和css

news 来源：原创 2025/9/14 6:21:53

css

对于三种css使用方式：

第一种：行内样式

<span style="color: grey;">2024年05月15日 20:07</span>

第二种：内部样式

<!DOCTYPE html>
<html lang="en">
<head>...<style>span{color: grey;}</style>...
</head>
<body><span>2024年05月15日 20:07</span>
</body>
</html>

第三种：外部样式

html代码部分，用link标签引入css文件，后面可以在body部分使用

<head>...<link rel="stylesheet" href="./css/new.css">
</head>
<body><span>2024年05月15日 20:07</span>
</body>

css代码部分

span {color: gray;
}

注意第三种方式css代码每个选择器之间不能有分号，也就是下面代码种span元素选择器和a元素选择器之间没有分号

span {color: rgb(178, 178, 178);
}
a {text-decoration: none;
}

三种方式在代码复用性方面来说，外部样式>内部样式>行内样式。

css选择器

元素选择器：选择页面上的标签

h1{...}

类选择器：选择页面上某一class的内容

.cls{...}

id选择器：选择页面上某一id属性的内容

#hid{...}

三类选择器的优先级，id选择器>类选择器>元素选择器

盒子模型

盒子模型的组成：

内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

盒子模型通常方便我们布局，有两个经常使用的标签，一个是div，一个是span

div
- 独占一行
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（默认定义的是content的高度和宽度）
span
- 一行可以显示多个
- 宽度高度默认由内容撑开
- 不可以设置宽高

div {width: 200px;height: 100px;background-color: #05a5d2;padding: 20px 20px 20px 20px;border: 20px solid #6bd5d7;margin: 30px 30px 30px 30px;
}

上面四个边框：顺序是上右下左（顺时针），也可以设置为两个，也可以设置为一个

margin：可以设置为auto，可以使盒子居中

#div1 {width: 400px;height: 300px;background-color: #ffff00;padding: 30px;box-sizing: border-box;border: 10px solid #ff0000;margin: 30px auto;}

flex布局

flex是一种用于按行或按列布局元素的一维布局方法。

存在即合理，flex是为了解决布局问题而存在的工具，flex能实现水平/垂直居中，自动分配子元素的对齐和居中，支持动态调整子元素，代码简洁。

flex中的两大重要概念：Flex容器、Flex项目

Flex容器：通过display:flex来声明，控制其内部子元素（flex项目）的排列方式

Flex项目：容器中的子元素自动成为flex项目，可以通过属性单独控制一个项目

<!-- 示例：外层 div 是容器，内部的 a 和 button 是项目 -->
<div class="container"> <!-- Flex 容器 --><a href="#">链接</a>  <!-- Flex 项目 --><button>按钮</button> <!-- Flex 项目 -->
</div>

flex容器核心属性：

主轴方向flex-direction

.container {flex-direction: row;       /* 默认→ 左到右 */flex-direction: row-reverse; /* ←右到左 */flex-direction: column;     /* ↓ 上到下 */flex-direction: column-reverse; /* ↑ 下到上 */
}

主轴对齐justify-content

.container {justify-content: flex-start;  /* 左对齐（默认） */justify-content: flex-end;    /* 右对齐 */justify-content: center;      /* 居中 */justify-content: space-between; /* 两端对齐，项目间隔相等 */justify-content: space-around;  /* 项目两侧间隔相等 */
}

换行方式

.container {flex-wrap: nowrap; /* 默认：不换行，压缩子元素宽度 */flex-wrap: wrap;   /* 换行：从上到下排列 */flex-wrap: wrap-reverse; /* 换行：从下到上 */
}

0x01 html和css

css 对于三种css使用方式： 第一种：行内样式 <span style"color: grey;">2024年05月15日 20:07</span>第二种：内部样式 <!DOCTYPE html> <html lang"en"> <head>...<style>span{…...

编程日记 2025/9/14 6:21:53

模型和数据集的平台之在Hugging Face上进行模型下载、上传以及创建专属Space

模型下载步骤： 注册Hugging Face平台 https://huggingface.co/ 新建一个hf_download_josn.py 文件 touch hf_download_josn.py 编写hf_download_josn.py文件 import os from huggingface_hub import hf_hub_download# 指定模型标识符 repo_id "inter…...

编程日记 2025/9/12 15:09:17

轮式机器人在复杂地形中如何选择合适的全局路径规划算法？

已思考完成收起嗯，用户问的是轮式机器人在复杂地形中如何选择合适的全局路径规划算法。首先，我需要理解复杂地形可能带来的挑战，比如崎岖的路面、动态障碍物、非结构化环境等等。轮式机器人在这里的运动控制需要考虑地形通过性、稳定性&…...

编程日记 2025/9/9 3:49:18

免费使用 DeepSeek API 教程及资源汇总

免费使用 DeepSeek API 教程及资源汇总一、DeepSeek API 资源汇总1.1 火山引擎1.2 百度千帆1.3 阿里百炼1.4 腾讯云二、其他平台2.1 华为云2.2 硅基流动三、总结 DeepSeek-R1 作为 2025 年初发布的推理大模型，凭借其卓越的逻辑推理能力和成本优势，迅速…...

编程日记 2025/9/12 14:22:32

文献汇总｜AI生成图像检测相关数据集汇总

前言：本博客汇总当前AI生成图像检测领域用到的数据集及相关链接。 ⚠️：除标注「未公开」数据集，其余数据集均已开源。目录 2020202220232024 2020 CNNSpot https://github.com/peterwang512/CNNDetection Testset: The zip file contains …...

编程日记 2025/9/13 23:17:31

C# 弃元的使用

总目录前言在C# 7.0及更高版本中，弃元（Discard）是一个新的语言特性，允许开发者在特定情况下忽略某些值。弃元用下划线 _ 作为占位符，明确表示忽略某个值，提升代码可读性一、弃元是什么？ 1.…...

编程日记 2025/9/11 0:44:08

蓝桥杯备考：贪心算法之矩阵消除游戏

这道题是牛客上的一道题，它呢和我们之前的排座位游戏非常之相似，但是，排座位问题选择行和列是不会改变元素的值的，这道题呢每每选一行都会把这行或者这列清零，所以我们的策略就是先用二进制把选择所有行的情况全部枚举…...

编程日记 2025/9/8 21:46:18

React面试（一）

文章目录 1.vue和react有什么异同2.useEffect中为什么不能使用异步3.useEffect和useLayoutEffect的区别4.react的生命周期5.state和prop的区别6.受控组件和非受控组件7.为什么react16之后不把事件挂载到document上了8.讲一下react的hoc，它可以用来做什么&#xff1f…...

编程日记 2025/9/14 4:16:55

《解锁AI密码，机器人精准感知环境不再是梦！》

在科技飞速发展的当下，人工智能与机器人技术的融合正深刻改变着世界。其中，人工智能助力机器人实现更精准的环境感知，已成为该领域的核心课题，吸引着全球科研人员与科技企业的目光。这不仅关乎机器人能否在复杂环境中高效执行任务…...

编程日记 2025/9/13 21:20:21

C/C++语言知识点二

1. 编程算法之“哨兵”思想哨兵思想是一种编程技巧，通过在数据结构的边界或特定位置放置一个特殊值（称为“哨兵”），来简化逻辑判断和提高代码效率。哨兵通常是一个标记值，用于指示某种条件或边界，从而避免…...

编程日记 2025/9/7 21:45:13

【SpringBoot】——分组校验、自定义注解、登入验证（集成redis）、属性配置方式、多环境开发系统学习知识

🎼个人主页：【Y小夜】 😎作者简介：一位双非学校的大三学生，编程爱好者， 专注于基础和实战分享，欢迎私信咨询！ 🎆入门专栏：🎇【MySQL&#xff0…...

编程日记 2025/9/11 1:25:49

【EB-03】 AUTOSAR builder与EB RTE集成

AUTOSAR builder与EB RTE集成 1. Import Arxml files to Tresos2. Run MultiTask Script3. Add Components3.1 Run EcuExtractCreator Script4. Mapping Component to Partitions5. Event Mapping/Runnables Mapping to Tasks6. Port Connect7. Run SvcAs_Trigger Script8. Ver…...

编程日记 2025/9/9 16:15:30

布署elfk-准备工作

建议申请5台机器部署elfk： filebeat(每台app)--> logstash(2台keepalived)--> elasticsearch(3台)--> kibana(部署es上)采集输出处理转发分布式存储展示 ELK中文社区: 搜索客，搜索人自己的社区官方…...

编程日记 2025/9/11 3:51:19

JVM垃圾回收器深度底层原理分析与知识体系构建

一、垃圾回收的基本步骤标记（Marking） 从GC Roots（如虚拟机栈、方法区静态变量、本地方法栈等）出发，遍历对象引用链，标记所有可达对象为存活对象，未被标记的则视为垃圾。此阶段需暂停用户线程&…...

编程日记 2025/9/10 1:10:08

Flutter系列教程之(5)——常用控件Widget的使用示例

目录 1.页面跳转 2.某个控件设置点击事件 3.AlertDialog对话框的使用 4.文本输入框 5.按钮圆角扁平按钮: 圆角悬浮按钮: 6.补充圆点 7.布局使用 Row控件左右对齐调整边距 1.页面跳转首先，先介绍一下页面跳转功能吧 Flutter使用 Navigator 进行页面…...

编程日记 2025/9/10 16:00:16

快手前端通用静态托管服务KFX演进历程：从崎岖土路到平坦高速

快手静态部署托管服务（KFX）历经四年发展，经历了三个阶段，一步步从勉强能行车的“崎岖土路”到现在多车道并行的“平坦高速”，这一转变极大地提升了资源利用率和效率，满足业务的实际需要。本文将带你了解其背…...

编程日记 2025/9/10 14:19:40

hackmyvm-buster

题目地址信息收集主机发现 ┌──(root㉿kali)-[/home/kali] └─# arp-scan -I eth1 192.168.56.0/24 Interface: eth1, type: EN10MB, MAC: 00:0c:29:34:da:f5, IPv4: 192.168.56.103 WARNING: Cannot open MAC/Vendor file ieee-oui.txt: Permission denied WARNING: C…...

编程日记 2025/9/10 9:40:39

React加TypeScript最新部署完整版

React TypeScript 全流程部署指南一、环境准备与项目初始化关于node.js及npm的安装请参见我的文章。 1.1 创建项目（React TypeScript） # 使用官方推荐脚手架（Vite 5.x） npx create-vitelatest my-app --template react-ts …...

编程日记 2025/9/9 12:02:39

DeepSeek-R1-Zero：基于基础模型的强化学习

注：此文章内容均节选自充电了么创始人，CEO兼CTO陈敬雷老师的新书《自然语言处理原理与实战》（人工智能科学与技术丛书）【陈敬雷编著】【清华大学出版社】文章目录 DeepSeek大模型技术系列四DeepSeek大模型技术系列四》DeepSeek-…...

编程日记 2025/9/10 14:05:51

python的列表和元组别再傻傻分不清啦

目录什么是下标： 正数索引：正数索引从左到右，从 0 开始。负数索引：负数索引从右到左，从 -1 开始。切片（slice）：除了单个元素，Python还支持通过切片访问序列的子集。…...

编程日记 2025/9/13 6:53:41

Fiddler在Windows下抓包Https

文章目录 1.Fiddler Classic 配置2.配置浏览器代理自动代理手动配置浏览器代理 3.抓取移动端 HTTPS 流量（可选）解决抓取 HTTPS 失败问题1.Fiddler证书过期了默认情况下，Fiddler 无法直接解密 HTTPS 流量。需要开启 HTTPS 解密： 1…...

编程日记 2025/9/13 21:42:05

【超详细】神经网络的可视化解释

《------往期经典推荐------》一、AI应用软件开发实战专栏【链接】项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...

编程日记 2025/9/7 12:47:13

LVS+Keepalived 高可用集群搭建

一、高可用集群： 1.什么是高可用集群： 高可用集群（High Availability Cluster）是以减少服务中断时间为目地的服务器集群技术它通过保护用户的业务程序对外不间断提供的服务，把因软件、硬件、人为造成的故障对业务的影响…...

编程日记 2025/9/10 10:58:34

使用git管理uniapp项目

1.本地管理 1. 在项目根目录中新建 .gitignore 忽略文件，并配置如下： # 忽略 node_modules 目录 /node_modules /unpackage/dist 2. 打开终端，切换到项目根目录中，运行如下的命令，初始化本地 Git 仓库&#xff1…...

编程日记 2025/9/12 3:02:06

回调函数的用法

回调函数的基本用法回调函数是一种被作为参数传递给另一个函数的函数，接收回调函数作为参数的函数在合适的时候会调用这个回调函数。回调函数为代码提供了更高的灵活性和可扩展性，下面为你详细介绍回调函数的基本用法。基本概念回调函数的核心在于函…...

编程日记 2025/9/12 21:09:35

样式垂直居中，谁才是王者

样式垂直居中，谁才是王者面试官常问如何让元素垂直居中，这其实是个经典的前端问题。实现垂直居中的方法多种多样，从传统的表格布局到现代的Flexbox、Grid布局，再到绝对定位配合transform，甚至是line-height技巧&am…...

编程日记 2025/9/9 20:20:26

五、Three.js顶点UV坐标、纹理贴图

一部分来自1. 创建纹理贴图 | Three.js中文网 ，一部分是自己的总结。一、创建纹理贴图注意：把一张图片贴在模型上就是纹理贴图 1、纹理加载器TextureLoader 注意：将图片加载到加载器中通过纹理贴图加载器TextureLoader的load()方法加…...

编程日记 2025/9/11 17:28:11

Linux Kernel Connection Tracking Table

在 Linux 内核中，连接跟踪表（Connection Tracking Table，简称 conntrack）是一个用于跟踪网络连接状态的核心组件。它主要由 Netfilter 框架管理，广泛应用于防火墙、NAT（网络地址转换）和负载均衡…...

编程日记 2025/9/10 22:56:32

NavVis VLX三维扫描：高层建筑数字化的革新力量【沪敖3D】

在三维激光扫描领域，楼梯结构因其复杂的空间形态和连续垂直移动的实际需求，一直是技术难点之一。利用NavVis VLX穿戴式移动扫描系统成功完成一栋34层建筑的高效扫描，其中楼梯部分的数据一遍成形且无任何分层或形变。本文将深入分析该项目的技…...

编程日记 2025/9/10 21:22:32

JVM生产环境问题定位与解决实战（二）：JConsole、VisualVM到MAT的高级应用

生产问题定位指南：几款必备的可视化工具引言在上一篇文章中，详细的介绍了JDK自带的一系列命令行工具，，如jps、jmap、jstat、jstack以及jcmd等，这些工具为排查和诊断Java虚拟机（JVM）问题提供…...

编程日记 2025/9/11 20:47:01

【深入理解JWT】从认证授权到网关安全

最近的项目学习中，在进行登陆模块的用户信息验证这一部分又用到了JWT的一些概念和相关知识，特在此写了这篇文章、方便各位笔者理解JWT相关概念目录先来理解JWT是什么？ 区分有状态认证和无状态认证有状态认证 VS 无状态认证 JWT令牌的…...

编程日记 2025/9/10 9:56:26

esp工程报错：something went wrong when trying to build the project esp-idf 一种解决办法

最近上手了正点原子esp32s3板子，环境采用的是vscodeesp-idf插件。导入了正点原子的demo测试，每次都报这个错误无法建造。也不是网上说的ninja error，不是中文路径的问题。在终端中查看，发现是缺少了git。（我这里没有…...

编程日记 2025/8/16 10:53:22

基于MATLAB红外弱小目标检测MPCM算法复现

摘要：本文详细介绍了一种基于人类视觉系统特性的红外弱小目标检测算法——Multiscale patch-based contrast measure (MPCM)。该算法通过增强目标与背景的对比度，有效检测红外图像中的弱小目标，并在MATLAB环境中进行了复现与实验验证。关键…...

编程日记 2025/9/12 5:33:00

java基础面试篇

目录 1.概念 1.1说一下Java的特点 1.2Java为什么是跨平台的？ 1.3 JVM、JDK、JRE三者关系？ 1.4为什么Java解释和编译都有？ 1.5 jvm是什么？ 1.6 编译型语言和解释型语言的区别？ 1.7 Python和Java区别是什么&#…...

编程日记 2025/9/9 1:12:16

Java Map实现类面试题

Java Map实现类面试题 HashMap Q1: HashMap的实现原理是什么？ HashMap基于哈希表实现，使用数组链表红黑树（Java 8）的数据结构。 public class HashMapPrincipleExample {// 模拟HashMap的基本结构public class SimpleHashMap&…...

编程日记 2025/9/11 16:05:51

Vue2+Three.js加载并展示一个三维模型（提供Gitee源码）

目录一、案例截图二、安装Three.js 三、代码实现四、Gitee源码一、案例截图二、安装Three.js npm install three 三、代码实现模型资源我是放在public文件夹下面的： 完整代码： <template><div><div ref"container&qu…...

编程日记 2025/9/12 7:01:25

Spark内存并行计算框架

spark核心概念 spark集群架构 spark集群安装部署 spark-shell的使用通过IDEA开发spark程序 1. Spark是什么 Apache Spark™ is a unified analytics engine for large-scale data processingspark是针对于大规模数据处理的统一分析引擎 spark是在Hadoop基础上的改进&…...

编程日记 2025/9/12 0:48:33

DeepSeek等LLM对网络安全行业的影响

大家好，我是AI拉呱，一个专注于人工智领域与网络安全方面的博主，现任资深算法研究员一职，兼职硕士研究生导师；热爱机器学习和深度学习算法应用，深耕大语言模型微调、量化、私域部署。曾获多次获得AI竞赛大奖，拥有多项发明专利和学术论文。对于AI算法有自己独特见解和经验…...

编程日记 2025/9/9 14:30:54

【QT】QLinearGradient 线性渐变类简单使用教程

目录 0.简介 1）qtDesigner中 2）实际执行 1.功能详述 3.举一反三的样式 0.简介 QLinearGradient 是 Qt 框架中的一个类，用于定义线性渐变效果（通过样式表设置）。它可以用来填充形状、背景或其他图形元素&#xff0…...

编程日记 2025/9/13 22:18:28

可狱可囚的爬虫系列课程 15：防盗链反爬虫的处理

一、防盗链了解防盗链是一种技术手段，主要用于防止其他网站通过直接链接的方式使用本网站的资源（如图片、文件等），从而节省带宽和服务器资源。当其他网站尝试直接链接到受保护的资源时，服务器会根据设置的规则判断请求…...

编程日记 2025/9/12 22:58:25

Vue组件：从使用到原理的深度解析

一、什么是Vue组件？ 组件是Vue的核心特性之一，它允许开发者将UI拆分为独立可复用的代码片段。每个组件本质上是一个Vue实例，具有自己的： 模板（Template） 数据（Data） 方法&#xf…...

编程日记 2025/9/7 17:20:55

SpringBoot接入DeepSeek（硅基流动版）+ 前端页面调试

文章目录前言正文一、项目环境二、项目代码2.1 pom.xml2.2 DeepSeekController.java2.3 启动类2.4 logback-spring.xml2.5 application.yaml2.6 index.html 三、页面调试3.1 参数提示3.2 开始请求3.3 手动断开前言作为一个Java程序员，了解前沿科技技术&#xff…...

编程日记 2025/9/12 7:54:55

Lua的table(表)

Lua表的基本概念 Lua中的表（table）是一种多功能数据结构，可以用作数组、字典、集合等。表是Lua中唯一的数据结构机制，其他数据结构如数组、列表、队列等都可以通过表来实现。表的实现 Lua的表由两部分组成： 数组部分…...

编程日记 2025/9/13 7:26:24

图片爬取案例

修改前的代码但是总显示“失败” 原因是修改之后的代码 import requests import os from urllib.parse import unquote# 原始URL url https://cn.bing.com/images/search?viewdetailV2&ccidTnImuvQ0&id5AE65CE4BE05EE7A79A73EEFA37578E87AE19421&thidOIP.TnI…...

编程日记 2025/9/9 17:11:31

【Python爬虫(90)】以Python爬虫为眼，洞察金融科技监管风云

【Python爬虫】专栏简介：本专栏是 Python 爬虫领域的集大成之作，共 100 章节。从 Python 基础语法、爬虫入门知识讲起，深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑，覆盖网页、图片、音频等各类数据爬取，还涉及数据处理与分析。无论是新手小白还是进阶开发…...

编程日记 2025/9/11 5:55:58

idea + Docker + 阿里镜像服务打包部署

一、下载docker desktop软件官网下载docker desktop，需要结合wsl使用启动成功的画面(如果不是这个画面例如一直处理start或者是stop需要重新启动，不行就重启电脑) 打包成功的镜像在这里，如果频繁打包会导致磁盘空间被占满，需…...

编程日记 2025/9/13 14:41:50

C#模拟退火算法

模拟退火算法：寻找最优解的神奇 “退火之旅” 在生活中，我们都见过铁匠打铁。铁匠把烧得通红的铁块不断捶打，然后慢慢冷却，这样打造出来的金属制品才更坚固耐用。模拟退火算法就从这个退火过程中获得灵感，在计算机的数…...

编程日记 2025/9/10 0:22:05

网络安全防御模型

目录 6.1 网络防御概述一、网络防御的意义二、被动防御技术和主动防御技术三、网络安全纵深防御体系四、主要防御技术 6.2 防火墙基础一、防火墙的基本概念二、防火墙的位置 1.防火墙的物理位置 2.防火墙的逻辑位置 3. 防火墙的不足三、防火墙技术类型四…...

编程日记 2025/9/8 3:55:28

APP自动化实战

APP自动化能做什么？ 请看示例（实现批量的视频，封面功能复用能力（实现效果参考抖音号：71403700901） APP自动化实战－操作剪映APP PO模式 1. PO模式介绍 PO（Page Object）…...

编程日记 2025/9/9 18:07:32

Unity基础——资源导入

一.资源来源 1.Assert Store（Unity资源官方网站） （1）用于制作游戏的优质资源 | Unity Asset Store （2）或则通过Unity项目打开 2.外部资源 （1）淘宝 （2）找外…...

编程日记 2025/9/8 21:11:16

css

css选择器

盒子模型

flex布局

相关文章：