前端CSS3学习
学习菜鸟教程
火狐-moz- 谷歌 Safari -webkit- 前面都加这个,可能才生效
边框
border: 1px solid #ddd
粗细 样式 样色 经常和border-radius
一块用
border-radius: 50px 20px
第一个左右 第二个右左 border-top-left-radius
…
box-shadow: 10px 5px 10px 0 #888888
第一个右边 第二个下边 第三个模糊半径 第四个扩散半径 第五个颜色
border-image:url(./logo.png) 10 60 round
10
-上下切片数量 60
左右 round
循环 stretch
单张拉伸
背景
背景图像边界框的相对位置 border-box
背景图像的相对位置的内容框 content-box
多个背景图片写法
background-image: url(img_flwr.gif), url(paper.gif);background-position: right bottom, left top;background-repeat: no-repeat, repeat;
background-clip
限制背景从哪开始,content-box padding-box
渐变
必须至少定义两种颜色节点
background-image: linear-gradient(#e66465, #9198e5);
从上到下
background-image: linear-gradient(to right, red , yellow);
从左到右
background-image: linear-gradient(to bottom right, red, yellow);
左上角到右下角
如果使用多个颜色,就在后面加就行了
使用角度,就把里面的to xxx
换成,45deg
这样的,看下面的箭头,指向哪朝哪变
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
透明度,0
透明,1
不透明
文本属性
text-overflow:ellipsis
和 text-overflow:clip
字体
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
2D和3D转换
transform:translate(50px,100px);
多列
column-count: 3
三列
column-gap: 40px
两列之间的间隙是40px
column-rule:1px solid lightblue
边框宽度 样式 和颜色
column-rule-style:solid
列与列之间的边框样式
column-rule-width:1px
边框宽度
column-rule-color: red
边框颜色
column-span: all;
在一个文本内容分多列显示的区域内,有一个标题元素你希望它完整地显示在所有列之上,不被拆分成多列显示,就可以给这个标题元素设置 column-span: all;
样式,使得标题更加醒目、整体性更强。
column-width:100px;
指定列的宽度
调整尺寸 Resize
resize:both;
自己拉动
overflow:auto;
是否能滚动
方框大小调整(Box Sizing)
box-sizing:border-box;
高度和宽度应用于元素的所有部分: 内容、内边距和边框
box-sizing:content-box;
高度和宽度只应用于元素的内容
也就是说,同等情况下,content-box
比 border-box
要宽
外形修饰(outline-offset )
border:2px solid black;outline:2px solid red;outline-offset:15px; 两个圈的间距 在border外面,在加一个外圈
图片
img src="paris.jpg" alt="Paris" width="400" height="300" alt
是超链接
块级元素,容纳块级元素和行级元素
所有行级元素,只有变成块级元素,才能容纳行级元素哦
用到 display: block;
从左到右排列,不会独占一行,除非空间不够换行
还有dispaly: inline-block
这个好用:行级元素特性保留、块级元素特性增加
两个差别图
有的行级元素,没有固定的display
的固定值,比如a标签,默认情况下其宽度是由内容撑开的。当不用inline-block
的时候,就不能padding
值了,像button
和input
都有display
的默认值inline-block
所有行级元素
span
:一个通用的内联容器
a
:超链接
img
:用于在网页中插入图像
b
:使文本加粗
i
:使文本倾斜
em
:强调文本,通常也表现为斜体
strong
:加强语气,通常表现为加粗
sub
:定义下标文本 sup
:定义上标文本
其他的还有 button、input、select
所有块级元素
div
太常见了
p
:段落
h1-h6
:标题
ul
和ol
:无需列表 有序列表 li元素表示
from
:表单
table
:表格
nav
:专门用于定义导航链接的区域
section
:用于对文档进行分区
两个span
不会换行
两个div
会换行
响应式图片
max-width: 100%;
height: auto;
下面这个图片会随着页面的大小响应式缩放 放大的哦
图片文本
.文本左上角 {position: absolute;top: 8px;left: 16px;font-size: 18px;
}
.img { width: 100%;height: auto;opacity: 0.3;
}
图片滤镜
filter: grayscale(100%);
其他效果百度下,还有黑白的 阴影的
font-size 还管按钮大小
鼠标悬停按钮
.button1:hover {transition-duration: 4s; 颜色变化持续时间cursor: pointer; 鼠标悬停小手 background-color: #4CAF50; 鼠标放上去的颜色color: white; 完全显示后,里面字体的颜色
}
鼠标悬停出现阴影
.button2:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}.disabled {opacity: 0.6; 1最大,完全不透明cursor: not-allowed; 禁用
}
动画
transition: 0.5s;
表示动画
定位
position: absolute;
绝对定位,不占空间,参考离他最近的上层定位如relative
、absolute
或fixed
,没有就根据浏览器窗口定位
position: relative;
相对定位。 相对于自身来说,例如,设置position: relative; left: 10px;
该元素会在自身的基础上向左偏移 10
像素
实现上面gif
的效果
*padding-right
和 right
的区别*
padding-right
是会影响页面布局的。right
一般和position: absolute;
或position: relative;
用,right
属性是用来确定元素的右侧边缘与定位参考点
按钮动画 - 波纹效果
这个gif
,真实的效果应该是,先收,在还原。收在0s
内,所有没感觉
渲染的时候,先after,把阴影放的远远的,完全透明看不见。
点击的时候,收回来,padding
和magin
都是0
,transition:0s
所有你没感觉 。 如果你把transition
变成1
就能看到一个浅到深的效果,因为,opacity是由0过渡到1
松开鼠标 还回去。 opacity是由1过渡到0 由深入浅的动画效果
.button:after
是一个伪元素。当你没有显式地设置它的宽度和高度时,它的尺寸会由其内容和内边距padding
、外边距margin
等属性来决定
元素非激活的状态下,有默认值。 激活结束后会还原
.button:active {background-color: #3e8e41;box-shadow: 0 5px #666; 像下5个像素,元素向下移动4个 就有按压的效果了transform: translateY(4px);
}
:active:after
可能不会产生任何效果,如果没有对应的伪元素来应用样式
块级元素,另起一行。 行级元素在一行
弹性盒子
display: flex;
把块级元素 变成行级元素 比如,两个div
用flex
就不会换行了
其他的还有
display: inline;
把行级元素 变成块级。 span换行
display: block;
把块级元素变成行级。 div在一行
dispaly: inline-block
变成行-块级属性
direction: rtl;
direction
属性为 rtl (right-to-left)
,弹性子元素的排列方式也会改变
flex-direction
row
-默认的 左对齐 row-reverse
右对齐 和左对齐相反方向
column
- 上下排列 column-reserve
下上排列
align-items
侧轴 管竖直方向
stretch
如果没有设置height
值,会拉满所在行的尺寸,受到min/max-height
限制
flex-start
默认的
flex-end
center
justify-content
内容对齐 主轴 管水平方向
行内轴,是文本书写方向的轴
flex-wrap
属性
用于指定弹性盒子的子元素换行方式
nowrap
只能在一行,会压缩,可能溢出
wrap
换行,超出的
wrap-reverse
反转
align-content
用于修改 flex-wrap 属性的行为
弹性子元素排序
order: -1
数值小的排在前面。可以为负值
align-self
元素自身在竖直方向上的对齐方式
flex
属性用于指定弹性子元素如何分配空间
多媒体查询
screen
用于电脑屏幕,平板,智能手机等
@media screen and (max-width: 480px) { body { 浏览器窗口宽度小于480,背景颜色变红色background-color: red; }div.example { 浏览器窗口宽度小于480,隐藏某原色 display: none; }
}
大于480右侧菜单浮动到右侧,小于在下面
动态添加文本或图片
网格布局
display
属性设置为 grid
或 inline-grid
后,它就变成了一个网格容器,这个元素的所有直系子元素将成为网格元素
grid
是块级元素,同级的grid
不能再一行
inline-grid
是块级元素,能在一行
grid-template-columns: auto auto auto;
三列,几个auto
就几个列 单位是fr
grid-template-columns: 2fr 1fr 1fr;
三列,一个占一半,剩下两个各个四分之一
grid-template-columns: 30px 200px auto 100px;
指定列的大小
上面都是列,行也是类似的网格间距
grid-gap: 30px 100px;
上下间距30px
左右100px
是grid-row-gap
和 grid-column-gap
属性的简写
grid-row-gap: 50px;
上下间距50px
grid-column-gap:45px;
左右45px
网格区域
grid-column-start
:从哪一列网格线开始
grid-column-end
:从哪一列网格线结束
grid-row-start
:从哪一行网格线开始
grid-row-end
:从哪一行网格线结束
3 * 3
的grid
布局,行和列都各有四条网格线
.item1 {grid-column: 1 / span 2; 列 1代表起始线 2代表跨度,就是到第三条线结束,两个单元格grid-row: 1 / span 2; 行 同上}
.item8 {grid-area: 1 / 2 / 5 / 6; 第一行 第二列 开始 第五行 第六列结束
}
.item8 {grid-area: 2 / 1 / span 2 / span 3; 第二行 第一列 跨 2 跨 3
}
grid-template-areas制作网页模板
可以配合 align-content
和justify-content
一块使用
完
相关文章:

