CSS3
CSS3
苦涩2020
这个作者很懒,什么都没留下…
展开
-
less的使用
less 变量和插值less变量插值使用@{}表示// less变量@c: #e4393c;// less变量插值使用@{}表示// 选择器变量插值@b: box;// 路径变量插值@imgUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';// 属性变量插值@bgsize: background-size;// ---------------------------------原创 2020-10-20 13:11:11 · 315 阅读 · 0 评论 -
CSS3 移动端开发技巧
媒体查询初始@media:媒体查询;可以针对不同的媒体类型定义不同的样式only:指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器screen:用于电脑屏幕,平板电脑,智能手机等<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet".原创 2020-06-10 11:43:29 · 180 阅读 · 0 评论 -
CSS3 转换
2D位移转换参考点(基点)在元素的中心点相对自身参考点进行位移位移设置成百分比后,是自身元素尺寸的百分比,元素的尺寸是否固定不会影响百分比的计算 transform: translateX(-150px); X轴:正往右,负往左transform: translateY(150px); Y轴:正往下,负往上transform: translate(100px, 100px); 2D位移简写,值1是X轴,值2是Y轴<!DOCTYPE html><html lang=".原创 2020-05-31 13:50:27 · 484 阅读 · 0 评论 -
CSS3 过渡和动画
过渡初识过渡:元素从一种样式变换为另一种样式时为元素添加的效果必须要触发一个事件才能实现过渡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <style type=".原创 2020-05-30 23:51:41 · 246 阅读 · 0 评论 -
CSS3 渐变
线性渐变渐变分成线性渐变和径向渐变两种线性渐变的两大要素渐变方向,结束方向;默认从上向下渐变的起始色和终止色,至少两种;可以使用合法的颜色值线性渐变语法:background: linear-gradient(to bottom, red, blue);<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</titl.原创 2020-05-29 23:25:54 · 178 阅读 · 0 评论 -
CSS3 元素居中
元素水平居中text-align: center;:设置行内元素、行内块级元素水平居中margin: 0 auto;:设置块级元素水平居中行高垂直居中法适用于单行,有父元素有固定高度line-height: 300px;:设置行内元素和行内块级元素垂直居中内、外边距居中法适用于父元素有固定高度方法一:内边距法(设置给父元素)水平居中:设置左内边距=(父元素宽度-自元素宽度)/ 2垂直居中:设置上内边距=(父元素高度-自元素高度)/ 2方法二:外边距法(设置给子元素;.原创 2020-05-28 23:36:19 · 216 阅读 · 0 评论 -
CSS3 弹性盒子模型
弹性盒子:flex布局弹性盒子是一种布局方式特点:改变元素的排列方式采用flex布局的元素:称为flex容器,简称“容器”。它的所有子元素自动成为容器成员,成为flex项目(简称“项目”)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet".原创 2020-05-28 14:13:11 · 221 阅读 · 0 评论 -
CSS3 矢量图标及背景精灵
矢量图标浅解矢量图:根据几何特性来绘制图形。它的特点是放大后图像不会是真,和分辨率无关位图:是由称作像素(图片像素)的单个点组成的,放大后,会变成马赛克矢量图标引用矢量图标和字体的用法一样font-class 引用font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。与 Unicode 使用方式相比,具有如下特点:兼容性良好,支持 IE8+,及所有现代浏览器。相比于 Unicode 语意明确,书写更直观。可以.原创 2020-05-27 21:01:35 · 537 阅读 · 0 评论 -
CSS3 常用技巧
hover使用技巧可以设置自己或后代元素的属性可以设置自己之后兄弟元素的属性不能设置祖先元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hover使用技巧</title> <style type="text/css"> #zxw{ width: 400.原创 2020-05-26 23:25:34 · 229 阅读 · 0 评论 -
CSS3 浮动与定位
CSS3 浮动与定位浮动浮动特点清除浮动高度塌陷(清浮动)定位浮动float:方向 让块级元素在一行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浮动初始</title> <link rel="stylesheet" href="../reset.css"> <style type="原创 2020-05-15 13:54:33 · 204 阅读 · 0 评论 -
CSS3 列表、表格、滤镜
CSS3 列表、表格、鼠标、滤镜列表属性列表属性原创 2020-05-14 17:06:59 · 147 阅读 · 0 评论 -
CSS3 盒子模型
CSS3 盒子模型盒子模型外边距设置内边距设置盒子模型所有元素都可以有宽高所有元素都是一个矩形所有元素都看成一个盒子盒子包括:外边距+边框+内边距+元素内容外边距设置围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”行级元素只有左右外边距,没有上下外边距块级元素和行内块级元素外边距4个方向都有效外边距要素外边距的方向:top bottom left right外边距尺寸:合法的尺寸单位,百分比外边距语法margin-方向:外边距尺寸;使原创 2020-05-14 09:45:42 · 242 阅读 · 0 评论 -
CSS3 边框属性
CSS3 边框属性边框设置圆角边框边框阴影轮廓及样式重置边框设置边框四大要素:边框宽度、边框颜色、边框样式、边框方向border-边框方向:边框宽度 边框颜色 边框样式 属性值之间有空格隔开,并且属性值不顺序要求边框宽度:可以使用合法的尺寸单位:px(推荐使用),em,rem。注意:不能使用百分比边框颜色:可以使用颜色名、16进制颜色值、rgb颜色值(推荐使用)、rgba颜色值边框样式:实线:solid、虚线:dashed、双线:double、点状:dotted边框方向:写在属性名中,在原创 2020-05-13 20:39:30 · 291 阅读 · 0 评论 -
CSS3 背景属性
背景属性背景颜色背景图片背景重复背景尺寸背景定位背景固定背景简写背景颜色background-color:合法的颜色值合法的颜色值:颜色名、16进制颜色值、rgb颜色值、rgba颜色值如果没有设置背景颜色,那么背景就是透明。默认值:transparent<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景颜色</tit原创 2020-05-13 17:12:53 · 165 阅读 · 0 评论 -
CSS3 元素基础知识
CSS3 基础元素宽高特点元素类型转换元素宽高特点块级元素可以设置宽高不能和其他元素在一行没有设置宽高时,宽度和父级宽度一样,高度由元素内容的高度决定当设置有宽高时,元素的宽高就是设置的值行级元素不可以设置宽高,设置的宽高无效可以和其它元素在一行宽高由元素内容决定行内块级元素可以设置宽高可以和其它元素在一行当没有设置宽高时,宽高由元素内容决定当设置有宽高时,元素的宽高就是设置的值<!DOCTYPE html><html lang="en"&原创 2020-05-13 00:17:36 · 188 阅读 · 0 评论 -
CSS3 文本属性
CSS3 文本属性文本颜色文本间距文本行高文本颜色color:合法的颜色值 设置字体颜色合法的颜色值:颜色名,16进制颜色值,RGB颜色值,RGBA颜色值当文字没有设置颜色时,默认为黑色使用颜色名可能不被浏览器接受,使用16进制颜色值,或RGB或RGBA颜色值能被所有浏览器识别并正常显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit原创 2020-05-12 13:07:08 · 273 阅读 · 0 评论 -
CSS3 字体属性
CSS3 字体属性字号设置字号设置font-size 设置字体的大小,使用合法的尺寸单位常见单位有:px、em、rem、%…当没有设置字号时,浏览器会添加默认字号,一般是16px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>字号设置</title> <style type="text/css"&g原创 2020-05-11 22:44:21 · 223 阅读 · 0 评论 -
CSS3 伪类和伪元素
CSS3 伪类和伪元素伪类静态伪类动态伪类伪类元素在不同状态表现不同样式,如点击a标签文本变红,放开变紫静态伪类只能用于超链接,用得少: link 超链接未点击前的样式: visited 超链接点击之后的样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3静态伪类</title> <st原创 2020-05-11 17:18:38 · 312 阅读 · 0 评论 -
CSS3 选择器
CSS3 选择器基本选择器标签选择器ID选择器类选择器通用选择器高级选择器后代选择器并集选择器交集选择器序列选择器第一和最后子元素选择器基本选择器标签选择器通过标签选择元素无论标签隐藏多深,标签选择器都可以选中选择的是所有相同标签,而不是一个<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标签选择器</title&g原创 2020-05-11 10:53:21 · 151 阅读 · 0 评论 -
CSS3 基础知识
文章目录引入外部样式表方法语法引入外部样式表方法内联样式表(行内)内部样式表(style标签中)外部样式表1、创建一个外部样式表2、在head中使用link标签插入样式表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g...原创 2020-02-29 23:31:00 · 384 阅读 · 0 评论