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

WEB前端-3.1

news 来源：原创 2025/5/6 21:59:55

CSS部分

什么是CSS

CSS的书写方式

网页引入CSS的方式

css的颜色、大小、边线

文本和字体样式

CSS选择器

属性选择器

伪类选择器

伪元素选择器

文本样式

display属性

背景样式

精灵图、雪碧图

元素定位

绝对定位

相对定位

浮动定位

浮动

CSS部分

什么是CSS

CSS（Cascading Style Sheet）：级联样式表、层叠样式表，w3c提供，主要用来装饰、装扮网页的样式，使得HTML具有更高的友好度。

CSS目前主要存在三个版本：CSS1.0、CSS2.0、CSS3.0，大家以3为标准进行学习。

CSS的书写方式

css都是以键值对的形式存在。

选择器 {键: 值;
}

div {color: red;width: 200px;height: 200px;
}

网页引入CSS的方式

网页引入css存在三种方式：

标签样式【style属性】
内联样式
外联样式

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css的初步使用</title><style>/* .box {color: green;} */</style><link rel="stylesheet" href="css/common.css">
</head>
<body><!-- ement语法，快速生成代码 --><!-- div#box*2>a[href="#"]*8>{这个是友情链接$}-->
<!-- 行内样式、标签样式 --><div style="color: red;">这是一个div标签</div>
<div class="box">这些都是div标签1</div><div class="box">这些都是div标签2</div><div class="box">这些都是div标签3</div><div class="box">这些都是div标签4</div><div class="box">这些都是div标签5</div><div class="box">这些都是div标签6</div><div class="box">这些都是div标签7</div><div class="box">这些都是div标签8</div><div class="box">这些都是div标签9</div><div class="box">这些都是div标签10</div>

</body>
</html>

common.css【存储路径，一般推荐使用/css/xxx.css】:

.box {color: aquamarine;
}

css的颜色、大小、边线

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {/* 颜色可以使用颜色单词 *//* color: pink; */
/* 三原色：红绿蓝 *//* color: #FF0000; *//* color: #f389a1; *//* color: #00F; */
/* color: rgb(255, 255, 255);color: rgb(0, 0, 0);color: rgb(127, 127, 127); */
/* color: rgb(255, 0, 255);color: rgb(0, 255, 255); */
/* color: rgba(255, 0, 0, 0.5);color: rgba(255, 0, 0, .9); */
/**注意：在css中，还存在很多种颜色的表示和调整方式，遇到了就查询掌握一下*//* color: hsl(hue, saturation, lightness); */
color: red;/* border: 1px solid green; *//* border-width: 5px;border-style: dotted;border-color: aquamarine; */
/* border-top: 1px solid green;border-bottom: 1px solid red; */
border: 1px solid #ccc;width: 300px;height: 50px;border-radius: 10px;
/* border-top-left-radius: 115px;border-top-right-radius: 115px;border-bottom-left-radius: 115px;border-bottom-left-radius: 115px; */
/* 盒子阴影效果 *//* box-shadow: 3px 3px 5px #999; */
/* box-shadow: 10px 10px 20px red; */
box-shadow: 10px 0px 10px #ccc,-10px 0px 10px #ccc,0px 10px 10px #ccc,0px -10px 10px #ccc;
text-align: center;line-height: 50px;
}</style>
</head>
<body><div class="box">这个是一个div</div>
</body>
</html>

文本和字体样式

/* 文字阴影 */
text-shadow: 3px 3px 5px rgb(235, 239, 5);

/* 字体大小 */
font-family: '楷体';
font-size: 20px;
/*  */
/* font-weight: 100; */
/* font-weight: bold; */
/* font-style: italic; */


/* 文本相关的 */
/* text-align: right; */
/* text-decoration: line-through;
text-decoration: underline;
text-decoration: overline; */

text-align: center;
line-height: 50px;

CSS选择器

CSS的选择器：通过特定的方式，显示CSS选择需要匹配中的html标签。

CSS选择器非常多：

基本选择器
- 标签选择器
- id选择器
- 类选择器
- 子代选择器
- 后代选择器
- 逗号选择器
- 通配符选择器
- 复合选择器

属性选择器

伪类选择器

css1.0开始，伪类选择器只有四个，是为超链接标签设计的，为了修改超链接标签的样式存在的。但是后期发现，这种效果不错，被广泛的使用在所有的可见标签中，同时，CSS也陆续扩展了大量好用的伪类选择器。

:link
:active
:visited
:hover

一定注意：这四个伪类选择器存在顺序。

