update: css

This commit is contained in:
qianguyihao 2019-11-23 11:16:39 +08:00
parent 71c455e0af
commit bbf68d3848
7 changed files with 56 additions and 44 deletions

View File

@ -1,7 +1,4 @@
> 本文最初于2015-10-04发表于[博客园](http://www.cnblogs.com/smyhvae/p/4855106.html),并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我一起入门和进阶前端。
> 以下是正文。
## 本文重要内容 ## 本文重要内容

View File

@ -33,3 +33,21 @@ CSS的逗号一般写在()里。**不同属性值之间,用的是空格**
``` ```
### 2019-11-01
价格中的羊角符号,有半角和全角之分:
- ¥半角
- ¥全角
可以看出,半角的宽度更小。考虑到容器的空间一般比较紧张,所以推荐使用**半角**。
### 2019-11-19-鼠标悬停时,弹出提示文字
参考链接:[css实现鼠标悬浮后的提示效果](https://www.cnblogs.com/zhaojian-08/p/10074660.html)

View File

@ -624,18 +624,29 @@ 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));
``` ```
打印结果: 打印结果:
@ -645,6 +656,8 @@ obj:王一,王二,王三
arr2:["千古壹号","许嵩"] arr2:["千古壹号","许嵩"]
arr3:[{"myName":"千古壹号","myAge":"28"},{"myName":"许嵩","myAge":"32"}]
``` ```
map的应用场景主要就是以上两种。 map的应用场景主要就是以上两种。

View File

@ -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`中。如果对象里属性名相同,会被覆盖。

View File

@ -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
价格中的羊角符号,有半角和全角之分:
- ¥半角
- ¥全角
可以看出,半角的宽度更小,推荐使用。

View File

@ -258,6 +258,10 @@ Sass 是成熟、稳定、强大的 CSS 扩展语言。入门文档可以看:<
- iconninja<http://www.iconninja.com/> - iconninja<http://www.iconninja.com/>
## 设计素材
- 设优 SHEUI<http://www.sheui.com/Contact/>
## 工具 ## 工具

View File

@ -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>
## 博客 ## 博客