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:王一,王二,王三
 | 
			
		||||
 | 
			
		||||

 | 
			
		||||
 | 
			
		||||
**举例2**:【重要案例】
 | 
			
		||||
**举例2**:【重要案例,实际开发中经常用到】
 | 
			
		||||
 | 
			
		||||
将A数组中某个属性的值,存储到B数组中。代码举例:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
    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('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)先让程序运行一遍。
 | 
			
		||||
@ -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>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 2019-05-20
 | 
			
		||||
 | 
			
		||||
**数组赋值的正确写法**:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
this.todayList.splice(0, 0, ...dataList);
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
**对象赋值的正确写法**:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
Object.assign(this.dataObj, dataObj);
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
上方代码中,是将`dataObj` 的值追加到`this.dataObj`中。如果对象里属性名相同,会被覆盖。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 2019-05-20-css3动画水平/镜像翻转
 | 
			
		||||
 | 
			
		||||
参考链接1:<https://www.oschina.net/question/2443483_247744>
 | 
			
		||||
@ -264,16 +246,4 @@ css部分:(重点是 background 属性的写法)
 | 
			
		||||
 | 
			
		||||
使用hover为div添加边框时,页面布局发生错位的解决办法:https://blog.csdn.net/u014033756/article/details/51049574
 | 
			
		||||
 | 
			
		||||
### 2019-11-01
 | 
			
		||||
 | 
			
		||||
价格中的羊角符号,有半角和全角之分:
 | 
			
		||||
 | 
			
		||||
- ¥半角
 | 
			
		||||
 | 
			
		||||
- ¥全角
 | 
			
		||||
 | 
			
		||||
可以看出,半角的宽度更小,推荐使用。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -258,6 +258,10 @@ Sass 是成熟、稳定、强大的 CSS 扩展语言。入门文档可以看:<
 | 
			
		||||
 | 
			
		||||
- 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/shfshanyue/blog/blob/master/post/juejin-interview.md>
 | 
			
		||||
 | 
			
		||||
## 博客
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user