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…...
AArch64内存管理：MAIR_EL3寄存器详解与应用
1. AArch64内存管理基础与MAIR_EL3寄存器定位 在Armv8-A/v9-A架构中，内存管理单元(MMU)通过多级页表实现虚拟地址到物理地址的转换。当处理器执行内存访问时，MMU会遍历页表条目(Translation Table Entry)，其中包含两个关键信息：目…...
Win10系统清理避坑指南：你的BAT脚本真的安全吗？盘点那些不能乱删的文件
Win10系统清理避坑指南：BAT脚本安全操作手册每次看到那些号称"一键清理系统垃圾"的BAT脚本在技术论坛被疯狂转发，我的工程师朋友老张就会忍不住摇头。上周他刚帮一位设计师修复了崩溃的Photoshop——原因正是某个清理脚本删除了Adobe的临时工作…...
基于ESP8266与MQTT的家庭水压自动控制系统设计与实现
1. 项目概述与核心需求解析家里水压不稳、供水时断时续，这大概是很多朋友都遇到过的烦心事。我所在的城市供水情况就很不理想，为了解决这个问题，我不得不自己动手，搭建了一套基于ESP8266微控制器的家庭水压增压与储水自动控制系统…...
phpMyAdmin CVE-2018-12613：从文件读取到RCE的伪协议利用链
1. 这个漏洞不是“能读文件”那么简单，而是后台权限的彻底失守phpMyAdmin 4.8.1里那个CVE-2018-12613，很多人扫到就报个“存在文件包含”，顺手贴个?targetphp://filter/convert.base64-encode/resource/etc/passwd截图完事。我去年在给一家教…...
如何快速掌握ncmdumpGUI：Windows平台网易云音乐NCM文件转换完整教程
如何快速掌握ncmdumpGUI：Windows平台网易云音乐NCM文件转换完整教程 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换，Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾经下载了网易云音乐的…...
实战指南：Happy Island Designer 的深度应用与优化
实战指南：Happy Island Designer 的深度应用与优化 【免费下载链接】HappyIslandDesigner "Happy Island Designer (Alpha)"，是一个在线工具，它允许用户设计和定制自己的岛屿。这个工具是受游戏《动物森友会》(Animal Crossing)启发…...
如何免费解锁AMD Ryzen处理器隐藏性能？SMUDebugTool完整使用指南
如何免费解锁AMD Ryzen处理器隐藏性能？SMUDebugTool完整使用指南 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: …...
如何精准识别高校院所与企业之间的潜在合作机会？
核心要点 传统“相亲角”式校企对接效率低下，根源在于科研供给与市场需求间的信息断层，必须转向以数据驱动、模型研判为核心的精准识别机制，才能将模糊的产学研线索转化为可落地的合作机会。精准识别合作机会的关键在于分拆为“供给侧”与“需…...
别再只会用top了！Linux网络实时监控神器iftop保姆级教程（含常用快捷键与过滤技巧）
从top到iftop：Linux网络流量监控的终极实战指南如果你已经熟练使用top命令监控系统资源，却对网络流量分析感到无从下手，那么iftop将成为你工具箱中不可或缺的神器。就像top之于CPU和内存，iftop专为实时网络监控而生，它…...
3步解决洛雪音乐播放问题：六音音源修复完整指南
3步解决洛雪音乐播放问题：六音音源修复完整指南 【免费下载链接】New_lxmusic_source 六音音源修复版 项目地址: https://gitcode.com/gh_mirrors/ne/New_lxmusic_source 你是否遇到过洛雪音乐升级后无法播放歌曲的困扰？点击播放按钮只有加载动画…...