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

Web开发 -前端部分-CSS3新特性

news 2025/5/29 5:18:30

1 CSS概述

2 CSS3私有前缀

3 CSS3的长度单位

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box1 {width: 200px;height: 200px;background-color: skyblue;}/* 视口宽度的百分比 viewport width *//* 视口高度的百分比 viewport height *//* 可以根据视口的变化而变化 */.box2 {width: 50vw;height: 20vh;background-color: blue;}/* vmax 取视口宽度 视口高度 两者之间的较大值作为标准 *//* vmin 取视口宽度 视口高度 两者之间的较小值作为标准 */</style>
</head><body><div class="box1">像素</div><div class="box2">vw和vh</div></body></html>

图形化展示：

4 新增颜色设置

5 新增选择器

6 新增盒子模型属性

1 box-sizing 怪异盒子模型

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {/* 内容的宽高 */width: 200px;height: 200px;background-color: skyblue;padding: 5px;border: 5px solid black;/* 将宽高改为整体的宽高 */box-sizing: border-box;}</style>
</head><body><div class="box1"></div>
</body></html>

图形化展示：

2 resize 调整盒子大小

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 200px;height: 200px;background-color: skyblue;overflow: auto;/* 水平方向上的长度调节 */resize: horizontal;/* 垂直方向上的长度调节 */resize: vertical;/* 两个方向都可以调节 */resize: both;}</style>
</head><body><div class="box1"></div>
</body></html>

3 box-shadow 盒子阴影

代码实现：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 300px;height: 300px;background-color: green;font-size: 40px;margin: 0 auto;margin-top: 100px;/* 参数：2个 水平 垂直 两个方向上的阴影 */box-shadow: 10px 10px;/* 参数：3个 水平 垂直 阴影颜色  */box-shadow: 10px 10px black;/* 参数：3个 水平 垂直 阴影模糊程度  */box-shadow: 10px 10px 10px;/* 参数：4个 水平 垂直 阴影模糊程度 阴影颜色 */box-shadow: 10px 10px 10px orange;/* 参数：5个 水平 垂直 阴影模糊程度 阴影外延 阴影颜色 */box-shadow: 10px 10px 10px 0px orange;/* 参数：6个 水平 垂直 阴影模糊程度 阴影外延 阴影颜色 内阴影*/box-shadow: 10px 10px 10px 0px orange inset;}</style></head><body><div class="box1">盒子阴影</div>
</body></html>

4 opacity 盒子不透明度

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 300px;height: 300px;background-color: orange;font-size: 40px;/* 0为完全透明 1为透明 */opacity: 0.3;}</style></head>
<body><div class="box1">盒子不透明性</div></body>
</html>

7 新增背景属性

1 bcakground-origin背景原点

代码实现:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.box1 {background-color: skyblue;width: 300px;height: 300px;margin: 0 auto;margin-top: 20px;padding: 50px;border: 50px dashed rgba(255, 0, 0, 0.4);font-size: 30px;background-image: url(../../HTML/QQ图片20240919174729.jpg);background-repeat: no-repeat;/* 从哪一个区域开始铺图片 */background-origin: padding-box; }
</style><body><div class="box1">背景</div></body></html>

2 background-clip 背景裁剪

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.box1 {background-color: skyblue;width: 300px;height: 300px;margin: 0 auto;margin-top: 20px;padding: 50px;border: 50px dashed rgba(255, 0, 0, 0.4);font-size: 30px;background-image: url(../../HTML/QQ图片20240919174729.jpg);background-repeat: no-repeat;/* 从哪一个区域开始铺图片 */background-origin: padding-box; /* 超出这个区域的内容不呈现 */background-clip: padding-box;}
</style><body><div class="box1">背景</div></body></html>

3 background-size 背景尺寸

代码实现：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 400px;height: 400px;border: 1px solid black;background-image: url(../../HTML/QQ图片20240919174729.jpg);background-repeat: no-repeat;/* 将图片完整的呈现出来 */background-size: contain;}</style></head><body><div class="box1">背景属性</div>
</body></html>

4 background-xxx 复合属性

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.box1 {width: 400px;height: 400px;margin: 0 auto;margin-top: 20px;padding: 50px;border: 50px dashed rgba(255, 0, 0, 0.4);font-size: 30px;/* background: 背景颜色 背景url 是否重复 位置/大小 原点 裁剪方式; */background: skyblue url(../../HTML/QQ图片20240919174729.jpg) no-repeat 10px 10px / 500px 500px border-box content-box;background-size: contain;}
</style><body><div class="box1">背景</div></body></html>

图形化展示：

5 多背景图

代码实现：

Web开发 -前端部分-CSS3新特性

1 CSS概述 2 CSS3私有前缀 3 CSS3的长度单位代码实现： <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…...

编程日记 2025/1/22 17:24:47

【基础篇】什么是SQL注入，如何防止？

