CSS&CSS3

最新推荐文章于 2024-05-23 09:01:29 发布
最新推荐文章于 2024-05-23 09:01:29 发布
阅读量978 收藏 3
点赞数 2
分类专栏： 前端 文章标签： css 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46005735/article/details/107417425
版权

CSS&CSS3

1. 引入CSS样式

  • 行内样式表(内联样式表)
  • 内部样式表(内嵌样式表)
  • 外部样式表(外链式样式表)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS.demo1</title>
		<link rel="stylesheet" href="../CSS/demo1.css" type="text/css" /> <!--先加载CSS后HTML（链接外部样式）-->
		
		<!-- <style type="text/css">
			
		</style> -->
		
		<!-- <style type="text/css">
			先加载HTML后CSS,对页面性能有影响（导入外部样式）
			@import url("./CSS/demo1.css");
		</style> -->
		
	</head>
	<body>
		
		<!-- <p style=""></p> -->
		
	</body>
</html>
样式表优点缺点作用范围
行内样式表权重高未实现样式和结构相分离最用于一个标签
内部样式表部分结构和样式相分离没有彻底分离最用于一个页面
外部样式表完全实现结构和样式相分离需要引入作用于一个站点

2. 选择器

2.1 基础选择器

  • 标签选择器——选择某一类标签

  • 类选择器

    • 在标签中设置class属性

    • CSS文件中–> .class_name{}

    • 相同class可以使用多次

/* demo3.css */
html{
	font-size: 100px;
	font-weight: bold;
	letter-spacing: -15px;
}
.G{
	color: #4285f4;
}
.o1{
	color: #ea4335;
}
.o2{
	color: #fbbc05;
}
.g{
	color: #4285F4;
}
.l{
	color: #34a853;
}
.e{
	color: #ea4335;
}

<!-- demo3 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Google</title>
		<link href="../CSS/demo3.css" type="text/css" rel="stylesheet" />
		<link rel="icon" href="../img/study.png" />
	</head>
	<body>
		<span class="G">G</span>
		<span class="o1">o</span>
		<span class="o2">o</span>
		<span class="g">g</span>
		<span class="l">l</span>
		<span class="e">e</span>
	</body>
</html>

在这里插入图片描述

  • 多类名
