Web开发 -前端部分-CSS3新特性
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"…...
【基础篇】什么是SQL注入，如何防止？
什么是 SQL 注入，如何防止？ SQL 注入（SQL Injection）是一种常见的网络安全漏洞，它发生在 Web 应用程序中，当恶意用户在输入数据时，将恶意的 SQL 代码插入到输入中，从而导致应用程序…...
Swift语言的数据结构
Swift语言的数据结构 Swift是一种现代化的编程语言，它以安全性、性能和简洁性著称。尽管Swift通常被视为面向对象的语言，但它也支持函数式编程的特性，使得开发者可以以多种方式构建应用程序。在Swift中，数据结构是编程的基础&…...
牛客周赛 Round 77
题目链接：牛客周赛 Round 77 A. 时间表 tag：签到 B. 数独数组 tag：签到 Description：给定n个数，每个数的范围为1-9，问能否经过排列，使其每个长度为9的连续子数组都包含1-9这9个数字。 Sol…...
浅谈云端编辑器，分析其亮点与不足
浅谈云端编辑器，分析其亮点与不足 这个云端编辑器界面可以分为左侧题目筛选栏、中间题目描述与代码编辑区域、右侧AI提示功能三部分。以下是详细的分析： 1. 左侧题目筛选栏 层次结构清晰：左侧栏展示了一个层级结构，题目按主题分…...
web应用引入cookie机制的用途和cookie技术主要包括的内容
web应用引入cookie机制，用于用户跟踪。 （1）HTTP响应报文中的Cookie头行：set-Cookie （2）用户浏览器在本地存储、维护和管理的Cookie文件 （3）HTTP请求报文中的Cookie头行：…...
【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 使用…...
「2024·我的成长之路」：年终反思与展望
文章目录 1. 前言2.创作历程2.1 摆烂期2.2 转变期3. 上升期 2. 个人收获3.经验分享4. 展望未来 1. 前言 2025年1月16日，2024年博客之星入围公布，很荣幸获得了这次入围的机会。2024年对我个人是里程碑的一年，是意义非凡的一年，是充…...
C#PaddleOCRSharp使用
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;//预…...
【Excel】【VBA】Reaction超限点筛选与散点图可视化
【Excel】【VBA】Reaction超限点筛选与散点图可视化 功能概述 这段代码实现了以下功能： 从SAFE输出的结果worksheet通过datalink获取更新数据从指定工作表中读取数据检测超过阈值的数据点生成结果表格并添加格式化创建可视化散点图显示执行时间 流程图 #mermaid-…...
京华春梦，守岁这方烟火人间
文章目录 准备篇温度公共交通人流情况年货采购 文化体验传统庙会博物馆与展览烟花灯会祈福仪式民俗集市现代氛围其他活动 美食盛宴传统美食与特色小吃传统老字号京城新宠特色小吃街多元美食街 准备篇 温度 北京春节期间气温较低，室外通常在零下几度到零上几度之间…...
学Python的人…
学Python的人… 一、Python能干什么？ 1.爬虫：前几年，深度学习还没发展起来的时候，书店里Python就和爬虫挂钩，因为Python写爬虫确实方便。 2.数据分析：Python有各种的数据分析库可以方便使用࿰…...
WebSocket 和 Socket 的区别
一、协议层次和工作方式 1.1 ）Socket 1.1.1）Socket位于传输层，通常使用TCP或UDP协议 1.1.2）提供了一个通用的网络编程接口，允许应用程序通过它发送和接收数据 1.1.3）一般需要手动管理连接，错…...
学习ASP.NET Core的身份认证（基于JwtBearer的身份认证6）
重新创建WebApi项目，安装Microsoft.AspNetCore.Authentication.JwtBearer包，将之前JwtBearer测试项目中的初始化函数，jwt配置类、token生成类全部挪到项目中。 重新编写login函数，之前测试Cookie和Session认证时用的函数适合m…...
【SpringBoot】SpringBoot中分页插件（PageHelper）的使用
目录 1.分页概念 2.原生写法 3.PageHelper插件分页查询 3.1 介绍 3.2?使用 3.3 Page对象和PageInf对象 1.分页概念 用户查询的数据不可能一次性全部展示给用户（如果用户有一万条数据呢），而是分页展示给用户，这就是分页查询…...
【优选算法】4----盛最多水的容器
开始有点上强度了铁子们，这道算法题也是可以说很难理解的~ 想了好久才想明白~ ---------------------------------------begin--------------------------------------- 题目解析： 这一道题刚看题目，根本不知道在讲啥，但看到体积…...
EDI安全：2025年数据保护与隐私威胁应对策略
在数字化转型的浪潮中，电子数据交换（EDI）已成为企业间信息传递的核心基础设施。然而，随着数据规模的指数级增长和网络威胁的日益复杂化，EDI安全正面临前所未有的挑战。展望2025年，企业如何构建一套全面、高…...
代码随想录刷题day13|（链表篇）24.两两交换链表中的结点
目录 一、链表理论基础 二、思路及易错点 易错点 三、相关算法题目 四、错误代码分析 一、链表理论基础 代码随想录 (programmercarl.com) 二、思路及易错点 该题使用虚拟头结点正常进行模拟即可，有两个关键点，一是循环何时终止？终止…...
集群、分布式及微服务间的区别与联系
目录 单体架构介绍集群和分布式架构集群和分布式集群和分布式区别和联系 微服务架构的引入微服务带来的挑战 总结 单体架构介绍 早期很多创业公司或者传统企业会把业务的所有功能实现都打包在一个项目中，这种方式就称为单体架构 以我们都很熟悉的电商系统为例&…...
MySQL（4）多表查询
引言：为什么需要多表的查询？ A：提高效率，多线进行。 高内聚、低耦合。 一、多表查询的条件 1、错误的多表查询： SELECT employee_id,department_name FROM employees,departments; SELECT employee_id,department…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...
【kafka】Golang实现分布式Masscan任务调度系统
要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。 服务端程序： 从kafka消费者接收…...
stm32G473的flash模式是单bank还是双bank？
今天突然有人stm32G473的flash模式是单bank还是双bank？由于时间太久，我真忘记了。搜搜发现，还真有人和我一样。见下面的链接：https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
反向工程与模型迁移：打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...
逻辑回归：给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣（LeetCode） 思路 使用两个栈：一个存储重复次数，一个存储字符串 遍历输入字符串： 数字处理：遇到数字时，累积计算重复次数左括号处理：保存当前状态&a…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
Linux云原生安全：零信任架构与机密计算
Linux云原生安全：零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言：云原生安全的范式革命 随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...
Java入门学习详细版（一）
大家好，Java 学习是一个系统学习的过程，核心原则就是“理论 实践 坚持”，并且需循序渐进，不可过于着急，本篇文章推出的这份详细入门学习资料将带大家从零基础开始，逐步掌握 Java 的核心概念和编程技能。 …...
SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍： img 属性指定分区存放的 image 名称，指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件，则以 proj_name:binary_name 格式指定文件名， proj_name 为工程 名&…...