前端CSS3学习
学习菜鸟教程 火狐-moz- 谷歌 Safari -webkit- 前面都加这个,可能才生效 边框 border: 1px solid #ddd 粗细 样式 样色 经常和border-radius 一块用 border-radius: 50px 20px 第一个左右 第二个右左 border-top-left-radius … box-shadow: 10px 5px 10px 0 #88…...

HTML——58.value和placeholder
<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>value和placeholder属性</title></head><body><!--input元素的type属性:(必须要有)1.指定输入内容的类型2.默认为text,单行文本框-->&l…...

STM32单片机芯片与内部57 SPI 数据手册 寄存器
目录 一、SPI寄存器 1、SPI控制寄存器 1(SPI_CR1)(I2S模式下不使用) 2、SPI控制寄存器 2(SPI_CR2) 3、SPI 状态寄存器(SPI_SR) 4、SPI 数据寄存器(SPI_DR) 5、SPI CRC多项式寄存器(SPI_CRCPR)(I2S模式下不使用) 6、SPI Rx CRC寄存器(SPI_RXCRCR)(I2S模式下不…...
前端异常处理合集
文章目录 前言:思考:一、为什么要处理异常?二、需要处理哪些异常? js 代码处理基本的try...catch语句 Promise 异常Promise 错误处理async/await 全局处理错误捕获window.onerrorwindow.onunhandledrejectionwindow.addEventListe…...
求职:求职者在现场面试中应该注意哪些问题?
求职者在现场面试中需要注意诸多方面的问题 面试前的准备 了解公司信息: 提前通过公司官网、社交媒体账号、新闻报道等渠道,熟悉公司的发展历程、业务范围、企业文化、主要产品或服务等内容。例如,如果是应聘一家互联网科技公司,…...

第2章波动光学引论—抓本质,本质必定简单
1波动光学的电磁理论 1.1波动方程 1)波动方程是通过描述波函数随时间和空间的变化来表达波动的传播和演化。 2)一维波动方程: a.一维波动方程描述了沿着一条直线传播的波动。它的一般形式为: ∂u/∂t v ∂u/∂x 其中ÿ…...