什么是 SQL 注入，如何防止？ SQL 注入（SQL Injection）是一种常见的网络安全漏洞，它发生在 Web 应用程序中，当恶意用户在输入数据时，将恶意的 SQL 代码插入到输入中，从而导致应用程序…...

编程日记 2025/1/22 17:19:41

Swift语言的数据结构

Swift语言的数据结构 Swift是一种现代化的编程语言，它以安全性、性能和简洁性著称。尽管Swift通常被视为面向对象的语言，但它也支持函数式编程的特性，使得开发者可以以多种方式构建应用程序。在Swift中，数据结构是编程的基础&…...

编程日记 2025/1/22 17:18:38

牛客周赛 Round 77

题目链接：牛客周赛 Round 77 A. 时间表 tag：签到 B. 数独数组 tag：签到 Description：给定n个数，每个数的范围为1-9，问能否经过排列，使其每个长度为9的连续子数组都包含1-9这9个数字。 Sol…...

编程日记 2025/1/22 17:17:36

浅谈云端编辑器，分析其亮点与不足

浅谈云端编辑器，分析其亮点与不足这个云端编辑器界面可以分为左侧题目筛选栏、中间题目描述与代码编辑区域、右侧AI提示功能三部分。以下是详细的分析： 1. 左侧题目筛选栏层次结构清晰：左侧栏展示了一个层级结构，题目按主题分…...

编程日记 2025/1/22 17:11:28

web应用引入cookie机制的用途和cookie技术主要包括的内容

web应用引入cookie机制，用于用户跟踪。 （1）HTTP响应报文中的Cookie头行：set-Cookie （2）用户浏览器在本地存储、维护和管理的Cookie文件 （3）HTTP请求报文中的Cookie头行：…...

编程日记 2025/1/22 17:06:09

【HTML+CSS】使用HTML与后端技术连接数据库

目录一、概述 1.1 HTML前端 1.2 后端技术 1.3 数据库二、HTML表单示例三、PHP后端示例 3.1 连接数据库 3.2 接收数据并插入数据库四、安全性 4.1 防止SQL注入 4.2 数据验证与清洗五、优化 5.1 索引优化 5.2 查询优化六、现代Web开发中的最佳实践 6.1 使用…...

编程日记 2025/1/22 17:04:51

「2024·我的成长之路」：年终反思与展望

文章目录 1. 前言2.创作历程2.1 摆烂期2.2 转变期3. 上升期 2. 个人收获3.经验分享4. 展望未来 1. 前言 2025年1月16日，2024年博客之星入围公布，很荣幸获得了这次入围的机会。2024年对我个人是里程碑的一年，是意义非凡的一年，是充…...

编程日记 2025/1/22 16:57:41

