update: css
This commit is contained in:
parent
71c455e0af
commit
bbf68d3848
@ -1,7 +1,4 @@
|
|||||||
|
|
||||||
> 本文最初于2015-10-04发表于[博客园](http://www.cnblogs.com/smyhvae/p/4855106.html),并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我,一起入门和进阶前端。
|
|
||||||
|
|
||||||
> 以下是正文。
|
|
||||||
|
|
||||||
## 本文重要内容
|
## 本文重要内容
|
||||||
|
|
||||||
|
@ -33,3 +33,21 @@ CSS的逗号一般写在()里。**不同属性值之间,用的是空格**,
|
|||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### 2019-11-01
|
||||||
|
|
||||||
|
价格中的羊角符号,有半角和全角之分:
|
||||||
|
|
||||||
|
- ¥半角
|
||||||
|
|
||||||
|
- ¥全角
|
||||||
|
|
||||||
|
可以看出,半角的宽度更小。考虑到容器的空间一般比较紧张,所以推荐使用**半角**。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 2019-11-19-鼠标悬停时,弹出提示文字
|
||||||
|
|
||||||
|
参考链接:[css实现鼠标悬浮后的提示效果](https://www.cnblogs.com/zhaojian-08/p/10074660.html)
|
||||||
|
|
||||||
|
@ -624,26 +624,39 @@ obj:王一,王二,王三
|
|||||||
|
|
||||||
![](http://img.smyhvae.com/20180402_0938.png)
|
![](http://img.smyhvae.com/20180402_0938.png)
|
||||||
|
|
||||||
**举例2**:【重要案例】
|
**举例2**:【重要案例,实际开发中经常用到】
|
||||||
|
|
||||||
将A数组中某个属性的值,存储到B数组中。代码举例:
|
将A数组中某个属性的值,存储到B数组中。代码举例:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const arr1 = [
|
const arr1 = [
|
||||||
{ name: '千古壹号', age: '28' }, { name: '许嵩', age: '32' }
|
{ name: '千古壹号', age: '28' },
|
||||||
|
{ name: '许嵩', age: '32' },
|
||||||
];
|
];
|
||||||
const arr2 = arr1.map(item => item.name); // 将数组 arr1 中的 name 属性,存储到 数组 arr2 中
|
|
||||||
|
// 将数组 arr1 中的 name 属性,存储到 数组 arr2 中
|
||||||
|
const arr2 = arr1.map(item => item.name);
|
||||||
|
|
||||||
|
// 将数组 arr1 中的 name、age这两个属性,改一下“键”的名字,存储到 arr3中
|
||||||
|
const arr3 = arr1.map(item => ({
|
||||||
|
myName: item.name,
|
||||||
|
myAge: item.age,
|
||||||
|
})); // 将数组 arr1 中的 name 属性,存储到 数组 arr2 中
|
||||||
|
|
||||||
console.log('arr1:' + JSON.stringify(arr1));
|
console.log('arr1:' + JSON.stringify(arr1));
|
||||||
console.log('arr2:' + JSON.stringify(arr2));
|
console.log('arr2:' + JSON.stringify(arr2));
|
||||||
|
console.log('arr3:' + JSON.stringify(arr3));
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
打印结果:
|
打印结果:
|
||||||
|
|
||||||
```
|
```
|
||||||
arr1:[{"name":"千古壹号","age":"28"},{"name":"许嵩","age":"32"}]
|
arr1:[{"name":"千古壹号","age":"28"},{"name":"许嵩","age":"32"}]
|
||||||
|
|
||||||
arr2:["千古壹号","许嵩"]
|
arr2:["千古壹号","许嵩"]
|
||||||
|
|
||||||
|
arr3:[{"myName":"千古壹号","myAge":"28"},{"myName":"许嵩","myAge":"32"}]
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,12 +22,6 @@ function getFirstNode(ele){
|
|||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 断点调试
|
### 断点调试
|
||||||
|
|
||||||
(1)先让程序运行一遍。
|
(1)先让程序运行一遍。
|
||||||
@ -58,6 +52,21 @@ function getFirstNode(ele){
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 2019-05-20-给数组、对象赋值
|
||||||
|
|
||||||
|
**数组赋值的正确写法**:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
this.todayList.splice(0, 0, ...dataList);
|
||||||
|
```
|
||||||
|
|
||||||
|
**对象赋值的正确写法**:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
Object.assign(this.dataObj, dataObj);
|
||||||
|
```
|
||||||
|
|
||||||
|
上方代码中,是将`dataObj` 的值追加到`this.dataObj`中。如果对象里属性名相同,会被覆盖。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -81,24 +81,6 @@ Vue的全局变量空间:`this.$root.data`,我们可以在这里面存放数
|
|||||||
|
|
||||||
- css 动画实现闪烁效果:<https://blog.csdn.net/wangxiuyan0228/article/details/80701523>
|
- css 动画实现闪烁效果:<https://blog.csdn.net/wangxiuyan0228/article/details/80701523>
|
||||||
|
|
||||||
|
|
||||||
### 2019-05-20
|
|
||||||
|
|
||||||
**数组赋值的正确写法**:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
this.todayList.splice(0, 0, ...dataList);
|
|
||||||
```
|
|
||||||
|
|
||||||
**对象赋值的正确写法**:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
Object.assign(this.dataObj, dataObj);
|
|
||||||
```
|
|
||||||
|
|
||||||
上方代码中,是将`dataObj` 的值追加到`this.dataObj`中。如果对象里属性名相同,会被覆盖。
|
|
||||||
|
|
||||||
|
|
||||||
### 2019-05-20-css3动画水平/镜像翻转
|
### 2019-05-20-css3动画水平/镜像翻转
|
||||||
|
|
||||||
参考链接1:<https://www.oschina.net/question/2443483_247744>
|
参考链接1:<https://www.oschina.net/question/2443483_247744>
|
||||||
@ -264,16 +246,4 @@ css部分:(重点是 background 属性的写法)
|
|||||||
|
|
||||||
使用hover为div添加边框时,页面布局发生错位的解决办法:https://blog.csdn.net/u014033756/article/details/51049574
|
使用hover为div添加边框时,页面布局发生错位的解决办法:https://blog.csdn.net/u014033756/article/details/51049574
|
||||||
|
|
||||||
### 2019-11-01
|
|
||||||
|
|
||||||
价格中的羊角符号,有半角和全角之分:
|
|
||||||
|
|
||||||
- ¥半角
|
|
||||||
|
|
||||||
- ¥全角
|
|
||||||
|
|
||||||
可以看出,半角的宽度更小,推荐使用。
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -258,6 +258,10 @@ Sass 是成熟、稳定、强大的 CSS 扩展语言。入门文档可以看:<
|
|||||||
|
|
||||||
- iconninja:<http://www.iconninja.com/>
|
- iconninja:<http://www.iconninja.com/>
|
||||||
|
|
||||||
|
## 设计素材
|
||||||
|
|
||||||
|
- 设优 SHEUI:<http://www.sheui.com/Contact/>
|
||||||
|
|
||||||
|
|
||||||
## 工具
|
## 工具
|
||||||
|
|
||||||
|
@ -28,6 +28,7 @@
|
|||||||
- 反向面试(反问面试官的问题):<https://github.com/yifeikong/reverse-interview-zh>
|
- 反向面试(反问面试官的问题):<https://github.com/yifeikong/reverse-interview-zh>
|
||||||
|
|
||||||
|
|
||||||
|
- 掘金前端面试题合集:<https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md>
|
||||||
|
|
||||||
## 博客
|
## 博客
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user