/* demo3.css */
.font100{
	font-size: 100px;
	font-weight: bold;
	letter-spacing: -5px;
}
.G{
	color: #4285f4;
}
.o1{
	color: #ea4335;
}
.o2{
	color: #fbbc05;
}
.g{
	color: #4285F4;
}
.l{
	color: #34a853;
}
.e{
	color: #ea4335;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Google</title>
		<link href="../CSS/demo3.css" type="text/css" rel="stylesheet" />
		<link rel="icon" href="../img/study.png" />
	</head>
	<body>
		<span class="font100 G">G</span>
		<span class="font100 o1">o</span>
		<span class="font100 o2">o</span>
		<span class="font100 g">g</span>
		<span class="font100 l">l</span>
		<span class="font100 e">e</span>
	</body>
</html>

在这里插入图片描述

  • id选择器
    • 设置id
    • 使用 #id{}
  • 通配符选择器
    • 使用 *{}

2.2 复合选择器

  • 后代选择器
    • 父级 子级 …{}
    • 选择元素或元素组的子孙后代
  • 子元素选择器
    • 父级>子级{}
    • 只选择子级
  • 交集选择器
    • 既是又是
    • eg: p.hello{}（既是p标签又是hello类）
  • 并集选择器
    • eg: span,div{}（span和div标签）
  • 链接伪类选择器
    • a:link 未访问链接状态
    • a:visited 访问过的链接状态
    • a:hover 鼠标移动上去的链接状态
    • a:active 点击时的链接状态
    • 连接顺序 l,v,h,a(love hate) 顺序不对会出错

2.3 CSS3属性选择器

选择器描述
E[att]匹配att属性的E元素
E[att=“val”]匹配att属性，且属性值等于val的E元素
E[att^=“val”]匹配att属性，且属性值以val开头的E元素
E[att$=“val”]匹配att属性，且属性值以val结尾的E元素
E[att*=“val”]匹配att属性，且属性值以中含有val的E元素
  • 交集选择器

2.4 CSS3结构伪类选择器

选择符描述
E:frist-child(E可以不指定)匹配父元素中第一个子元素E
E:last-child(E可以不指定)匹配父元素中最后一个子元素E
E:nth-child(n)(E可以不指定)匹配父元素中第n个子元素E
E:frist-of-type指定类型E的第一个
E:last-of-type指定类型E的最后一个
E:nth-of-type(n)指定类型E的第n个
  • n
    • 数字
    • 关键字
      • even偶数
      • odd奇数
    • 公式
      • 公式是带有n的公式，n从0开始
      • 第零个元素和超出的元素都会被忽略
      • eg: -n+5 --> 1,2,3,4,5…….
  • 前面三个选择符，都是以父类为基准来选择的，如果E和选择出现冲突，那么无法选中
  • 后面的三个选择符，都是以父类指定的E标签来选择的

2.5 CSS3伪元素选择器

选择器描述
::before在元素内部的前面插入内容
::after在元素内部的后面插入内容
  • before和after必须要有content属性
  • before和after创建一个元素，该元素属于行内元素
  • 创建的元素在dom中无法看见
  • 权重为1

3. 字体样式

3.1 font字体

样式说明属性
font-size字体大小size
font-family字体(可以多种字体)字体英文名、unicode字体
font-weight字体粗细normal、bold、100-900(整百)
font-style字体风格normal、italic

综合语法: font: style weight size/line-height family

  • 字体大小和字体样式是不可以省略的，其它的可以省略

3.2 其它样式

属性表示属性值
color颜色color
line-height行高height
text-align水平对齐left、right、center
text-indent首行缩进(汉字一般是两个缩进)…(1em=1个字大小)
text-decoration文本装饰none、underline、overline、line-through
3.3 line-height使用
3.3.1 标线
  • 顶线
  • 底线
  • 中线
  • 基线
3.3.2 行高
  • 行高为基线与基线的距离
  • 行高=上距离+文字高度+下距离(上距离=下距离)
  • 默认行高=font-size+4px
3.3.3 单行文本的垂直居中
  • 使行高=高度(设置行高可以理解为设置上距离和下距离)
  • 行高>高度 --> 文字偏下
  • 行高<高度 --> 文字偏上

4. 标签的显示模式

4.1 块级元素(block)

4.1.1 常见标签
  • <h1>~<h6>
  • <p>
  • <div>
  • <ul>
  • <ol>
  • <li>
4.1.2 特点
  • 块级元素独占一行
  • 高度、宽度、内外边距都可以设置，边框可以设置
  • 宽度默认是父级容器100%，高度默认为内容高度
  • 里面可以放行内元素和块级元素
  • 注意
    • p不能放块级元素
    • h1~h6,dt都是文字块级标签，里面不能放其它块级元素

4.2 行内元素(inline)

4.2.1 常见标签
  • <a>
  • <strong>
  • <b>
  • <em>
  • <i>
  • <del>
  • <s>
  • <ins>
  • <u>
  • <span>
4.2.2 特点
  • 一行可以放多个行内元素
  • 高宽不能直接设置，内外边距可以设置，边框不能设置
  • 默认宽度是本身内容的宽度，高度默认为内容高度
  • 行内元素只能容纳文本或其他行内元素
  • 注意
    • 链接里面不能放链接
    • 特殊情况下，链接可以放块级元素，但是链接转换成块级更安全

4.3 行内块元素(inline-block)

4.3.1 常见标签
  • <img/>
  • <input/>
  • <td>
4.3.2 特点
  • 一行可以放多个行内块元素，但是之间会有空白间隙
  • 高度、宽度、内外边距都可以设置，边框可以设置
  • 默认宽度是本身内容的宽度，高度默认为内容高度

4.4 模式转换

  • 转换为块级元素 display:block
  • 转换为行内元素 display:inline
  • 转换为行内块元素 display:inline-block

5. 背景

属性描述属性值
background-color背景颜色transparent、color
background-image背景图片(背景图片在背景颜色之上)url(url)
background-repeat背景平铺repeat(默认)、no-repeat、repeat-x、repeat-y
background-position背景位置length||length(x坐标、y坐标)、position||position(top、center、bottom、left、center、right)
background-attachment背景附着(相对于滚动条来说，如果是滚动，随滚动条移动；如果是固定，不随滚动条移动)scroll、fixed
background:rgba(r,g,b,a)背景透明，不会影响内容0<=a<=1(支持.4=0.4的写法)
  • background-position注意
    • 必须先指定background-image
    • 如果指定两个方位词，与顺序无关
    • 如果指定两个数值，前一个数值为x轴，后一个为y轴
    • 如果数值和方位值混用，前一个为x轴，后一个为y轴
    • 如果只指定一个方位词，另一个默认居中
    • 如果指定一个数值，该数值为x轴，另一个默认居中
  • 简写: background:顺序不严格要求(一般是 color url repeat attachment position)
  • rgba()在IE9以下不支持

6. CSS三大特性

6.1 层叠性

  • 多种CSS样式的叠加
  • 就近原则
  • 样式不冲突不层叠

6.2 继承性

  • 子标签可以继承父标签的样式
  • text-，font-,line-开头是可以继承，文字样式color可以继承

6.3 优先级

6.3.1 权重计算

  • 选择器相同，执行重叠性，就近原则

  • 选择器不同，要计算权重(如果权重相同，就近原则)

    选择器(一个元素)权重
    *0,0,0,0
    标签选择器，伪元素0,0,0,1
    类选择器,伪类选择器,属性选择器0,0,1,0
    id选择器0,1,0,0
    行内样式1,0,0,0
    !important无穷大
6.3.2 权重叠加
  • 使用交集选择器和后代选择器等要利用权重叠加
6.3.3 权重其它问题
  • 权重之间没有进位的
  • 对于子代标签，对于一个CSS样式，如果没有选中子标签的，按照父标签的权重来计算；如果有选中子标签的，不管父类权重多大，看选中该标签的选择器的权重

7. 盒子模型

在这里插入图片描述

7.1 border

属性描述属性值
border-width边框宽度medium、thin、thick、length
border-style边框样式none、hidden、dotted、dashed、solid、double、groove、ridge、insert、outset
border-color边框颜色color

  • 综合写法: border (没有顺序)

  • 单独指定样式

上边框下边框左边框右边框
宽度border-top-widthborder-bottom-widthborder-left-widthborder-right-width
颜色border-top-colorborder-bottom-colorborder-left-colorborder-right-color
样式border-top-styleborder-bottom-styleborder-left-styleborder-right-style
综合border-topborder-bottomborder-leftborder-right
  • 表格单元格合并边框 border-collapse:collapse

7.2 padding

属性描述属性值
padding-left左内边距value
padding-right右内边距value
padding-top上内边距value
padding-bottom下内边距value
  • padding可以撑开盒子
    • 一般会
    • 如果这个盒子没有宽度，不会撑开盒子
  • 复合写法 padding
    • 一个值 --> 上&右&下&左
    • 两个值 --> 上&下 左&右
    • 三个值 --> 上 左&右 下
    • 四个值 --> 上 右 下 左

7.3 盒子大小

  • 盒子实际大小=内容宽度+内边距+边框

7.4 外边距

属性描述属性值
margin-left左外边距value
margin-right右外边距value
margin-top上外边距value
margin-bottom下外边距value
  • 复合写法 margin
    • 一个值 --> 上&右&下&左
    • 两个值 --> 上&下 左&右
    • 三个值 --> 上 左&右 下
    • 四个值 --> 上 右 下 左

7.5 块级盒子水平居中

  • text-align文字居中对齐和行内块元素居中对其
  • 必须有宽度
  • 左右边距设置为auto
    • margin-left:auto&margin-right=auto
    • margin:auto
    • margin:0 auto

7.6 插入图片和背景图片

  • 一般来说，插入图片的使用场景更多
  • 插入图片放在盒子中改变可以使用padding
  • 背景图片改变位置可以使用background-position

7.7 清除元素默认的内外边距

*{
	margin:0;
    padding:0;
}
  • 行内元素尽量只设置左右边距，上下边距可能无法使用

7.8 垂直外边距合并

  • 对于垂直外边距会发生合并，水平外边距不会合并
  • 上下两个盒子，上面盒子有上边距，下面盒子有上边距，则这两个盒子之间的距离为这两个边距的最大值
  • 解决方法
    • 不设置上边距或下边距
    • float
    • position:relative

7.9 嵌套关系的垂直内边距合并

  • 父盒子和子盒子嵌套关系，如果父盒子和子盒子都有内边距，那么内边距发生合并，合并之后为最大内边距的值

  • 解决方案

    • 为父盒子指定上边框
    • 为父盒子指定上内边距
    • 为父盒子添加overflow:hidden

7.10 盒子的稳定性

  • width > padding > margin

7.11 圆角边框

  • border-radius:length/percent
  • 正方形变为圆形 percent=50%|length=width/2
  • 矩形普通变换 length=height/2

7.12 盒子阴影

  • box-shadow: h-shadow水平阴影(必选) v-shadow垂直阴影(必选) blur模糊距离 spread阴影尺寸 color阴影颜色 insert内/外阴影(outset、insert)

8. 设置浮动

8.1 行内块实现浮动效果的缺点

  • 行内块实现的div一行排列中间会出现缝隙，而且缝隙很难去掉，而且缝隙距离不好确定

8.2 浮动作用

  • 脱离普通标准流
  • 移动到指定位置
  • 可以让div一行显示，可以实现盒子的左右对齐，可以实现文字环绕效果

8.3 语法

  • float
  • 属性值：none、left、right

8.4 浮动的特性

  • 浮动的元素是漂浮在普通流之上的，脱离标准流，脱标
  • 浮动的盒子会把原来的位置给下面的盒子
  • float会改变display属性值，使之相当于变为inline-block，但是之间没有缝隙
  • 如果父级盒子装不下浮动，就会挤到下一行

8.5 浮动技巧

  • 可以给浮动添加标准流的父盒子，可以最大化减少对其它标准流的影响

8.6 浮动元素和其它盒子的关系

8.6.1 与父盒子的关系
  • 子盒子在父盒子的内容部分
  • 不会超过边框和内边距
8.6.2 与兄弟盒子的关系
  • 注意浮动与不浮动
  • 上一个盒子不浮动，下一个盒子浮动=上一个盒子不浮动，下一个盒子不浮动
  • 浮动只会只会影响其后面的浮动，不会影响前面的浮动

9. 清除浮动

9.1 为什么要清除浮动

  • 左右排列时，父盒子是不方便给高度
  • 在标准流中，子盒子是可以撑开父盒子的高度，但是浮动流时是不能撑开的

9.2 清除浮动的本质

  • 为了解决子盒子浮动而导致父盒子(未设置高度)的高度为0的情况

9.3 清除浮动的方法

clear:left/right/both

  • 额外标签法
    • 在浮动元素的末尾加上空的标签，来清除两侧的浮动
    • 如：<div style="clear:both"></div>
    • 书写简单，但是增加了额外的标签
  • 父级添加overflow属性
    • 给父级添加overflow:hidden;
    • 代码简单，但是，内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示出溢出的元素
  • 使用after伪元素清除浮动
    • .clear:after{content:””;display:block;height:0;visibility:hidden;clear:both};
    • .clear{*zoom:1;} 专门清除IE6、7的浮动
    • 符合闭合浮动思想，结构语义化正确，但是，书写复杂，还要兼顾IE6，7
  • 使用双伪元素清除浮动
    • .clear:before,.clear:after{content=“”;display:table}
    • .clear:after{clear:both;}
    • .clear{*zoom:1;} 专门清除IE6、7的浮动

10. 定位

10.1 描述

  • 定位是用来布局的
  • 定位=定位模式+边偏移

10.2 边偏移属性

属性描述
top顶端偏移量，定位元素相对于其父元素的上边线距离
bottom底端偏移量，定位元素相对于其父元素的下边线距离
left左侧偏移量，定位元素相对于其父元素的左边线距离
right右侧偏移量，定位元素相对于其父元素的右边线距离

10.4 定位模式

  • position
模式语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位

  • static——静态定位

    • 默认定位，无定位
    • 静态定位按照标准流原来位置，没有边偏移

  • relative——相对定位

    • 相对于其原来的位置来说的
    • 原来在标准流中的区域继续占有，移动之后仍然为标准流

  • absolute——绝对定位

    • 以==带有定位(!static)==的父级元素来定位

    • 不保留位置，完全脱标

    • 一般来说，子盒子为绝对定位，父盒子为相对定位

      display:inline-block

  • fixed——固定定位(特殊absolute)

    • 以浏览器的可是窗口来定位
    • 不保留位置，完全脱标

10.5 绝对定位盒子居中

  • 绝对定位，margin:auto…不能让盒子水平居中对齐
  • left:50% 再 margin-left:-box_width/2

10.6 堆叠顺序

  • 对于绝对定位和固定定位，可能会发生堆叠
  • z-index
  • z-index的属性值开始正负整数和0，0是默认值，数值越大，盒子越上
  • z-index的属性值要是相同的话，后来者居上

10.7 定位改变display属性

  • display:inline-block
  • folat:~
  • position:absoute

10.8 注意

  • 浮动元素和绝对定位都不会触发外边距合并问题

11. 网页布局总结(标准流、浮动、定位)

11.1 标准流

  • 可以让盒子上下左右排序，但是标准流和标准流是不能够发上重叠的

11.2 浮动(会影响display)

  • 可以要多个多个块级元素一行显示，可以左右来对齐盒子

    有定位的浮动流可以层叠

11.3 定位(可能会会影响float&display)

  • 多个盒子层叠显示

12. 元素的显示和隐藏

12.1 display

  • 隐藏对象 display:none
  • 隐藏并不保留位置
  • 显示元素 display:block 使之显示&使之成为块级

12.2 visibility

  • 隐藏 visibility:hidden
  • 隐藏并保留位置
  • 显示 visibility:visible

12.3 overflow

  • 设置当前内容超过指定宽高如何管理内容
属性描述
visible默认，不剪切内容不加滚动条
hidden超出的部分隐藏
scroll不管是否超出，都加滚动条
auto不超出不加滚动条，超出添加滚动条

13. 用户界面样式

13.1 鼠标样式cursor

属性值描述
default默认
pointer小手
move移动
text文本
not-allowed禁止
…………

13.2 轮廓outline

  • 设置轮廓线 outline:outline-color||outline-style||outline-width
  • 取消轮廓线
    • outline:0;
    • outline:none;

13.3 防止拖拽文本域resize

  • resize:none

14. 垂直对齐 vertical-align

  • 文字居中对齐 text-align:center
  • vertical-align 只对行内元素和行内块元素有效
属性描述
baseline默认
top顶对齐
middle中线对齐
bottom底线对齐

14.1 图片、表单和文字对齐

14.2 去除图片底侧空白缝隙

  • div中放图片标签，底部会有空隙，原因是默认的是基线对齐
  • 解决方法是，不要使图片基线对齐

15. 溢出的文字省略号显示

15.1 white-space

  • white-space:normal 默认处理方式，如果超过一行会强制换行
  • white-space:nowrap 如果超过一行不会强制换行，一行中显示所有的文本

15.2 隐藏文字 overflow:hidden

15.3 文字溢出显示方式

  • text-overflow:clip 对于超出部分，直接剪掉，不显示省略号
  • text-overflow:ellipsis 对于超出部分，显示省略号

16. 精灵技术

16.1 为什么使用精灵技术

  • 一个网页中会用到许多图片，不使用精灵技术，一张图片要请求一次服务器。使用精灵技术，将多长小图放到一张图中，可以有效减少服务器的处理压力，提高性能

16.2 使用原理

  • 对盒子加上精灵图的背景图片
  • 再将要使用的精灵图的一部分移动到盒子的位置，让该部分在盒子中显示(类似于PS图层的处理)
  • 主要利用background-position来调整图片

16.3 精灵图的制作

  • 制作精灵图，就是将小图放到一张图中
  • 一般背景图片不是用精灵图

17. 浮动门

  • 左侧和右侧两个门是利用不同盒子来做的
  • 右侧的盒子要右对齐
  • 两个盒子要实现自由拉伸的效果，要用到inline-block

18. margin负值

  • 负边距+定位=水平垂直居中
  • 压住盒子的边框(浮动是紧贴在一起的，所以可以实现)
  • 突出效果:由于压住盒子的边框时，border改变时会出现一条变压住，所以可以使用定位，定位的盒子在最上层
  • 突出效果:如果都有浮动，会出现被压住线的情况，这时候就要使用z-index

19. 三角形

  • 用边框可以模拟三角
    • 宽度高度都为0
    • 四个边框都要指定
    • 为了照顾低版本浏览器，要使用font-size:0; line-height:0;

20. 2D转换

20.1 移动

  • transform:translate(x,y) x,y方向移动
  • transform:translateX(x) x方向移动
  • transform:translateY(y) y方向移动
  • 不会影响其它盒子的位置(浮动和定位会影响其它盒子位置)
  • 相对于原来位置移动
  • x,y=value|percent(参照与盒子自身的宽高)
  • 使盒子垂直居中这样可以不用计算，更准确，可以响应式布局
  • 对于行内元素是无效的

20.2 旋转

  • transform:rotate(deg) 顺时针旋转
  • 设置转换的中心点 transfrom-origin:x y（x,y=direction|value）(默认50% 50%)

20.3 缩放

  • transform:scale(x,y)
  • x,y=数字
  • 一个参数，实现等比例缩放
  • 修改宽高会影响其它的盒子
  • 设置缩放的中心点 transfrom-origin:x y（x,y=direction|value）(默认50% 50%)

20.4 综合写法

  • transform:translate(…) rotate(…) origin(…)
  • 执行是有顺序的
  • 同时位移和其他属性时，建议将位移放在前面

21. CSS3动画

21.1 使用流程

  • 定义动画
  • 调用动画

21.2 定义动画

@keyframes name{
0%{

}
.
.
.
100%{

}
}
/*from=0%,to=100%*/

21.3 调用动画

animation-name:name;
animation-duration: ;
...

21.4 动画属性

属性描述属性值
@keyframes规定动画-
animation所有动画属性的简写属性，除了 animation-play-state 属性-
animation-name规定 @keyframes 动画的名称(必写*)name
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0(必写*)time
animation-timing-function规定动画的速度曲线。默认是 “ease”linear(动画从头到尾的速度是相同的)|ease(默认。动画以低速开始，然后加快，在结束前变慢)|ease-in(动画以低速开始)|ease-out(动画以低速结束)|ease-in-out(动画以低速开始和结束)|cubic-bezier(n,n,n,n)(在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值)
animation-delay规定动画何时开始。默认是 0time
animation-iteration-count规定动画被播放的次数。默认是 1count(默认为1)|infinite(指定动画应该播放无限次（永远）)
animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”normal(默认值。动画按正常播放)|reverse(动画反向播放)|alternate(动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放)|alternate-reverse(动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放)|initial(设置该属性为它的默认值)|inherit(从父元素继承该属性)
animation-play-state规定动画是否正在运行或暂停。默认是 “running”paused(指定暂停动画)|running(指定正在运行的动画)
animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式none(默认值。动画在动画执行之前和之后不会应用任何样式到目标元素)|forwards(在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值)|backwards(动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）)|both(动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性)|initial(设置该属性为它的默认值)|inherit(从父元素继承该属性)
  • 简写: animation：名称 持续时间 运动曲线 开始时间 播放次数 是否反方向 动画起始或结束的状态

22. CSS3 3D转换

22.1 3D移动

  • transform:translate3d(x,y,z) x,y,z方向移动
  • transform:translateX(x) x方向移动
  • transform:translateY(y) y方向移动
  • transform:translateZ(z) z方向移动（一般是value）
  • x,y,z是不能省略的

22.2 3D透视

  • 透视写在被观察元素的父盒子上
  • perspective:value
  • 透视的value是眼睛到屏幕的距离，z是物体距离屏幕的距离

22.3 3D旋转

  • transform:rotate3d(x,y,z,deg) 自定义轴旋转(x,y,z以矢量的计算法则)
  • transform:rotateX(deg)
  • transform:rotateY(deg)
  • transform:rotateZ(deg)
  • 左手法则：大拇指超正方向，四指弯曲的方向为正旋转方向

22.4 3D呈现

  • 控制子元素是否开启三维立体环境
  • 不开启保持三维立体环境 transform-style:flat (不开启的话，其它的兄弟级子盒子不保持3D立体空间)
  • 开启保持三维立体环境 transform-style:preserve-3d

23. 浏览器的私有前缀

  • 为了兼容浏览器
  • -moz- firefox
  • -ms- IE
  • -webkit- safari&chrome
  • -o- opera

案例&案例中的知识点学习和总结

1. 简单导航

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简单导航栏</title>
		<style>
			div{
				background-color: aliceblue;
				height: 50px;
				width: 600px;
				margin: auto;
				text-align: center;
			}
			a{
				text-decoration: none;
				background-color: #DEB887;
				margin: auto;
				display: inline-block;
				height: 50px;
				width: 100px;
				text-align: center;
				color: white;
				line-height: 50px;
			}
			a:hover{
				background-color: #FBBC05;
				color: #000000;
			}
		</style>
	</head>
	<body>
		<div>
			<a href="#">新闻</a>
			<a href="#">体育</a>
			<a href="#">娱乐</a>
			<a href="#">教育</a>
			<a href="#">美食</a>
		</div>
	</body>
</html>

2. 小盒子左侧对齐盒子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小盒子左侧的对其盒子</title>
		<style>
			div{
				width: 100px;
				height: 50px;
				background-color: wheat;
				margin: auto;
				background-image: url(./点.png);
				background-size: 20IIpx;
				background-repeat: no-repeat;
				background-position: left center;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

3. 新浪导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新浪导航栏</title>
		<style>
			div{
				border-top: #DEB887 solid 3px;
				border-bottom: #EA4335 solid 3px;
				display: inline-block;
			}
			a{
				display: inline-block;
				height: 50px;
				padding: 0 20px;
				text-align: center;
				line-height: 50px;
				text-decoration: none;
				font-size: 15px;
			}
			a:hover{
				background-color: #ccc;
				color: white;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<a href="#">设为首页</a>
			<a href="#">手机新浪网</a>
			<a href="#">移动客户端</a>
			<a href="#">博客</a>
			<a href="#">微博</a>
			<a href="#">关注我</a>
		</div>
	</body>
</html>

4. 新闻列表

  • 取消列表样式 list-style: none;
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新闻列表</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.big{
				width: 298px;
				height: 198px;
				border: 1px solid #ccc;
				margin: 100px auto;
				background-image: url(line.jpg);
				padding: 15px;
			}
			.big h2{
				font-size: 18px;
				padding: 5px 0;
				border-bottom: 1px solid #ccc;
				margin-bottom: 10px;
			}
			.big ul li{
				list-style: none;
				height: 30px;
				border-bottom: 1px dashed #ccc;
				background-image: url(arr.jpg);
				background-repeat: no-repeat;
				background-position: center left;
			}
			.big ul li a{
				color: #333;
				font-size: 15px;
				text-decoration: none;
				line-height: 30px;
				/* margin-left: 20px; */
				/* 没有宽度padding不会撑开盒子 */
				padding-left: 20px;
			}
			.big ul li:hover{
				background-color: #ccc;
				background-image: none;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<h2 class="title">最新文章/New Articles</h2>
			<ul>
				<li><a href="#">前端工程师教程</a></li>
				<li><a href="#">Python教程</a></li>
				<li><a href="#">Java教程</a></li>
				<li><a href="#">PHP教程</a></li>
				<li><a href="#">C/C++教程</a></li>
			</ul>
		</div>
	</body>
</html>

5. 小米案例(仿小米官网20-7-16内容，右侧盒子为图片,而且未设置动画效果)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米案例</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.big{
				width: 1226px;
				height: 615px;
				background-color: #00FFFF;
				margin: auto;
			}
			.left{
				width: 234px;
				height: 615px;
				background-color: #0000FF;
				float: left;
				background-image: url(left.webp);
				background-size: 234px 615px;
			}
			.right{
				width: 992px;
				height: 615px;
				background-color: floralwhite;
				float: left;
			}
			.right li{
				width: 234px;
				height: 293.5px;
				list-style: none;
				margin-left: 14px;
				margin-bottom: 14px;
				float: left;
				background-repeat: no-repeat;
				background-image: url(1.png);
				background-size: 234px 293.5px;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<div class="left">
				
			</div>
			<ul class="right">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>

6. 上面有图片的导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>上面有图片的导航栏</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.banner{
				margin: auto;
				width: 612.8px;
				height: 60px;
			}
			.banner img{
				width: 612.8px;
				height: 60px;
			}
			.nav{
				margin: auto;
				width: 612.8px;
				height: 60px;
				background-color: #ccc;
			}
			.nav li{
				list-style: none;
				float: left;
				height: 60px;
				text-align: center;
				line-height: 60px;
				width: 122.56px;
			}
			.nav li a:hover{
				background-image: url(end.jpg);
				color: ghostwhite;
			}
			.nav li a{
				display: inline-block;
				text-decoration: none;
				color: orange;
				background-image: url(begin.jpg);
				height: 60px;
				width: 122.56px;
			}
		</style>
	</head>
	<body>
		<div class="banner">
			<img src="banner.webp" />
		</div>
		<ul class="nav">
			<li><a href="#">娱乐</a></li>
			<li><a href="#">游戏</a></li>
			<li><a href="#">学习</a></li>
			<li><a href="#">美食</a></li>
			<li><a href="#">宠物</a></li>
		</ul>
	</body>
</html>

7. 两侧的广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>两侧的广告</title>
		<style>
			.left{
				position: fixed;
				background-color: #008000;
				top: 50px;
				width: 125px;
				height: 571px;
				background-size: 250px 571px;
				background-image: url(ea357761c1a951a3bc1c417012cabb47.jpg);
			}
			.right{
				position: fixed;
				background-color: #008000;
				top: 50px;
				right: 0;
				width: 125px;
				height: 571px;
				background-size: 250px 571px;
				background-image: url(ea357761c1a951a3bc1c417012cabb47.jpg);
				background-position: right;
			}
			.content{
				margin: auto;
				height: 2000px;
				width: 100px;
				background-color: #FBBC05;
			}
		</style>
	</head>
	<body>
		<div class="left"></div>
		<div class="right"></div>
		<div class="content"></div>
	</body>
</html>

8. 哈根达斯案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>哈根达斯案例</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				margin: auto;
				width: 310px;
				height: 190px;
			}
			.box .adv{
				position: absolute;
			}
			.box .top{
				position: relative;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img class="adv" src="adv.jpg"/>
			<img class="top" src="top_tu.gif">
		</div>
	</body>
</html>

9. 土豆网

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>土豆网</title>
		<style>
			.box{
				width: 310px;
				height: 190px;
				margin: 100px auto;
			}
			img{
				position: absolute;
			}
			.black{
				width: 310px;
				height: 190px;
				position: relative;
			}
			.black:hover{
				background-color: rgba(0,0,0,.3);
				background: url(arr.png) no-repeat center center;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="#">
				<img src="../哈根达斯案例/adv.jpg" />
				<div class="black"></div>
			</a>
		</div>
	</body>
</html>

10. 微信导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>微信导航栏</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: url(wx.jpg) repeat-x;
			}
			.nav ul{
				margin-top: 20px;
			}
			.nav ul li{
				float: left;
				list-style: none;
				margin-left: 13px;
				/* display: inline-block; */
			}
			.nav ul li a{
				display: inline-block;
				height: 33px;
				padding-left: 15px;
				text-decoration: none;
				background: url(to.png) no-repeat;
			}
			.nav ul li a span{
				display: inline-block;
				padding-right: 15px;
				height: 33px;
				line-height: 33px;
				color: white;
				background: url(to.png) no-repeat right center;
			}
			.nav ul li a:hover,
			.nav ul li a span:hover{
				background-image: url(ao.png);
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<ul>
				<li>
					<a href="#">
						<span>首页</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>帮助与反馈</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>公众平台</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>开放平台</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>微信支付</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>微信广告</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>企业微信</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>表情包开放平台</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>微信网页版</span>
					</a>
				</li>
			</ul>
		</div>
	</body>
</html>

11. 京东三角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>京东三角</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.frist{
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 40px;
				border-color: #0000FF #A52A2A #FBBC05 aqua;
			}
			.second{
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 40px;
				border-color: transparent #A52A2A transparent transparent;
			}
		</style>
	</head>
	<body>
        <div class="frist"></div>
        <div class="second"></div>
	</body>
</html>

12. 旋转生成三角形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转生成三角形</title>
		<style>
			div{
				width: 200px;
				height: 50px;
				border: #ccc solid 1.5px;
				position: relative;
			}
			div::after{
				content: "";
				position: absolute;
				width: 10px;
				height: 10px;
				border-color: #ccc;
				border-width: 0 2px 2px 0;
				border-style: solid;
				right: 20px;
				top: 15px;
				transform: rotate(45deg);
				transition: all 0.2s;
			}
			div:hover::after{
				transform: rotate(225deg);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

13. 旋转显示其它内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转显示其它内容</title>
		<style>
			div{
				margin: auto;
				margin-top: 200px;
				width: 100px;
				height: 100px;
				background-color: #F5DEB3;
				overflow: hidden;
			}
			div::before{
				content: "";
				display: inline-block;
				width: 100px;
				height: 100px;
				background-color: red;
				position: relative;
				transform-origin: left bottom;
				transform: rotate(90deg);
				transition: all 1s;
			}
			div:hover::before{
				transform: rotate(0deg);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

14. 分页按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分页按钮</title>
		<style type="text/css">
			li{
				list-style: none;
				float: left;
				margin-right: 15px;
				border: #CCCCCC solid 1px;
				border-radius: 50%;
				width: 40px;
				height: 40px;
				font-size: 20px;
				line-height: 40px;
				text-align: center;
				cursor: pointer;
				transition: all 0.2s;
			}
			li:hover{
				transform: scale(1.2);
				color: #FBBC05;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>
</html>

15. 热点图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>热点图</title>
	</head>
	<style type="text/css">
		body{
			background-color: #333;
		}
		.map{
			width: 747px;
			height: 614px;
			background: url(map.png) no-repeat;
			margin: 0 auto;
			position: relative;
		}
		.city{
			position: absolute;
			top: 227px;
			right: 193px;
		}
		.dot{
			width: 8px;
			height: 8px;
			background-color: #09f;
			border-radius: 50%;
		}
		.city div[class^="pulse"]{
			width: 8px;
			height: 8px;
			box-shadow: 0 0 12px #009dfd;
			position: absolute;
			top: 50%;
			left: 50%;
			border-radius: 50%;
			transform: translate(-50%,-50%);
			animation: pulse linear 1.2s infinite;
		}
		.pulse2{
			animation-delay: 0.4s !important;
		}
		.pulse2{
			animation-delay: 0.8s !important;
		}
		@keyframes pulse{
			from{
				
			}
			60%{
				width: 40px;
				height: 40px;
				opacity: 1;
			}
			to{
				width: 70px;
				height: 70px;
				opacity: 0;
			}
		}
	</style>
	<body>
		<div class="map">
			<div class="city">
			<div class="dot"></div>
			<div class="pulse1"></div>
			<div class="pulse2"></div>
			<div class="pulse3"></div>
			</div>
		</div>
	</body>
</html>

16. 奔跑的熊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>奔跑的熊</title>
		<style type="text/css">
			body{
				background-color: #ccc;
			}
			div{
				position: absolute;
				width: 200px;
				height: 100px;
				background: url(bear.png);
				animation: bear 0.5s steps(8) infinite,move 3s forwards;
			}
			@keyframes bear{
				from{
					background-position: 0 0;
				}
				to{
					background-position: -1600px 0;
				}
			}
			@keyframes move{
				from{
					left: 0;
				}
				to{
					left: 50%;
					transform: translateX(-50%);
				}
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

17. 两面翻转的盒子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>两面翻转的盒子</title>
		<style type="text/css">
			body{
				perspective: 2000px;
			}
			.box{
				position: relative;
				height: 300px;
				width: 300px;
				margin: 200px auto;
				transition: all 2s;
				transform-style: preserve-3d;
			}
			.front,.back{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				text-align: center;
				color: white;
				line-height: 300px;
				font-size: 50px;
			}
			.front{
				background-color: #FBBC05;
			}
			.back{
				transform: rotateY(180deg);
				background-color: darkgray;
			}
			.box:hover{
				transform: rotateY(180deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="front">Hello</div>
			<div class="back">This is me</div>
		</div>
	</body>
</html>

18. 3D导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D导航栏</title>
		<style type="text/css">
			ul li{
				width: 120px;
				height: 40px;
				list-style: none;
				perspective: 500px;
			}
			.box{
				position: relative;
				width: 100%;
				height: 100%;
				transform-style: preserve-3d;
				transition: all 1s;
			}
			.box:hover{
				transform: rotateX(90deg);
			}
			.front,.bottom{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 40px;
				color: ghostwhite;
			}
			.front{
				background-color: #F5DEB3;
				z-index: 1;
				transform: translateZ(20px);
			}
			.bottom{
				background-color: darkgoldenrod;
				transform: translateY(20px) rotateX(-90deg);
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<div class="box">
					<div class="front">翻翻看</div>
					<div class="bottom">首页</div>
				</div>
			</li>
		</ul>
	</body>
</html>

19. 旋转木马

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转木马</title>
		<style type="text/css">
			body{
				perspective: 5000px;
			}
			section{
				width: 432px;
				height: 432px;
				margin: 100px auto;
				position: relative;
				transform-style: preserve-3d;
				animation: rotate 7s linear infinite;
				background-image: url(pic.jpg);
			}
			section:hover{
				animation-play-state: paused;
			}
			section div{
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background: url(pika.jpg) no-repeat;
			}
			section div:nth-child(1){
				transform: translateZ(600px);
			}
			section div:nth-child(2){
				transform: rotateY(60deg) translateZ(600px);
			}
			section div:nth-child(3){
				transform: rotateY(120deg) translateZ(600px);
			}
			section div:nth-child(4){
				transform: rotateY(180deg) translateZ(600px);
			}
			section div:nth-child(5){
				transform: rotateY(240deg) translateZ(600px);
			}
			section div:nth-child(6){
				transform: rotateY(300deg) translateZ(600px);
			}
			@keyframes rotate{
				from{
					transform: rotateY(0);
				}
				to{
					transform: rotateY(360deg);
				}
			}
		</style>
	</head>
	<body>
		<section>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</section>
	</body>
</html>

100%;
text-align: center;
line-height: 40px;
color: ghostwhite;
}
.front{
background-color: #F5DEB3;
z-index: 1;
transform: translateZ(20px);
}
.bottom{
background-color: darkgoldenrod;
transform: translateY(20px) rotateX(-90deg);
}






  • 翻翻看

    首页




```

19. 旋转木马

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转木马</title>
		<style type="text/css">
			body{
				perspective: 5000px;
			}
			section{
				width: 432px;
				height: 432px;
				margin: 100px auto;
				position: relative;
				transform-style: preserve-3d;
				animation: rotate 7s linear infinite;
				background-image: url(pic.jpg);
			}
			section:hover{
				animation-play-state: paused;
			}
			section div{
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background: url(pika.jpg) no-repeat;
			}
			section div:nth-child(1){
				transform: translateZ(600px);
			}
			section div:nth-child(2){
				transform: rotateY(60deg) translateZ(600px);
			}
			section div:nth-child(3){
				transform: rotateY(120deg) translateZ(600px);
			}
			section div:nth-child(4){
				transform: rotateY(180deg) translateZ(600px);
			}
			section div:nth-child(5){
				transform: rotateY(240deg) translateZ(600px);
			}
			section div:nth-child(6){
				transform: rotateY(300deg) translateZ(600px);
			}
			@keyframes rotate{
				from{
					transform: rotateY(0);
				}
				to{
					transform: rotateY(360deg);
				}
			}
		</style>
	</head>
	<body>
		<section>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</section>
	</body>
</html>
jiangtao@up
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS & CSS3 20 Lessons To Successful Web Development
11-08
CSS＆CSS3：成功网站开发的20个经验教训为入门级CSS程序员提供了易于使用的课程，使用文本，样本练习和视频。每堂课都旨在让你花不到一个小时才能完成。涵盖了CSS的所有基础知识，以及更多高级功能，如添加动态效果...
Head First HTML with CSS & XHTML
10-19
Oh, and if you've never heard of CSS, that's okay - we won't tell anyone you're still partying like it's 1999 - but if you're going to create Web pages in the 21st century then you'll want to know ...
CSS中的&代表的什么
热门推荐
weixin_42861240的博客
09-04 4万+
如源码： ul{ margin-bottom: 20px; &amp; &gt;li { margin-bottom: 0; } } &amp; 表示嵌套的上一级 这是sass的语法，代表上一级选择器 解释成CSS代码如下 ul{margin-bottom: 20px;} ul &gt; li {margin-bottom: 0;}...
CSS中的&代表的什么意思
Rocky balboa
01-07 2986
参考: https://www.jianshu.com/p/bf4330f9f252。.bordered.float 是串联选择器，作用在同一标签上。.bordered .top 是后代选择器，作用在不同标签上。这是sass的语法，代表上一级选择器。& 表示嵌套的上一级。解释成CSS代码如下。
CSS样式中的&选择器
最新发布
听海边涛声
05-23 346
CSS样式中的&选择器
【CSS基础】&符号
weixin_55054681的博客
12-24 2116
表示嵌套的上一级，比如你的代码中，& 表示 .el-row 可以看做是嵌套里面的一个变量，值是代表上一级。的语法,代表上一级选择器,实际编译成css就是 .el-row:last-child{}
CSS样式表&alert框之类
初遇我ㄖ寸の热情呢？
04-15 7780
CSS样式 为了找到元素，一直都是一层一层的找的 有一种属性是style，可以是写在内部的，内联的 也可以是外部，通过一个就样式表的声明一下。放在head里面 样式表前面的限定符，就是限定要修饰的元素 选择元素的方法 tag/id/class 根据tag名 标签 P{color：red；} 根据ID #ID{color：red；} 前面要加#号 根据class .class{color...
CSS&Bootstrap;
10-27
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的，用于快速开发 Web 应用程序和⽹网站的前端框架。
前端开发三件套HTML&CSS&JavaScript
02-23
5CSS导入方式 6CSS选择器 7CSS常见属性 8CSS盒子模型 9CSS浮动 10CSS定位 3.JavaScript 11JS导入方式 12JS基本语法 13JS函数 14JS事件 15JSDOM 4.综合练习 16表格的增删改查 17移动端适配 18Flex弹性布局
1.07 css3新特性
10-07
本资源摘要信息主要介绍CSS3的新特性，包括CSS3的介绍、CSS3选择器、CSS3文本、CSS3边框、CSS3背景、CSS3颜色、CSS3渐变、CSS3盒模型等。 CSS3介绍 CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，...
dorado 7
lanchengxiaoxiao的专栏
10-30 3万+
通用代码 lookupCode  lookupName 性别      $${dorado.getDataProvider("sysLookupTypeAction#getValueByCode").getResult('PLATFORM_SEX')} 有效标识  $${dorado.getDataProvider("sysLookupTypeAction#getValueByCode"
机器学习实战02：Kaggle - House Price Prediction Top 4%
m0_47478595的博客
08-06 1087
一、模块导入 import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings import os warnings.filterwarnings('ignore') %matplotlib inline plt.style.use('ggplot') from sklearn.base import BaseEstimator, TransformerMi
2019年1+X 证书 Web 前端开发中级理论考试——易错题、陌生但又会考到的题目原题+答案（文章含五套题的内容）
黛琳ghz的博客，期待你的关注。
11-19 1万+
本文章是2019年其中1+X 证书 Web 前端开发中级理论考试题的易错题和较为陌生的题目（接触较少），其中理论题包括了单选题30题，多选题15题，判断题5题，每小题的分数为2分。
一个例子弄懂CSS中的 “&“
大雾起了清晨
03-19 278
bordered.float 是串联选择器，作用在同一标签上。.bordered .top 是后代选择器，作用在不同标签上。&是sass的语法，代表上一级选择器。
css属性
A4_Seven的博客
04-24 548
02.CSS属性     2.1 文本 作用 用于定义文本的外观,包括文本颜色、行高、对齐方式、字符间距等. 常见属性 属性名 含义 color 设置文本颜色 line-height 设置行高 text-align 设置水平对齐
css中的&符号作用
willsoooo的博客
10-11 1819
:before相当于.clearfix :before。之前遇到样式&符号一直很疑惑，查了相关资料，知道了其作用。&:after相当于.clearfix :after。表示在嵌套层次中回溯一层，即。
PostgreSQL 诊断项大全
weixin_34381666的博客
09-15 751
标签 PostgreSQL , 一键诊断 背景 一、诊断项类目 - 规格、配置 一 规格 1 数据库实例规格 检测方法 规格配置是否与实际配置相符 cpu mem iops network bandwidth disk size 告警规则处理方法背景知识 二 配置 1 ROLE,DB级定制配置 检测方法 select * from pg_...
css &-的使用
weixin_46451295的博客
04-15 1948
.ab{ &-c{} }
vue css &__
05-08
Vue中的CSS作用域是指在组件中定义的样式只作用于该组件内部，不会影响到外部的其他组件。为了实现CSS作用域，Vue提供了一个特殊的属性——scoped。 在Vue组件的style标签中，可以使用"scoped"属性来限定样式的作用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值