:link 超链接点击之前

:visited 链接被访问过之后

:hover “悬停”：鼠标放到标签上的时候

:active “激活”：鼠标点击标签，但是不松手时

伪元素选择器

CSS中存在两个伪元素选择器，和伪类选择器非常的像

::before
::after

文本样式

display属性

display是CSS中重要的属性，是可以隐藏或者显示标签、修改标签的默认属性。

背景样式

精灵图、雪碧图

是前端开发中的特色图片，这种图片必须是png结尾的图片，另外这种一张图片中，存在很多个图片或者图标。在开发时，可以通过背景样式加上位置来选择对应的功能。

诞生的原理：网站要将外部资源和页面分离、加快了页面的加载速度、同上可以缓存外部资源，加快页面打开的速度。

但是如果小图标特别的多，这种情况会导致服务器请求加大。使用这种精灵图减轻服务器的请求压力。

元素定位

CSS提供了很多元素的定位方式，默认定位（静态定位）。

默认定位（静态定位）
绝对定位
相对定位
浮动定位

绝对定位

把标签固定到一个固定的地方，就被称为绝对定位。

绝对定位，一旦需要使用，则必须找到对应的参照定，将参照的标签设置为相对定位，“父相子绝”。

相对定位

用来给后代元素作绝对定位参照所用

浮动定位

常用来做滚动时不发生滚动的效果，如页面两侧的广告栏等。

浮动

浮动可以让块元素横向排列。

WEB前端-3.1

目录 CSS部分什么是CSS CSS的书写方式网页引入CSS的方式 css的颜色、大小、边线文本和字体样式 CSS选择器属性选择器伪类选择器伪元素选择器文本样式 display属性背景样式精灵图、雪碧图元素定位绝对定位相对定位浮动定位浮动 CSS部分什么是…...

编程日记 2025/5/6 21:59:55

灌区闸门自动化控制系统-精准渠道量测水-灌区现代化建设

项目背景本项目聚焦于黑龙江某一灌区的现代化改造工程，该灌区覆盖广阔，灌溉面积高达7.5万亩，地域上跨越6个乡镇及涵盖17个村庄。项目核心在于通过全面的信息化建设，强力推动节水灌溉措施的实施，旨在显著提升农业用水的…...

编程日记 2025/5/5 12:27:18

QT中引入OpenCV库总结（qmake方式和cmake方式）

文章目录前言opencv环境配置一、opencv库获取的两种方式二、qmake和cmake配置2.1、 qmake2.2、cmake2.2.1、引入opencv示例三、qt与opencv对应关系四、问题前言我的软件环境，写在前面 Windows10QT5.12.12VS2017OpenCV4.5.4 opencv环境配置一、opencv库获取…...

编程日记 2025/5/6 21:35:31

【DAPM杂谈之三】DAPM的初始化流程