using PaddleOCRSharp;namespace PaddleOCRSharpDemo {internal class Program{static void Main(string[] args){//中英文模型V3模型OCRModelConfig config null;//OCR参数OCRParameter oCRParameter new OCRParameter();oCRParameter.cpu_math_library_num_threads 6;//预…...

编程日记 2025/1/22 16:52:22

【Excel】【VBA】Reaction超限点筛选与散点图可视化

【Excel】【VBA】Reaction超限点筛选与散点图可视化功能概述这段代码实现了以下功能： 从SAFE输出的结果worksheet通过datalink获取更新数据从指定工作表中读取数据检测超过阈值的数据点生成结果表格并添加格式化创建可视化散点图显示执行时间流程图 #mermaid-…...

编程日记 2025/1/22 16:50:13

京华春梦，守岁这方烟火人间

文章目录准备篇温度公共交通人流情况年货采购文化体验传统庙会博物馆与展览烟花灯会祈福仪式民俗集市现代氛围其他活动美食盛宴传统美食与特色小吃传统老字号京城新宠特色小吃街多元美食街准备篇温度北京春节期间气温较低，室外通常在零下几度到零上几度之间…...

编程日记 2025/1/22 16:46:06

学Python的人…

学Python的人… 一、Python能干什么？ 1.爬虫：前几年，深度学习还没发展起来的时候，书店里Python就和爬虫挂钩，因为Python写爬虫确实方便。 2.数据分析：Python有各种的数据分析库可以方便使用&#xff0…...

编程日记 2025/1/22 16:38:57

WebSocket 和 Socket 的区别

一、协议层次和工作方式 1.1 ）Socket 1.1.1）Socket位于传输层，通常使用TCP或UDP协议 1.1.2）提供了一个通用的网络编程接口，允许应用程序通过它发送和接收数据 1.1.3）一般需要手动管理连接，错…...

编程日记 2025/1/22 16:35:53

学习ASP.NET Core的身份认证（基于JwtBearer的身份认证6）

重新创建WebApi项目，安装Microsoft.AspNetCore.Authentication.JwtBearer包，将之前JwtBearer测试项目中的初始化函数，jwt配置类、token生成类全部挪到项目中。重新编写login函数，之前测试Cookie和Session认证时用的函数适合m…...

编程日记 2025/1/22 16:34:50

【SpringBoot】SpringBoot中分页插件（PageHelper）的使用

目录 1.分页概念 2.原生写法 3.PageHelper插件分页查询 3.1 介绍 3.2?使用 3.3 Page对象和PageInf对象 1.分页概念用户查询的数据不可能一次性全部展示给用户（如果用户有一万条数据呢），而是分页展示给用户，这就是分页查询…...

编程日记 2025/1/22 16:33:48

【优选算法】4----盛最多水的容器

开始有点上强度了铁子们，这道算法题也是可以说很难理解的~ 想了好久才想明白~ ---------------------------------------begin--------------------------------------- 题目解析： 这一道题刚看题目，根本不知道在讲啥，但看到体积…...

编程日记 2025/1/22 16:32:46

EDI安全：2025年数据保护与隐私威胁应对策略

在数字化转型的浪潮中，电子数据交换（EDI）已成为企业间信息传递的核心基础设施。然而，随着数据规模的指数级增长和网络威胁的日益复杂化，EDI安全正面临前所未有的挑战。展望2025年，企业如何构建一套全面、高…...

编程日记 2025/1/22 16:30:44

代码随想录刷题day13|（链表篇）24.两两交换链表中的结点

目录一、链表理论基础二、思路及易错点易错点三、相关算法题目四、错误代码分析一、链表理论基础代码随想录 (programmercarl.com) 二、思路及易错点该题使用虚拟头结点正常进行模拟即可，有两个关键点，一是循环何时终止？终止…...

编程日记 2025/1/22 16:18:28

集群、分布式及微服务间的区别与联系

目录单体架构介绍集群和分布式架构集群和分布式集群和分布式区别和联系微服务架构的引入微服务带来的挑战总结单体架构介绍早期很多创业公司或者传统企业会把业务的所有功能实现都打包在一个项目中，这种方式就称为单体架构以我们都很熟悉的电商系统为例&…...

编程日记 2025/1/22 16:16:25

MySQL（4）多表查询

引言：为什么需要多表的查询？ A：提高效率，多线进行。高内聚、低耦合。一、多表查询的条件 1、错误的多表查询： SELECT employee_id,department_name FROM employees,departments; SELECT employee_id,department…...

编程日记 2025/1/22 16:14:16

web前端3--css

注意（本文一切代码一律是在vscode中书写） 1、书写位置 1、行内样式 //<标签名 style"样式声明"> <p style"color: red;">666</p> 2、内嵌样式 1、style标签里面写css代码 css与html之间分离 2、css属性:值…...

编程日记 2025/1/22 16:13:03

【Nacos】Nacos快速上手

Nacos快速上手项目环境介绍一、服务注册/服务发现1.引入Spring Cloud Alibaba依赖2.引入Nacos相关的依赖3.引入Load Balance依赖4.配置Nacos的地址二、修改远程调用代码三、测试四、启动多个服务，测试负载均衡五、可能出现的问题项目环境介绍请你确保你的服务器…...

编程日记 2025/1/22 16:12:00

C++otlv4连接sql serveer使用记录（注意点）

C使用otlv4在做插入时，有一些设计的坑需要注意插入数据： 当要给表中插入单个字符时，数据库表设计使用varchar(1)是合理的，但是otlv4一直报错char。后续查很久才知道，otlv4所写的绑定的字符数组的长度应该实际数组…...

编程日记 2025/1/22 16:05:29

在Linux中，如何查询已安装软件包的版本信息？

在Linux中，查询已安装软件包的版本信息可以使用多种方法，具体取决于你使用的Linux发行版及其所采用的包管理器。 RPM-based Linux系统（如Red Hat、CentOS、Dedora） 使用rpm命令查询所有已经安装的特定软件包及其版本&#xff1a…...

编程日记 2025/1/22 16:03:14

搜广推实习面经四

字节跳动TAC 广告算法一、回归任务的评价指标有哪些 1.均方误差（Mean Squared Error, MSE）/均方根误差（Root Mean Squared Error, RMSE） M S E 1 n ∑ i 1 n ( y i − y ^ i ) 2 MSE \frac{1}{n} \sum_{i1}^{n} (y_i - \ha…...

编程日记 2025/1/22 16:01:00

【Elasticsearch】inference ingest pipeline

Elasticsearch 的 Ingest Pipeline 功能允许你在数据索引之前对其进行预处理。通过使用 Ingest Pipeline，你可以执行各种数据转换和富化操作，包括使用机器学习模型进行推理（inference）。这在处理词嵌入、情感分析、图像识别等场景…...

编程日记 2025/1/22 15:58:54

AQS公平锁与非公平锁之源码解析

AQS加锁逻辑 ReentrantLock.lock public void lock() {sync.acquire(1);}AbstractQueuedSynchronizer#acquire public final void acquire(int arg) {if (!tryAcquire(arg) &&acquireQueued(addWaiter(Node.EXCLUSIVE), arg))selfInterrupt();}addWaiter就是将节点加入…...

编程日记 2025/1/22 15:55:44