分类模型评估利器-混淆矩阵
相关文章 地理时空动态模拟工具介绍(上) 地理时空动态模拟工具介绍(下)地理时空动态模拟工具的使用方法 前言 混淆矩阵(Confusion Matrix)是机器学习领域中用于评估分类模型性能的一种工具。它通过矩阵的…...

算法题(23):只出现一次的数字
初级: 审题: 需要输出只出现了一次的数据,其他数据均出现了两次 思路: 若不限制空间复杂度: 方法一:哈希表 用哈希映射循环一次,把对应数字出现的次数记录到数组里面,然后再遍历一次…...
@RestController与@Controller区别
区别1: RestController是Controller的升级版 区别2: RestController用于标识一个类作为控制器,并且可以处理HTTP请求。控制器类通常用于接收用户输入并决定返回响应的内容。 RestController通常用于返回JSON或XML数据 区别3:…...
使用ExecutorService和@Async来使用多线程
文章目录 使用ExecutorService和Async来使用多线程采用ExecutorService来使用多线程多线程过程的详细解释注意事项优点 使用Async来使用多线程对比Async和ExecutorService的多线程使用方式使用 ExecutorService 的服务类使用 Async 的服务类异步任务类自定义线程池主应用类解释…...

计算机网络 (19)扩展的以太网
前言 以太网(Ethernet)是一种局域网(LAN)技术,它规定了包括物理层的连线、电子信号和介质访问层协议的内容。以太网技术不断演进,从最初的10Mbps到如今的10Gbps、25Gbps、40Gbps、100Gbps等,已成…...
构造器/构造方法
1. 构造器 1.1 概述 先浏览下面简单代码; class Cons{ // 属性int age;String name; // 方法public void show(){System.out.println("age"age);} } class ConsTest{public static void main(String[] args) {Cons c new Cons();// Cons() 就是…...
异常
目录 1. 异常的概念及使用 1.1 异常的概念 1.2 异常的抛出和捕获 1.3 栈展开 1.4 查找匹配的处理代码 1.5 异常的重新抛出 1.6 异常安全问题 1.7 异常规范 2. 标准库的异常 1. 异常的概念及使用 1.1 异常的概念 异常处理机制允许程序中独⽴开发的部分能够在运⾏时就…...

MySQL中distinct和group by去重的区别
MySQL中distinct和group by去重的区别 在MySQL中,我们经常需要对查询结果进行去重,而DISTINCT和GROUP BY是实现这一功能的两种常见方法。虽然它们在很多情况下可以互换使用,但它们之间还是存在一些差异的。接下来,我们将通过创建测…...
Qt判别不同平台操作系统调用相应动态库读取RFID
本示例使用的读卡器:https://item.taobao.com/item.htm?spma21dvs.23580594.0.0.52de2c1b8jdyXi&ftt&id562957272162 #include <QDebug> #include "mainwindow.h" #include "./ui_mainwindow.h" #include "QLibrary"…...

vue2+echarts实现水球+外层动效
实现效果 安装echarts-liquidfill 需要安装echarts-liquidfill!!!需要安装echarts-liquidfill!!!需要安装echarts-liquidfill!!! 安装命令 npm install echarts-liqui…...

C++ 基础思维导图(一)
目录 1、C基础 IO流 namespace 引用、const inline、函数参数 重载 2、类和对象 类举例 3、 内存管理 new/delete 对象内存分布 内存泄漏 4、继承 继承权限 继承中的构造与析构 菱形继承 1、C基础 IO流 #include <iostream> #include <iomanip> //…...
【gopher的java学习笔记】依赖管理方式对比(go mod maven)
什么是go mod go mod是Go语言官方引入的模块管理工具,旨在简化项目依赖管理,提高构建的可重复性和稳定性。以下是关于go mod的详细介绍: 在go mod之前,Go语言主要依赖GOPATH和vendor目录来管理项目依赖。然而,这种方式…...

CTFshow—远程命令执行
29-35 Web29 代码利用正则匹配过滤了flag,后面加了/i所以不区分大小写。 可以利用通配符绕过 匹配任何字符串/文本,包括空字符串;*代表任意字符(0个或多个) ls file * ? 匹配任何一个字符(不…...

Qt之简易音视频播放器设计(十五)
Qt开发 系列文章 - MediaPlayer(十五) 目录 前言 一、QMediaPlayer 二、实现方式 1.添加multimedia 2.创建类vedioplayer 3.UI设计 4.用户使用 5.效果演示 总结 前言 利用Qt进行音视频播放器设计,首先比较方便使用的是Qt自带的音视…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...

免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具,可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件,也不需要在线上传文件,保护您的隐私。 工具截图 主要特点 🚀 快速转换:本地转换,无需等待上…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案
在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...
深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏
一、引言 在深度学习中,我们训练出的神经网络往往非常庞大(比如像 ResNet、YOLOv8、Vision Transformer),虽然精度很高,但“太重”了,运行起来很慢,占用内存大,不适合部署到手机、摄…...

【Veristand】Veristand环境安装教程-Linux RT / Windows
首先声明,此教程是针对Simulink编译模型并导入Veristand中编写的,同时需要注意的是老用户编译可能用的是Veristand Model Framework,那个是历史版本,且NI不会再维护,新版本编译支持为VeriStand Model Generation Suppo…...
数据库——redis
一、Redis 介绍 1. 概述 Redis(Remote Dictionary Server)是一个开源的、高性能的内存键值数据库系统,具有以下核心特点: 内存存储架构:数据主要存储在内存中,提供微秒级的读写响应 多数据结构支持&…...

Element-Plus:popconfirm与tooltip一起使用不生效?
你们好,我是金金金。 场景 我正在使用Element-plus组件库当中的el-popconfirm和el-tooltip,产品要求是两个需要结合一起使用,也就是鼠标悬浮上去有提示文字,并且点击之后需要出现气泡确认框 代码 <el-popconfirm title"是…...
Shell 解释器 bash 和 dash 区别
bash 和 dash 都是 Unix/Linux 系统中的 Shell 解释器,但它们在功能、语法和性能上有显著区别。以下是它们的详细对比: 1. 基本区别 特性bash (Bourne-Again SHell)dash (Debian Almquist SHell)来源G…...

docker容器互联
1.docker可以通过网路访问 2.docker允许映射容器内应用的服务端口到本地宿主主机 3.互联机制实现多个容器间通过容器名来快速访问 一 、端口映射实现容器访问 1.从外部访问容器应用 我们先把之前的删掉吧(如果不删的话,容器就提不起来,因…...

LangChain + LangSmith + DeepSeek 入门实战:构建代码生成助手
本文基于 Jupyter Notebook 实践代码,结合 LangChain、LangSmith 和 DeepSeek 大模型,手把手演示如何构建一个代码生成助手,并实现全流程追踪与优化。 一、环境准备与配置 1. 安装依赖 pip install langchain langchain_openai2. 设置环境变…...