本文主要分析DAPM的设计与实现内核的版本是：linux-5.15.164，下载链接：Linux内核下载主要讲解有关于DAPM相关的知识，会给出一些例程并分析内核如何去实现的 /**************************************************************…...

编程日记 2025/5/6 21:17:09

消息队列架构、选型、专有名词解释

私人博客传送门消息队列专有名词解释 | 魔筝炼药师 MQ选型 | 魔筝炼药师 MQ架构 | 魔筝炼药师 MQ顺序消息 | 魔筝炼药师...

编程日记 2025/5/6 20:59:51

Scala语言的计算机基础

Scala语言的计算机基础 Scala是一种现代的编程语言，兼具面向对象和函数式编程的特性，广泛应用于大数据处理、后端开发和分布式系统等领域。本文将围绕Scala语言的基础知识，包括其语法特点、数据结构、函数式编程思想、与Java的关系以及在实际…...

编程日记 2025/5/6 21:51:10

爬虫基础之爬取歌曲宝歌曲批量下载

声明：本案列仅供学习交流使用任何用于非法用途均与本作者无关需求分析: 网站:邓紫棋-mp3在线免费下载-歌曲宝-找歌就用歌曲宝-MP3音乐高品质在线免费下载 (gequbao.com) 爬取歌曲名歌曲实现歌手名称下载所有歌曲本案列所使用的模块 requests (发送…...

编程日记 2025/5/6 21:19:54

书说 MySQL 的悲观锁和乐观锁

什么是乐观锁？什么是悲观锁？ 悲观锁： 悲观锁是一种基于悲观态度的控制机制（最坏的程度想，每次并发一定会造成阻塞），用于防止数据冲突。它采取预防性措施，在修改数据之前将其锁定&a…...

编程日记 2025/5/4 2:11:25

Linux WEB漏洞

定义：Linux Web 漏洞是指在基于 Linux 操作系统的 Web 应用程序、Web 服务器软件或者相关的网络服务配置中存在的安全弱点。这些漏洞可能导致攻击者未经授权访问敏感信息、篡改网页内容、执行恶意代码，甚至完全控制服务器。常见类型及原理 SQL 注入漏…...

编程日记 2025/5/5 21:35:07

AIDD - 人工智能药物设计 -深度学习赋能脂质纳米颗粒设计，实现高效肺部基因递送

Nat. Biotechnol. | 深度学习赋能脂质纳米颗粒设计，实现高效肺部基因递送今天为大家介绍的是来自美国麻省理工和爱荷华大学卡弗医学院团队的一篇论文。可离子化脂质（ionizable lipids）是脂质纳米颗粒（lipid nanoparticles&#…...

编程日记 2025/5/6 21:10:04

Selenium 进行网页自动化操作的一个示例，绕过一些网站的自动化检测。python编程

初级教程 selenium 教程和视频教程s原理与安装 - 白月黑羽 https://www.byhy.net/auto/selenium/01/#chrome%201 Selenium 自动化环境安装_哔哩哔哩_bilibili Selenium 自动化环境安装是Python Selenium Web自动化 2024版 - 自动化测试爬虫的第2集视频，该合集共…...

编程日记 2025/5/6 21:19:55

力扣岛屿数量

从某个点找，不断找相邻位置。题目岛屿中被“0”隔开后 ，是每一小块状的“1”，本题在问有多少块。可以用dfs进行搜索，遍历每一个点，把每一个点的上下左右做搜索检测，当检测到就标记为“0”表示已访问过&a…...

编程日记 2025/5/6 21:12:45

【前端动效】HTML + CSS 实现打字机效果

目录 1. 效果展示 2. 思路分析 2.1 难点 2.2 实现思路 3. 代码实现 3.1 html部分 3.2 css部分 3.3 完整代码 4. 总结 1. 效果展示如图所示，这次带来的是一个有趣的“擦除”效果，也可以叫做打字机效果，其中一段文本从左到右逐渐从…...

编程日记 2025/5/6 21:01:07

期刊（中英），期刊分区，期刊所在数据库（中英），出版商区别和联系

目录对期刊、分区、数据库、出版商整体了解期刊（中英）期刊分区期刊所在数据库总结出版商对期刊、分区、数据库、出版商整体了解下图是我对这四部分的一个理解，其中期刊根据论文使用语言分为中英两种，期刊分区是用来评判论文质…...

编程日记 2025/5/6 13:12:25

LLM中temperature参数设置为0

LLM中 temperature参数设置为0 当模型的temperature参数设置为0时，通常有以下含义： 解码策略角度意味着采用贪婪解码（greedy decoding）策略。在每一步生成文本时，模型会选择概率最高的词元，从而使输出具…...

编程日记 2025/5/6 20:58:30

Javase 基础复习函数式接口 lambda表达式方法应用

目录案例1 案例2 1. 函数式接口 (Functional Interface) 特点： 示例： Java 8 引入了几个常用的函数式接口： 2. Lambda 表达式语法解析： 示例： 3. 方法引用 (Method References) 示例： 4. 方法…...

编程日记 2025/5/6 17:52:13

【39. 组合总和中等】

题目： 给你一个无重复元素的整数数组 candidates 和一个目标整数 target ，找出 candidates 中可以使数字和为目标数 target 的所有不同组合 ，并以列表形式返回。你可以按任意顺序返回这些组合。 candidates 中的同一个数字可以无限…...

编程日记 2025/5/2 3:41:36

UE小白学习日记

Level UE中的Level(关卡)和Unity中的Scene(场景)在概念和用途上非常相似,都是用来组织和管理3D环境的基本单位。让我为您详细对比一下: 相似之处: 它们都是游戏世界的容器,可以包含游戏对象、光照、地形等元素都支持场景/关卡的切换和加载都可以用来划分游戏内容,比如不同关…...

编程日记 2025/5/2 17:14:15

补充之前的一篇 MySQL 的索引为什么能加快查询速度

在之前的一篇文章中写了 MySQL 的索引为什么能加快查询速度，结合这两篇文章，相信你会对 MySQL 的索引有更深一步的了解首先我们要理解一件事，无论什么数据库，它的数据一定都是存储在硬盘中的，而硬盘和内存之间的读…...

编程日记 2025/5/6 9:58:53

一、goland环境配置 1.下载地址 https://golang.google.cn/dl/ 2.下载安装 3.添加环境变量 4.测试环境变量输出Hello,World! 说明环境配置成功二、goland安装 1.下载安装 https://www.jetbrains.com/go/download/download-thanks.html 2.激活使用 SFXUSA86FM-eyJsaWNlbnNl…...

编程日记 2025/5/6 8:09:40

GAN的应用

5、GAN的应用 GANs是一个强大的生成模型，它可以使用随机向量生成逼真的样本。我们既不需要知道明确的真实数据分布，也不需要任何数学假设。这些优点使得GANs被广泛应用于图像处理、计算机视觉、序列数据等领域。上图是基于GANs的实际应用场景对不同G…...

编程日记 2025/4/30 19:20:30

[石榴翻译] 维吾尔语音识别 + TTS语音合成

API网址丝路AI平台获取 Access token 接口地址：https://open.xjguoyu.cn/api/auth/oauth/token，请求方式：GET，POST Access token是调用服务API的凭证，调用服务API之前需要获取 token。每次成功获取 token 以后只有…...

编程日记 2025/5/6 12:11:00

PHP Filesystem：深入解析与实战应用

PHP Filesystem：深入解析与实战应用引言 PHP作为一种流行的服务器端编程语言，提供了强大的文件系统操作功能。本文将深入探讨PHP的Filesystem函数，这些函数允许开发者访问和操作服务器上的文件系统。无论是进行基本的文件操作，还是实现复杂的文件管理系统，PHP的Filesys…...

编程日记 2025/5/4 3:52:52

仓颉笔记——写一个简易的web服务并用浏览器打开

创建一个web服务端，同时创建一个客户端去读取这个服务端。也满足浏览器打开web的需求。直接上代码。 import net.http.* import std.time.* import std.sync.* import std.log.LogLevel// 1. 构建 Server 实例 let server ServerBuilder().addr("127.0.0.1&…...

编程日记 2025/4/24 16:16:09

yolov5+colab跑起来

教程1.先上传网盘再run 教程2.直接上传解压run 本人过程...

编程日记 2025/4/24 20:16:20

Windows下安装最新版的OpenSSL，并解决OpenSSL不是当前版本的问题，或者安装不正确的问题

文章目录 1. 文章引言1.1 需求描述1.2 简单介绍1.3 支持平台1.4 源码地址1.5 组件介绍2. 下载OpenSSL3. 安装OpenSSL5. 查看安装目录6. 解决OpenSSL的错误1. 文章引言 1.1 需求描述今天接到一需求，解密php加密后的数据，由于php使用 openssl_encrypt的方式加密，java也需要使…...

编程日记 2025/5/5 11:11:28

HTML5 网站模板

HTML5 网站模板参考 HTML5 Website Templates...

编程日记 2025/4/26 1:21:55

代码随想录算法训练营第三十二天|509.斐波那契数、70.爬楼梯、746.使用最小花费爬楼梯

目录 509.斐波那契数动态规划五部曲： 1.确定dp数组（dp table）以及下标的含义 2.确定递推公式 3.dp数组如何初始化 4.确定遍历顺序 5.举例推导dp数组 70.爬楼梯动态规划五部曲： 1.确定dp数组（dp table）…...

编程日记 2025/5/6 11:29:22

＜C++学习＞C++ Boost 数学与科学计算教程

C Boost 数学与科学计算教程 Boost 提供了强大的数学与科学计算功能模块，包括常用数学函数、特殊函数、矩阵运算、随机数生成器、统计分析工具等。这些工具覆盖了从基本数学操作到复杂科学计算的广泛场景。 1. Boost.Math 简介 Boost.Math 提供了丰富的数学功能&a…...

编程日记 2025/4/30 8:05:54

Spring Framework 5.3.x源码构建（jdk-1.8, gradle 7.5.1, idea2024.3）

1、下载jdk安装并配置环境变量（自行百度） https://www.oracle.com/java/technologies/downloads/#java8 2、下载spring-framework源码，切换分支到5.3.x https://github.com/spring-projects/spring-framework.git 备用地址 https://gitco…...

编程日记 2025/5/3 21:13:23

有心力场的两体问题

有心力场中的两体问题是经典力学中的重要研究对象，中心力场问题通常涉及两个相互作用的物体（例如行星与恒星、电子与原子核等）。为了简化分析，问题往往可以转化为一个等效的单体问题。这种方法大大提高了问题的可解性，是解决两体和多体问题的基础步骤之一。将两体问题简化…...

编程日记 2025/5/5 18:03:28

【Pandas】pandas Series rdiv

Pandas2.2 Series Binary operator functions 方法描述Series.add()用于对两个 Series 进行逐元素加法运算Series.sub()用于对两个 Series 进行逐元素减法运算Series.mul()用于对两个 Series 进行逐元素乘法运算Series.div()用于对两个 Series 进行逐元素除法运算Series.true…...

编程日记 2025/5/3 21:30:03

Openstack持久存储-Swift,Cinder,Manila三者之间的区别

总结不易，给个三连吧！！！ 补充： 文件共享存储服务Manila 在OpenStack生态系统中，Cinder和Manila分别提供了两种不同类型的存储服务，类似于传统的SAN（存储区域网络）和NAS&…...

编程日记 2025/4/29 15:44:52

单片机（MCU）-简单认识

简介： 内部集成了CPU，RAM，ROM，定时器，中断系统，通讯接口等一系列电脑的常用硬件功能。单片机的任务是信息采集（依靠传感器），处理（依靠CPU）&…...

编程日记 2025/4/27 4:16:22

Redis常见知识点

1、什么是缓存穿透？ 缓存穿透是指查询一定某个key是否存在，每次不存在都查询DB会把DB压垮。解决方案的话，我们通常都会用布隆过滤器来解决。布隆过滤器：在查找一个数是否在一个集合中使用的，通过对数组长度取模&a…...

编程日记 2025/5/3 11:59:15

SQL进阶实战技巧：统计相同时刻多地登陆的用户？

目录 0 问题描述 1 数据准备 2 代码实现 3 问题拓展 3.1 查询每个用户登录日期的最大空档期...

编程日记 2025/5/3 23:31:16

【数据库初阶】表的增删改语句

🎉博主首页： 有趣的中国人 🎉专栏首页： 数据库初阶 🎉其它专栏： C初阶 | C进阶 | 初阶数据结构亲爱的小伙伴们，大家好！在这篇文章中，我们将深入浅出地为大家讲解 MySQL…...

编程日记 2025/5/6 20:28:36

水水水水水水

为了拿推广卷，但不想把我原本完整的文章拆成零散的多篇，只能出此下策随便发一篇，认真写的都笔记专栏里网络技术：数字时代的基础设施在当今社会，网络技术无疑是推动现代生活和经济发展的核心动力之一。从简单的信息传…...

编程日记 2025/4/30 4:39:09

基于STM32的智能电表可视化设计：ESP8266、AT指令集、python后端Flask（代码示例）

一、项目概述随着智能家居的普及，智能电表作为家庭用电管理的重要工具，能够实时监测电流、电压及功率，并将数据传输至后台进行分析和可视化。本项目以STM32C8T6为核心，结合交流电压电流监测模块、ESP8266 Wi-Fi模块、OLED显示屏…...

编程日记 2025/5/6 3:14:34

SpringBoot的@Scheduled和@Schedules有什么区别

Scheduled 的详细解析参数详解 cron: 使用Cron表达式来指定复杂的调度模式。Cron表达式的格式如下： 秒（0-59）分钟（0-59）小时（0-23）日（1-31）月（1-12 或 JAN-…...

编程日记 2025/5/6 11:33:48

Qiskit快速编程探索（进阶篇）

五、量子电路模拟：探索量子世界的虚拟实验室 5.1 Aer模拟器：强大的模拟引擎在量子计算的探索旅程中，Aer模拟器作为Qiskit的核心组件之一，宛如一座功能强大的虚拟实验室，为开发者提供了在经典计算机上模拟量子电路运行的卓越能力。它打破了硬件条件的限制，使得研究者无…...

编程日记 2025/5/6 3:59:51

【漫话机器学习系列】043.提前停止训练（Early Stopping）

提前停止训练（Early Stopping） 提前停止（Early Stopping） 是一种在训练机器学习模型（尤其是深度学习模型）时常用的正则化技术，用于防止过拟合并提升模型的泛化能力。它通过监控验证集的性能&am…...

编程日记 2025/5/6 15:07:39

Linux(上）：基本知识篇

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、Linux初识1 Linux简介2 Linux学习环境配置（1）安装Linux（2）FinalShell远程连接Linux服务器二、Linux基础命令1 Linux目录结构，根目录 /2 Linux命令基础（1）什么是命令、命令行？（2）…...

编程日记 2025/5/1 1:31:03