html从零开始8：css3新特性、动画、媒体查询、雪碧图、字体图标【搬代码】
css3新特性
<!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></title><style>div{width: 200px;height: 200px;background-color: aqua;position: relative;border-radius: 20px;/*圆角属性，100%就变成圆形了*/left: 50px;top: 100px;}</style>
</head>
<body><div></div>
</body>
</html>
两个值
border-radius: 50px 5px;
阴影
<!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></title><style>div{width: 200px;height: 200px;background-color: aqua;position: relative;border-radius: 50px 5px;/*圆角属性*/left: 50px;top: 100px;}.box1{width: 200px;height: 200px;background-color: blueviolet;margin: 0 auto;/*将div放到中间，左右空袭平均分配*/box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);/*px也可以变成负数，那就是对角方向变成阴影*/}</style>
</head>
<body><div></div><div class="box1"></div>
</body>
</html>
动画
<!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></title><style>div{width: 200px;height: 200px;background-color: brown;animation: myAnmin 3s linear 0s infinite ;/* animation: name duration timing-function delay iteration-count direction fill-mode;*/}/*鼠标滑倒该元素上就触发*/div:hover{/* background-color: blanchedalmond; */animation-play-state: paused;}@keyframes myAnmin {0%{width: 100px;height: 200px;background-color: antiquewhite;}25%{width: 300px;height: 200px;background-color: aqua;}50%{width: 600px;height: 200px;background-color: bisque;}75%{width: 1000px;height: 200px;background-color: black;}100%{background-color: blue;}75%{width: 1000px;height: 200px;background-color: black;}50%{width: 600px;height: 200px;background-color: bisque;}25%{width: 300px;height: 200px;background-color: aqua;}}</style>
</head>
<body><div></div>
</body>
</html>
呼吸效果
<!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></title><style>.box{width: 500px;height: 400px;margin: 40px auto;background-color: cadetblue;border-radius: 5px;box-shadow: 0 1px 2px;animation: breathe 2.7s ease-in-out infinite alternate;}@keyframes breathe {0%{opacity: 0.2;box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);}50%{opacity: 0.5;box-shadow: 0 1px 2px rgba(18, 190, 84, 0.76);}100%{opacity: 1;box-shadow: 0 1px 30px rgba(59, 255, 255, 1);}}</style>
</head>
<body><div class="box"></div>
</body>
</html>
媒体查询
<!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></title><style>.box1{width: 300px;height: 300px;}@media screen and (max-width: 768px) {/*max-width: 768px屏幕宽度768手机*/.box1{background-color: aqua;}.p1{display: none;}.p2{display: none;}}@media screen and (min-width: 768px) and (max-width: 996px) {/*max-width: 768px屏幕宽度996平板*/.box1{background-color: blue;}.p1{display: none;}.p2{display: block;/*block显示，none不显示*/}}@media screen and (min-width:996px) {/*max-width: 768px屏幕宽度996电脑*/.box1{background-color: brown;}.p1{display: block;}.p2{display: block;/*block显示，none不显示*/}}</style>
</head>
<body><div class="box1"></div><p class="p1">嘎嘎嘎</p><p class="p2">哈哈哈</p>
</body>
</html>
图1
2
3
雪碧图
<!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></title><style>.icon{display: block;/*block把一个行内元素变化成一个块级元素；inline变成一个行内元素*/width: 70px;height: 70px;background-image: url(4.jpg);border: 1px solid red;background-position: -26px -30px;/*参数是xy轴*/}.icon2{display: block;/*block把一个行内元素变化成一个块级元素；inline变成一个行内元素*/width: 70px;height: 70px;background-image: url(4.jpg);border: 1px solid red;background-position: -26px -140px;/*参数是xy轴*/}</style>
</head>
<body><span class="icon"></span><span class="icon2"></span>
</body>
</html>
字体图标
下载可以使用的图标代码，iconfont.cn
<!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"><link rel="stylesheet" href="./font/iconfont.css"><title></title><style>.icon{display: block;/*block把一个行内元素变化成一个块级元素；inline变成一个行内元素*/width: 70px;height: 70px;background-image: url(4.jpg);border: 1px solid red;background-position: -26px -30px;/*参数是xy轴*/}.icon2{display: block;/*block把一个行内元素变化成一个块级元素；inline变成一个行内元素*/width: 70px;height: 70px;background-image: url(4.jpg);border: 1px solid red;background-position: -26px -140px;/*参数是xy轴*/}.xing{font-size: 40px;color: brown;/*color可以设置图标颜色*/}</style>
</head>
<body><span class="icon"></span><span class="icon2"></span><span class="iconfont icon-xing xing"></span>
</body>
</html>
相关文章：
html从零开始8：css3新特性、动画、媒体查询、雪碧图、字体图标【搬代码】
css3新特性 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, …...
HAL库 STM32驱动W25QXX驱动例程
HAL库 STM32驱动W25QXX驱动例程 📍驱动程序参考：《STM32CubeMX | 基于STM32使用HAL库W25Q128驱动程序》🔑 驱动方式：硬件SPI方式和SPI DMA方式。🔖适用于：W25X系列/Q系列芯片:W25Q80、W25Q16、W25Q32、 W25…...
C#入门及进阶|数组和集合（九）：Stack类
在C#中，通过类Stack来封装对栈的操作，使得对栈的操作变得非常简单和容易理解。 栈是按照“后进先出”的原则来操作元素。 栈集合常用的属性和方法: 属性说明Count获取 Stack 中包含的元素数。方法说明Peek返回位于栈顶部的对象但不将其移除。Po…...
算法训练day31贪心算法理论基础Leetcode455分发饼干376摆动序列53最大子序和
贪心算法理论基础 文章链接 代码随想录 (programmercarl.com) 说实话贪心算法并没有固定的套路。最好用的策略就是举反例，如果想不到反例，那么就试一试贪心吧。 面试中基本不会让面试者现场证明贪心的合理性，代码写出来跑过测试用例即可&…...
Java与JavaScript同源不同性
Java是目前编程领域使用非常广泛的编程语言，相较于JavaScript，Java更被人们熟知。很多Java程序员想学门脚本语言，一看JavaScript和Java这么像，很有亲切感，那干脆就学它了，这也间接的帮助了JavaScript的发展…...
【JavaEE】spring boot快速上手
SpringBoot快速上手 文章目录 SpringBoot快速上手Maven会出现的一个官方bug创建完项目之后常用的的三个功能依赖管理Maven仓库中央仓库本地仓库国内源配置私服 springboot项目创建什么是springspring boot项目的创建Hello Worldweb服务器 SpringMVC什么是SpringWebMVC什么是MVC…...
【数据结构】16 二叉树的定义，性质，存储结构（以及先序、后序、中序遍历）
二叉树 一个二叉树是一个有穷的结点集合。 它是由根节点和称为其左子树和右子树的两个不相交的二叉树组成的。 二叉树可具有以下5种形态。 性质 一个二叉树第i层的最大结点数为 2 i − 1 2^{i-1} 2i−1, i ≥ 1 i \geq 1 i≥1 每层最大结点可以对应完美二叉树（…...
GPT SOVITS项目 一分钟克隆 （文字输出）
步骤流程：（首先使用UVR 提取人声文件，然后按下面步骤进行） 注意这里提交的音频是参考的音频...
python34-Python列表和元组之加法
列表和元组支持加法运算，加法的和就是两个列表或元组所包含的元素的总和。 需要指出的是，列表只能和列表相加;元组只能和元组相加;元组不能直接和列表相加。 如下代码示范了元组和列表的加法运算。 # !/usr/bin/env python# -*- coding: utf-8 -*-# T…...
不做程序员了（转岗半年后对程序员岗位的思考）
不做程序员了（转岗半年后对程序员岗位的思考） 前言 好久没有更新了，已经久到CSDN的小编来问我为什么不更了。原因是我半年前转岗了，不再做程序员了，由程序员变为了产品经理。废话不多说，换个视角来给大家…...
DS：八大排序之直接插入排序、希尔排序和选择排序
创作不易，感谢三连支持！！ 一、排序的概念及运用 1.1 排序的概念 排序：所谓排序，就是使一串记录，按照其中的某个或某些关键字的大小，递增或递减的排列起 来的操作。稳定性&…...
【MySQL】-21 MySQL综合-8（MySQL默认值+MySQL非空约束+MySQL查看表中的约束）
MySQL默认值MySQL非空约束MySQL查看表中的约束 MySQL默认值在创建表时设置默认值约束在修改表MySQL默认值在创建表时设置默认值约束在修改表时添加默认值约束删除默认值约束删除默认值约束 MySQL非空约束在创建表时设置非空约束在修改表时添加非空约束删除非空约束 MySQL查看表…...
力扣hot3--并查集+哈希
第一想法是排个序然后遍历一遍，but时间复杂度就超啦 并查集居然与哈希结合了（） 已经好久没用过并查集了，，，我们用哈希表f_node中来记录原结点的父节点，其中key是原结点，value是父节点…...
微信网页版能够使用（会顶掉微信app的登陆）
一、文件结构 新建目录chrome新建icons，其中图片你自己找吧新建文件manifest.json新建文件wx-rules.json 二、文件内容 对应的png你们自己改下 1、manifest.json {"manifest_version": 3,"name": "wechat-need-web","author…...
会影响word文档中插入图片的分辨率吗？)
word软件中硬件图像加速有什么用处？禁用硬件图形加速(G)会影响word文档中插入图片的分辨率吗？
问题描述：word软件中硬件图像加速有什么用处？禁用硬件图形加速(G)会影响word文档中插入图片的分辨率吗？ 问题解答： 在 Microsoft Word 中，硬件图形加速主要用于提高图形元素的渲染速度和性能，特别是处理大…...
.NET Core MongoDB数据仓储和工作单元模式封装
前言 上一章我们把系统所需要的MongoDB集合设计好了，这一章我们的主要任务是使用.NET Core应用程序连接MongoDB并且封装MongoDB数据仓储和工作单元模式，因为本章内容涵盖的有点多关于仓储和工作单元的使用就放到下一章节中讲解了。仓储模式（R…...
lua：有关表访问的metamethod
针对在两种正常状态：表的不存在的域的查询和修改，Lua也提供了改变 tables的行为的方法。 index metamethod 我们可以通过index元方法来实现访问table内部不存在的域时人为操控返回数据。 比如以下测试代码： local set {1,2,3} setmetata…...
【MySQL】索引事务
MySQL索引事务 1. 索引1.1 概念1.2 作用1.3 使用场景1.4 使用1.5 案例 2. 事务2.2 事物的概念2.3 使用 3. 内容重点总结 1. 索引 1.1 概念 索引是一种特殊的文件，包含着对数据表里所有记录的引用指针。可以对表中的一列或多列创建索引， 并指定索引的类…...
ChatGPT重大升级：能自动记住用户的习惯和喜好，用户有权决定是否共享数据给OpenAI
OpenAI刚刚宣布了ChatGPT的一项激动人心的更新！ OpenAI在ChatGPT中新加了记忆功能和用户控制选项，这意味着GPT能够在与用户的互动中记住之前的对话内容，并利用这些信息在后续的交谈中提供更加相关和定制化的回答。 这一功能目前正处于测试阶…...
CSS设置盒子阴影
语法 box-shadow: *h-shadow v-shadow blur spread color* inset; 注释: box-shadow向框添加一个或多个阴影. 该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值、可选的颜色值及可选的inset关键词来规定。省略长度的值是0。 外阴影 a、给元素右边框和下边框加外阴影——把…...
DaVinci Developer与Configurator Pro联调指南：如何高效设计SWC并集成到ECU工程
DaVinci Developer与Configurator Pro联调实战：从SWC设计到ECU集成的全流程解析 在汽车电子控制单元（ECU）开发领域，工具链的协同效率直接决定了项目进度和质量。作为Vector公司AUTOSAR工具链的核心组件，DaVinci Develo…...
Windows平台QT BLE开发避坑指南：从环境搭建到稳定通信
1. Windows平台QT BLE开发环境搭建 在Windows平台上使用QT进行BLE开发，首先需要确保开发环境正确配置。我遇到过不少开发者因为环境问题卡在第一步，白白浪费好几天时间。这里分享几个关键点： 编译器选择是第一个坑。实测发现必须使用MSVC编译…...
安装与中文环境配置实战)
Halcon深度学习工具(DLT)安装与中文环境配置实战
1. Halcon DLT安装前的准备工作 第一次接触Halcon深度学习工具(DLT)时，我完全被各种专业术语搞晕了。后来才发现，只要做好前期准备，安装过程其实比想象中简单得多。首先需要确认的是你的Windows系统版本，DLT目前支持Windows 10和1…...
MemPrivacy：面向端云智能体的隐私保护个性化记忆管理框架
之前文章介绍过：89.2%攻击成功率！腾讯、字节研究发现 OpenClaw Agent 存在可利用结构性漏洞 今天介绍一个 MemPrivacy 项目，来自 MemTensor、荣耀和同济大学的联合团队。 他们的研究让云端智能体能正常"记住你"，但永远看…...
开源技能库构建指南：Git+Markdown+Docsify打造个人技术知识体系
1. 项目概述：一个开源技能库的诞生与价值在技术领域，尤其是软件开发、运维和数据分析等方向，我们每天都在与海量的工具、框架和命令打交道。时间一长，一个很现实的问题就摆在了面前：那些曾经花了好几个小时才调通的复杂…...
PowerInfer：基于热点神经元预测的LLM高性能推理引擎部署指南
1. 项目概述：当推理速度成为AI落地的瓶颈最近在折腾本地大模型推理的朋友，估计都绕不开一个核心痛点：速度。模型效果再好，生成一句话要等上十几秒，那种“卡顿感”足以劝退绝大多数想把它集成到实际应用里的开发者。我自…...
从仿生结构到步态算法：8自由度并联腿机器狗行走全解析
1. 8自由度并联腿机器狗的结构奥秘 第一次拆解机器狗时，我对着那些复杂的连杆结构发了半小时呆。直到发现它的腿部运动原理和公园里的跷跷板惊人相似——这个发现让我瞬间理解了8自由度并联腿的精妙之处。这种结构就像给机器人装上了"机械肌腱"࿰…...
【STC8H】GPIO模式深度解析：从准双向到推挽，如何精准控制外设
1. STC8H的GPIO模式全景解析 第一次接触STC8H的GPIO配置时，我被那个神秘的PxM0和PxM1寄存器搞得晕头转向。直到有一次调试I2C通讯失败，才发现是开漏模式配置错误。这次教训让我明白，理解GPIO的四种工作模式，就像掌握不同武器的使用…...
Python Reddit数据采集与分析实战：从API调用到舆情监控
1. 项目概述与核心价值最近在开源社区里，一个名为openshrug/reddit-intel的项目引起了我的注意。乍一看，这像是一个针对 Reddit 平台的数据抓取或分析工具，但深入探究后，我发现它的定位远不止于此。它更像是一个为开发者、数据分析…...
Linux权限继承与umask配置实践
Linux权限继承与umask配置实践很多协作目录问题并不是因为当前权限错了，而是因为新建文件的默认权限总是不符合预期。背后的核心变量之一就是 umask。中级阶段如果不理解默认权限是怎么生成的，就会陷入“每次都手工 chmod”的低效循环。一、默认权限不是…...