小小觉醒的个人主页 - 动态

赞了这篇文章

3年前

掌握这20个JS技巧，做一个不加班的前端人

JavaScript真的是一门很棒的语言，值得学习和使用。对于给定的问题，可以有不止一种方法来达到相同的解决方案。在本文中，我们将只讨论最快的。...

2.5k

175

前端

·

3年前

图片文件常用的两种处理方式二进制与base64字符串

平时我们处理那些要上传的图片文件，通常会有两种方式，一个是二进制，另一个是base64字符串的方式。一.二进制方式 1.预览 (1)file表单onchange事件 (2...

0

赞了这篇文章

公众号：macrozheng

·

5年前

如何在5天内学会Vue？聊聊我的学习方法！

先说下为什么用学习Vue这个例子来谈我的学习方法？其实关注我的朋友很多都是从我的Github上面来的，大多数都是Java后端开发者，Vue作为一种前端技术，掌握的人并不多。...

173

37

赞了这篇沸点

前端

·

3年前

前端基础认知

常见的五大浏览器：

IE浏览器
火狐浏览器（Firefox）
谷歌浏览器（Chrome）
Safari浏览器
欧朋浏览器（Opera）
HTML页面固定结构

每一页文章内容是有固定的结构的，如：开头、正文、落款等……
网页中也是存在固定的结构的，如：整体、头部、标题、主体
网页中的固定结构是要通过特点的 HTML标签进行描述的
HTML骨架结构标签

html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题

展开

今天学到了

赞过

1

赞了这篇沸点

前端

·

3年前

HTML标签的结构

标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
HTML标签与标签之间的关系

父子关系（嵌套关系）

<head>
<title></title>
</head>
兄弟关系（并列关系）

<head></head>
<body></body>
HTML常用标签

段落标签
特点：
段落之间存在间隙
独占一行
<P>
我是段落标签
</P>
换行标签
特点：
单标签
让文字强制换行
<br>
水平线标签
特点：
单标签
在页面中显示一条水平线
<hr>

展开

赞过

3

2

赞了这篇沸点

前端

·

3年前

图片标签
特点：
单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置
< img src=" " alt=" ">
属性名：src
属性值：目标图片的路径
属性名：alt
属性值：替换文本
当图片加载失败时，才显示alt的文本
当图片加载成功时，不会显示alt的文本
链接标签
特点：
双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性
```html
<a href=" ">超链接</a >
```
属性名：href
属性值：点击之后跳转去哪一个网页（目标网页的路径）
无序列表
标签名说明
ul 表示无序列表的整体，用于包裹li标签
li 表示无序列表的每一项，用于包含每一行
有序列表
标签名说明
ol 表示有序列表的整体，用于包裹li标签
li 表示有序列表的每一项，用于包含每一行
自定义列表
标签名说明
dl 表示有序列表的整体，用于包裹dt/dd标签
dt 表示自定义列表的主题
dd 表示自定义列表对主题的没一项内容
表格标签
标签名说明
table 表格整体，可用于包裹多个tr
tr 表格每行，可用于包裹td
td 表格单元格，可用于包裹内容

展开

赞过

1

赞了这篇沸点

前端

·

3年前

input标签
标签名 type属性值说明
input text 文本框，用于输入单行文本
input password 密码框，用于输入密码
input radio 单选框，用于多选一
input checkbox 多选框，用于多选多
input file 文件选择，用于之后上传文件
input submit 提交按钮，用于提交
input reset 重置按钮，用于重置
input button 普通按钮，默认无功能
下拉菜单标签标签组成： select标签：下拉菜单的整体 option标签：下拉菜单的每一项
文本域标签
<textarea>文本内容</textarea>
常见属性：
cols:规定了文本域内可见宽度
rows：规定了文本域内可见行数
lable标签把表单内容包裹起来，作为表头
无语义化标签 div、span
实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
<div>
<span></span>
</div>

展开

赞过

1

赞了这篇沸点

前端

·

3年前

审核中 Flex布局模型构成
目标：能够使用Flex布局模型灵活、快速的开发网页
基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局
父元素添加 display: flex，子元素可以自动的挤压或拉伸
父元素为弹性容器,子元素为弹性盒子

开启弹性容器 flex布局 display: flex;

每个盒子左右都有间隙 2倍 justify-content: space-around

两侧没有间隙 justify-content: space-between

间隙一样大 justify-content: space-evenly

垂直居中对齐 align-items: center

拉伸需要把子盒子的高度注释 align-items: stretch;

展开

等人赞过

4

赞了这篇沸点

前端

·

3年前

一、定位
1.1 网页常见布局方式
1. 标准流
1. 块级元素独占一行 → 垂直布局
2. 行内元素/行内块元素一行显示多个 → 水平布局
2. 浮动
1. 可以让原本垂直布局的块级元素变成水平布局
3. 定位
1. 可以让元素自由的摆放在网页的任意位置
2. 一般用于盒子之间的层叠情况

相对定位
介绍：自恋型定位，相对于自己之前的位置进行移动
代码：position : relative
特点：
1. 需要配合方位属性实现移动
2. 相对于自己原来位置进行移动
3. 在页面中占位置 → 没有脱标
➢ 应用场景：
.配合绝对定位组CP（子绝父相）
用于小范围的移动

绝对定位
介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
代码：position : absolute
特点：
1. 需要配合方位属性实现移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置 → 已经脱标
应用场景：
1. 配合绝对定位组CP（子绝父相）

固定定位
介绍：死心眼型定位，相对于浏览器进行定位移动
代码：position : fixed
特点：
1. 需要配合方位属性实现移动
2. 相对于浏览器可视区域进行移动
3. 在页面中不占位置 → 已经脱标
应用场景：
1. 让盒子固定在屏幕中的某个位置

子绝父相的含义是什么？
• 子元素：绝对定位
• 父元素：相对定位
➢ 子绝父相的应用场景是什么？
• 让子元素相对于父元素进行自由移动
➢ 子绝父相的好处是什么？
• 父元素是相对定位，则对网页布局影响最小

展开

赞过

2

赞了这篇沸点

前端

·

3年前

让盒子垂直水平居中的三种方法:

1:定位,子绝父相
.father {
position: relative;
}

.son {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}

2:flex布局(最常用)
.father {
display: flex;
justify-content: center;
align-items: center;
}
.son {
}

3:transform
.father {
position: relative;
}

.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

展开

赞过

2

3

赞了这篇沸点

前端

·

3年前

传统圣杯，两边固定，中间自适应

.box {
display: flex;
width: 100%;
height: 40px;
background-color: #999;
text-align: center;
line-height: 40px;

}

并集选择器
.box div:nth-child(1),
.box div:nth-child(3) {
width: 60px;
height: 40px;
background-color: pink;
}

.box div:nth-child(2) {
flex: 1;
}
</style>
</head>

<body>
<div class="box">
<div>左边</div>
<div>中间</div>
<div>右边</div>
</div>

展开

等人赞过

3

4

赞了这篇沸点

前端

·

3年前

3D空间呈现
<style>
.box {
/* 1.2 添加透视 */
perspective: 800px;
position: relative;
width: 200px;
height: 200px;
margin: 100px auto 0;
/* 1.4 添加过渡 */
transition: all 3s;
/* 1.5 让子元素保持3d立体空间效果 */
/*给父元素添加让子元素保持3d立体空间 */
transform-style: preserve-3d;
}

.box div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

.box div:first-child {
background-color: pink;
}

.box div:last-child {
background-color: skyblue;
/* 1.1 沿着x轴进行旋转 */
transform: rotateX(80deg);
}

/* 1.3 box旋转 */
.box:hover {
transform: rotateY(-80deg);
}
</style>
</head>

<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>

展开

赞过

1

赞了这篇沸点

前端

·

3年前

走马灯（动画）
<style>
li {
list-style: none;
}

img {
width: 200px;
}

.box ul {
width: 2000px;
animation: move 5s infinite linear;
}

.box li {
float: left;
}

.box {
overflow: hidden;
width: 600px;
height: 112px;
border: 5px solid #000;
margin: 100px auto;
}

/* 定义动画 */
@keyframes move {
0% {
transform: translate3d(0, 0, 0);
}

100% {
transform: translate3d(-1400px, 0, 0);
}
}

/* 鼠标经过暂停动画 */
.box:hover ul {
animation-play-state: paused;
}
</style>
</head>

<body>
<div class="box">
<ul>
<li><img src="./images/1.jpg" alt="" /></li>
<li><img src="./images/2.jpg" alt="" /></li>
<li><img src="./images/3.jpg" alt="" /></li>
<li><img src="./images/4.jpg" alt="" /></li>
<li><img src="./images/5.jpg" alt="" /></li>
<li><img src="./images/6.jpg" alt="" /></li>
</ul>
</div>
</body>

展开

赞过

2

赞了这篇沸点

前端

·

3年前

奔跑动画
<style>
/* 1.1 准备一个盒子显示精灵图 */
.box {
width: 140px;
height: 140px;
/* border: 1px solid #000; */
background: url(./images/bg.png);
/* 逐帧动画 */
animation: move .3s infinite steps(12), move1 3s forwards linear;

}

/* 1.1 定义动画 */
@keyframes move {
0% {
background-position: 0 0;
}

100% {
background-position: -1680px 0;
}
}

/* 多组动画动画之间使用逗号隔开*/
/* animation:动画1,动画2,动画N */
@keyframes move1 {
0% {
transform: translate(0, 0);
}

100% {
transform: translate(800px, 0);
}
}
</style>
</head>

<body>
<div class="box"></div>
</body>

展开

赞过

1

3

赞了这篇沸点

前端

·

3年前

立体呈现
扩散

等人赞过

3

4

赞了这篇沸点

前端

·

3年前

基本数据类型-数字型
<body>
<script>
/*
数据类型分类
基本数据类型: 数值字符串布尔空未定义
引用数据类型: 对象
*/
// 1 数值
let age = 18 // 正整数
let price = 88.88 // 小数
let num = -50 // 负数
// 在js里面把正整数小数负数统称为数字型(Number)
/* 2 数学符号也叫算术运算符
数字型经常和算术运算符一起使用
*/
console.log(1 + 1) // 2
console.log(1 * 1) //1
console.log(1 / 1) // 1
console.log(4 - 2) // 2
// 取模运算取余运算
console.log(4 % 2) // 余数是 0
console.log(5 % 2) // 余数是 1
console.log(3 % 5) // 余数是 3
console.log('-----------------------')

// NaN not a number 不是一个数字
console.log('哈哈哈' - 3) // NaN
console.log(NaN + 3) // NaN
console.log(NaN / 3)
console.log(NaN === NaN) // false
// 任何对NaN的操作都会返回一个NaN 属性粘性的
</script>
</body>

展开

赞过

1

赞了这篇沸点

前端

·

3年前

3D导航栏
<style>
.box {
position: relative;
width: 200px;
height: 70px;
transform-style: preserve-3d;
transition: all 2s;
margin: 80px auto;
}

.box div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

.box div:first-child {
background-color: pink;
transform: translateZ(30px);

}

.box div:last-child {
background-color: red;
transform: translateY(30px) rotateX(90deg) ;
}

.box:hover {
transform: rotateX(-90deg);
}
</style>
</head>

<body>
<div class="box">
<div>前面</div>
<div>后面</div>
</div>
</body>

展开

赞过

1

赞了这篇沸点

前端

·

3年前

立方体呈现:
<style>
.box {
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
transition: all 5s;
margin: 100px auto;
}

.box div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

.box div:first-child {
background-color: aquamarine;
transform: translateZ(-150px);
}

.box div:last-child {
background-color: blueviolet;
transform: translateZ(150px);
}

.box:hover {
transform: rotateY(100deg);
}
</style>
</head>

<body>
<div class="box">
<div>前面</div>
<div>后面</div>
</div>
</body>

展开

赞过

1

赞了这篇沸点

前端

·

3年前

JS变量

<script>
/* 声明变量语法
let 变量名
let是关键字所谓的关键字就是系统提供专门使用来声明变量
age就是变量的名称也叫标识符
*/
// 1 声明了一个年龄变量
let age
// 2 赋值将18这个数据存入到了age这个"容器"里面
age = 18
console.log(age)
/* 3 声明变量同时赋值变量初始化 */
// let num = 20
// console.log(num)
console.log('-------------')
let num = 20
let uname = '张三'
console.log(num)
console.log(uname)
</script>

变量的使用更新：
<script>
/* 1 更新变量 */
let age = 18
console.log(age)
age = 19
console.log(age)
/*let 不允许多次声明一个变量 */
/* Uncaught SyntaxError: Identifier 'age' has already been declared 变量已被声明 */
// let age = 30
/* 2 声明多个变量变量之间使用逗号隔开不提倡 */
// let num1 = 20,
// uname = '王家旺'
// console.log(num1, uname)
/* 提倡一行声明一个变量代码的可读性非常好 */
let num1 = 23
let uname = '王家旺'
console.log(num1, uname)
</script>

展开

赞过

1

赞了这篇沸点

前端

·

3年前

数据类型

基本数据类型: 引用数据类型

1:number 数字型 object 对象

2:string 字符串型

3:boolean 布尔型

4:undefined 未定义型

5:null 空类型

------

数字类型（Number）

123属于数字型，’123‘ 属于字符串型

------

字符串型（string)

用单引号 ' ' 或者反引号包裹的内容都叫字符串

模板字符串

使用场景：拼接字符串和变量

内容拼接变量时，用反引号``包裹内容，用${ }包裹变量名称

------

布尔类型（boolean）

表示肯定或否定时在计算机中对应的是布尔类型数据。
它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）

------

未定义类型（undefined）

声明一个变量，但是没有赋值

------

空类型（null）

将来存放对象的时候可以给null

将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

把 null 作为尚未创建的对象

null 和 undefined 区别：
undefined 表示没有赋值
null 表示赋值了，但是内容为空

数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

typeof可以检查变量名的类型

输入格式为：

let age = 18

console.log(typeof age)

这个就是数字类型number

类型转换分两种。隐式转换和显式转换

为什么需要转换：因为从用户得到的数据都是字符串,而字符串和数字相加会变成相连，所以要转换

------

隐式转换

+号两边只要有一个是字符串，都会把另外一个转成字符串

除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型

将字符串转换成数字型，比如：

let price = +prompt('请输入商品价格')

在prompt的前面加个 + 号，系统就自动转换成数字型了

展开

赞过

1

2