一、字体图标
<style>
button .iconfont {
font-size: 40px;
color: orange;
}
</style>
</head>
<body>
<button><i class="iconfont icon-sousuo"></i></button>
</body>font-class 引用
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
与 Unicode 使用方式相比，具有如下特点：
1、相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
2、因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
使用步骤如下：
第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css">第二步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span>****" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。****
二、CSS样式的继承
<style>
ul {
color: red;
/*
会继承的属性：字体属性、文本属性、文字颜色等
不会继承：宽高、内外边距、……
*/
}
a {
color: pink;
}
</style>
</head>
<body>
<ul>
<li><a href="#">超链接</a></li>
<li>我是一个li</li>
<li>我是一个li</li>
<li>我是一个li</li>
</ul>
</body>
</html>会继承的属性：字体属性、文本属性、文字颜色等
不会继承的属性：宽高、内外边距、定位、背景、轮廓等
三、过渡
<style>
div {
width: 20px;
height: 30px;
background-color: pink;
transition-property: width height;
transition-duration: 3s;
transition-delay: 2s;
transition-timing-function: steps(40);
/* transition: all 3s; */
}
div:hover {
width: 200px;
height: 300px;
background-color: aqua;
}
</style>| transition-property | 指定应用过渡属性的名称。 none没有过渡动画。 all所有可被动画的属性都表现出过渡动画。 |
| transition-duration | 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s，表示不出现过渡动画。 |
| transition-delay | 属性规定了在过渡效果开始作用之前需要等待的时间。 |
| transition-timing-function | 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个 transition 变化过程中，变化速度可以不断改变。 |
| transition | 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是：hover , :active或者通过 JavaScript 实现的状态变化。 |
四、css3动画
<style>
div {
width: 300px;
height: 50px;
background-color: pink;
/* animation-name: myMove;
animation-duration: 3s; */
/* animation-delay: 2s; */
/* animation-iteration-count: infinite; */
/* animation-direction: alternate-reverse; */
animation: myMove 3s infinite alternate;
}
@keyframes myMove {
/* from {
width: 300px;
height: 50px;
background-color: pink;
}
to {
width: 600px;
height: 300px;
background-color: red;
} */
0% {
width: 300px;
height: 50px;
background-color: pink;
transform: rotate(45deg);
}
25% {
width: 400px;
height: 70px;
background-color: green;
transform: rotate(145deg);
}
50% {
width: 600px;
height: 80px;
background-color: greenyellow;
transform: rotate(245deg);
}
100% {
width: 1200px;
height: 300px;
background-color: red;
transform: rotate(345deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
| animation | 属性用来指定一组或多组动画，每组之间用逗号相隔。 |
| animation-name | 指定一个或多个 @keyframes at-rule 的名称，这些 at-rule 描述了要应用于元素的动画。多个 @keyframes at-rule 以逗号分隔的名称列表的形式指定。如果指定的名称不匹配任何 @keyframes at-rule，则不会对任何属性进行动画处理。 |
| animation-duration | 属性设置动画完成一个动画周期所需的时间。 |
| animation-delay | 属性指定从应用动画到元素开始执行动画之前等待的时间量。动画可以稍后开始、立即从开头开始或立即开始并在动画中途播放。 |
| animation-iteration-count | 属性设置动画序列在停止前应播放的次数 |
| animation-direction | 属性设置动画是应正向播放、反向播放还是在正向和反向之间交替播放。 |
| animation-fill-mode | 设置 CSS 动画在执行之前和之后如何将样式应用于其目标。 |
| animation-timing-function | 属性设置动画在每个周期的持续时间内如何进行。 |
| animation-play-state | 属性设置动画是运行还是暂停 |
| @keyframes | 关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。和转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。 |
五、转换
2D
<style>
.father {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
}
.son {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: greenyellow;
/* transform: translateX(100px);
transform: translateY(100px); */
/* transform: translate(100px, 100px); */
/* transform: rotateX(45deg); */
/* transform: rotateY(45deg); */
/* transform: translateX(100px) rotateX(45deg); */
/* transform: scaleX(0.5); */
/* transform: scaleY(0.5); */
/* transform: scale(0.2); */
transform: skewX(45deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>3D
<style>
.father {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
transform-style: preserve-3d;
perspective: 800px;
}
.son {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: greenyellow;
/* transform: translateZ(100px); */
transform: rotateX(45deg);
transform-origin: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>| transform | 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。 |
| translate | 允许你单独声明平移变换，并独立于 transform属性。 单个长度/百分值 一个长度值或百分比，表示二维平移，与声明了 X 轴和 Y 轴的平移一样（此时省略的第二个值默认为 0）。等同于在 两个长度/百分值 两个长度值或百分比表示在二维上分别按照指定 X 轴和 Y 轴的值进行的平移。等同于在 三个长度/百分值 三个长度值或百分比，表示分别指定 X 轴、Y 轴、Z 轴的值进行三维平移。等同于 none 表示不应用平移效果。 |
| rotate | 属性允许你单独设置 x,y或者z轴名称加上角度值 |
| scale | 允许你可以分别且独立地指定 CSS 属性transform缩放的比例。 单一数值 单一的数值即指定了一个缩放系数，同时作用于 X 轴和 Y 轴让该元素进行缩放，相当于指定了单个值的 scale()(2D 缩放) 函数。 两个长度/百分值 两个数值即分别指定了 2D 比例的 X 轴和 Y 轴的缩放系数，相当于指定了两个值的 scale()（2D 缩放）函数。 三个长度/百分值 三个数值即分别指定了 3D 比例的 X 轴、Y 轴和 Z 轴的缩放系数。相当于一个 scale3d() 函数。 none 指定不进行缩放。 |
| transform-origin | 属性让你更改一个元素变形的原点。 |
| perspective | 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。 |
| transform-style | 设置元素的子元素是位于 3D 空间中还是平面中。 |
六、阴影
<style>
p {
text-shadow: 2px 2px 2px rgb(243, 8, 47);
}
div {
width: 300px;
height: 300px;
background-color: aqua;
box-shadow: 2px 2px 8px pink;
}
</style>| text-shadow | 为文字添加阴影。可以为文字与 decoration 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。 |
| box-shadow | 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。 |
七、媒体查询
<style>
body {
height: 2000px;
background-color: aqua;
}
@media only screen and (max-width:600px) {
body {
background-color: pink;
}
}
</style>| @media | at规则可用于基于一个或多个媒体查询的结果来应用样式表的一部分。使用它，你可以指定一个媒体查询和一个 CSS 块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该 CSS 块才能应用于该文档。 |
八、渐变
<style>
#box {
height: 200px;
background-color: red;
/* 浏览器不支持时显示 */
background-image: linear-gradient(pink, green);
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="box"></div>
</body>| linear-gradient | 创建一个由两种或多种颜色沿一条直线进行线性过渡的图像，其结果是 <gradient> 数据类型的对象，此对象是一种特殊的 <image> 数据类型。 |
九、多列
<style>
p {
column-count: 2;
column-gap: 400px;
}
</style>| column-count | 描述元素的列数。 |
| column-gap | 属性用来设置元素列之间的间隔大小。 |
十、js的三种引入方式
行内引入
<button onclick="alert('你完蛋了');alert('玩不了一点')">点击</button>内嵌引入方式
<script>
alert('666666')
</script>外链引入
script标签存在src属性之后，其内部就无法再写js代码
<script src="./02-index.js"></script>十一、对话框
警示框
alert("你完犊子了")输入框
prompt("请输入用户名：")控制台打印
console.log("我是在控制台显示的")页面打印
document.write("我是即将显示在页面上的")十二、注释
// 我是单行注释
/** 多行
* wo
* shi
* duohang
* zhushi
*
*/十三、变量
变量：代码运行时，存储数据的容器
* 变量名的命名规范：
* 1、变量名只能由有效符号组成（大小写的字母、数字、下划线、$）
* 2、不能以数字开头
* 3、不能使用关键字或者保留字
* 4、变量名最好有意义，不要使用a,b,c这类的单词
* 5、变量名尽量遵循小驼峰命名法
* userName user_name
* 6、类名采用大驼峰
* UserName
*undefined 表示变量只声明，但是未进行赋值 var存在变量提升，let不存在变量提升
*变量声明 var let
let 变量名
let pwd
*变量赋值
pwd = prompt("请输入密码：")
*变量的初始化
let pwd = prompt("请输入用户名：")
*变量的值可以重新赋值
pwd = 666
alert(pwd)
* let关键字生命的变量不能重复声明
十四、常量
const PI = 3.1415926
PI = 1.1111
alert(PI)
const声明的常量不能被更改
十五、数据类型
数据类型基本数据类型和引用数据类型
基本数据类型
1、数字类型 number
let a = 1
alert(typeof (a))
let b = 3.14 （浮点型不精确）
alert(typeof (b))2、字符串数据类型
被单引号、双引号括起来的字符序列
let str1 = '1234'
alert(typeof (str1))
let str2 = "1234"
alert(typeof (str2))字符串的拼接
document.write("str1的值是:" + str1)模板字符串 `ncdjc`
alert(typeof (str3))
let userName = prompt("请输入用户名：")
let pwd = prompt("请输入密码：")
document.write(`用户名是：${userName},密码是：${pwd}`)
document.write(`
<input type="text"><br>
<h1>wohsuasj</h1>
<p>cdkcdkcd</p>
`)3、布尔值
boolean
true false
| typeof | 运算符返回一个字符串，表示操作数的类型。 |
十六、算数类型符
+ 加
- 减
* 乘
/ 除
% 取余
**平分十七、数据转换类型
转换为number
1、Number()
alert(typeof (Number("123")))
2、parseInt()\parseFloat()
把数据尽可能的转换为整型
alert(parseInt("200px"))
把数据尽可能的转换为浮点型
alert(parseFloat("333.222px"))
3、+
console.log(typeof (+"123"))
console.log(typeof (+"false"))
console.log(typeof (+"cmdckdcmdk"))
toFixed() 小数点的位数
let a = 3.1415926
console.log(a.toFixed(2))
转换为字符串
toString（）
let b = 20
console.log(typeof (b.toString()))
String()
console.log(typeof (String(b)))
转换为布尔值
let c = 0
console.log(Boolean(c))十八、比较运算符
> 大于
< 小于
>=大于等于
<=小于等于
==等于
==:会自动将"2"转换为2，然后再进行比较
！=不等于十九、赋值运算符
a += 1 // a = a + 1
a -= 3 //a = a - 3
a *= 2 //a = a * 2
a /= 2 //a = a / 2二十、自加自减运算符
let a = 12
后加加的优先级小于赋值运算符，因此先进行赋值运算，在进行后加加
let b = a++ //b = 12 a = 13
console.log(b)
前加加的优先级高于赋值运算符，因此先进行前加加，在进行赋值运算
let c = ++a //c = 14 a = 14
console.log(c)
let d = a-- //d = 14 a = 13
console.log(a)
let e = --a //e = 12 a = 12
console.log(e)二十一、逻辑运算符
&& || ！ 与 或 非
&&:两真为真，一假则假
console.log(2 < 3 && 3 > 2)
||：一真则真，两假才假
console.log(2 > 3 || 3 > 2)
console.log(!(2 > 3))
二十二、转义字符
<script>
"i\'am "
</script>二十三、单分支
if(条件){
条件成立时执行的代码
}
let age = +prompt("请输入年龄：")
if (age >= 18) {
alert("成年了，进去上网吧")
}二十四、双分支
if(条件){
条件满足时执行的代码
}else{
条件不满足时执行的代码
}
let age = +prompt("请输入年龄：")
if (age >= 18) {
alert("成年了，去上网吧")
} else {
alert("未成年，一边去")
}二十五、多分支
let score = prompt("请输入成绩：")
if (score >= 90) {
alert("成绩优秀")
} else if (score >= 70) {
alert("成绩良好")
} else if (score >= 60) {
alert("成绩及格")
} else {
alert("你完蛋了")
}二十六、三元运算符
条件?条件成立时执行的代码:条件不成立时执行的代码
age > 18 ? alert("成年了") : alert("未成年")二十七、switch多分支语句
<script>
let week = prompt("请输入今天星期几：")
switch (week) {
case "1":
alert("今天星期一，猴子穿新衣~~~")
break
case "2":
alert("今天星期二，猴子有点2~~·")
break
case "3":
alert("今天星期三，猴子去爬山~~~")
break
case "4":
alert("今天星期四，猴子要找事~~~")
break
case "5":
alert("今天星期五，猴子打老虎~~~")
break
case "6":
alert("今天星期六，猴子666~~~")
break
case "7":
alert("今天星期天，猴子要上天~~~")
break
default:
alert("你是猴子派来的救兵吗？？？")
break
}
switch (week) {
case "1":
case "2":
case "3":
case "4":
case "5":
alert("工作日");
break;
case "6":
case "7":
alert("休息日");
break;
default:
alert("你是猴子派来的救兵吧~~~");
break;
}
</script>
</body>
扫一扫
104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
