ls
```js function showPages(page, total) { var result = [page]; for (var i = 1; i 1) { result.unshift(page - i) } if (page + i < total) { result.push(page +...
## margin 与容器之间的关系 ### margin 可以改变容器尺寸 **标准盒模型与元素尺寸**  **元素尺寸** 1. 可视尺寸 - clientWidth (实线) 2. 占据尺寸 - outerWidth (虚线) #### margin 与可视尺寸 1. 适用于没有设定 width / height 的普通 block 元素...
https://scotch.io/tutorials/create-a-single-page-app-with-go-echo-and-vue
Apple 打算在 iOS 和 OS X 中使用了一款新的很好看的字体 San Francisco。我第一次看见它是在我的 Apple Watch 中，马上这个字体就可以在[所有的 Apple 设备](https://developer.apple.com/fonts/)中看见。 作为一个开发者，我们经常会遇到需要在网页中使用系统字体的情况。这些网页可能会被嵌入到我们的应用和一些文档中。在这些环境下，网页需要匹配这些嵌入环境的字体对用户体验是十分重要的。想象一下，如果在 Yosemite 中跑的一个应用，它显示 Sparkle 在 Lucida Grande 的感觉。（这个地方我清楚这些名词，不过意思就是网页嵌入到了一个应用中，然后应用的字体和网页的字体不匹配的感觉）。 我们马上就会面对许许多多的内容需要用 San Francisco 字体显示，因此需要通过 CSS 来指定相同的字体。不过实际上，这不是简单的事情。 传统上，我们会去明确地指定字体。比如像这样就可以使用 San...
移动端高清屏的1px边框问题的解决方案很多，比较成熟的是用阿里无线的 [https://github.com/amfe/lib-flexible](https://github.com/amfe/lib-flexible) 方案，它会去动态设置`viewport`的`initial-scale`，所以在遇到边框的时候，我们就不需要做各种的 hack 来解决（比如伪元素，`border-image`）。 但是，我如果是一个比较老的项目，当时在开发的时候，并没有引入`lib-flexible`，同时设计师，和产品经理都对你还原的页面吐槽不断，怎么办？我不可能重新这个是时候引入并使用`lib-flexible`，同时我对 hack 方案一直都比较反对。 终于我想到一个简单的方案，同样还是`1px`的单位，然后是两个选择： - 边框的颜色，我并不根据设计稿来还原，而是选择比设计稿更浅的颜色 - 边框的颜色根据设计稿还原，加上透明度，0.1 或者 0.2 **注意边框线的颜色要使用`rgba`的话，需要加上`background-clip: padding-box;`** 好了，现在终于让产品和设计师满意了。 附：[http://www.w3school.com.cn/cssref/pr_background-clip.asp](http://www.w3school.com.cn/cssref/pr_background-clip.asp)
之前写过一篇表格十字线聚焦效果的分享 #11 ，但是用到了 JS，后来发现可以完全利用 CSS 来实现。 ## 原理 通过`td:hover`配合`::before或::after`，并且将其高度设置无限高，同时改变`::after`或`::before的z-index`值为 -1(让高亮的背景色变为下层)。重要的一点，需要给`table`设置一个`overflow:hidden`，将伪元素溢出的高度截取掉。 show code~ ## html ``` html 50kg 55kg 60kg 65kg 70kg 160cm 20 21 23 25 27 165cm 18 20...
**先说遇到的问题：** 有这样的数组:`[{id: 0}, {id: 1}, {id: 2}, {id: 3}, ...]`，我需要找出`{id: 0}`，想想 ES5 中似乎只有一个查找的方法`indexOf`（哦，`lastIndexOf`从尾巴找），但是因为对象是引用类型，所以`{id: 0} === {id: 0}`返回的是`false`，因此`[{id: 0}, {id: 1}, {id: 2}, {id: 3}, ...].indexOf({id: 0})`是`-1`。 那怎么办，似乎可以用`forEach`了 ``` js let...
腾讯体育的 NBA 直播中的球员数据，会根据鼠标的移动，在鼠标`hover`那一项的上下左右方向生成十字线，可以让用户更方便的阅读表格。 效果像这样：  看了下腾讯体育该页面的鼠标移动时候，表格上 DOM 和其变化，如图：  他应该是根据鼠标移动的时候拿到的`data-coord`，根据它的值对应的横竖列的`tr`设置特殊的`className`，我觉得这样的做法，会比较依赖`data-coord`的生成，不过这个也不难，利用后端模板语言，或者前端各种 view 框架也并不难，就算是自己手写也不费事情，但是可不可以不依赖这个`data-coord`呢？ #### 看下我的实现 Demo 预览：[http://codepen.io/lishengzxc/pen/oLzPxa](http://codepen.io/lishengzxc/pen/oLzPxa)  ##### 1. `hover`的那个``高亮 ``` css td:hover { background-color: red !important; } ``` 一个`css`搞定，主要后面的加的`!important`，这是为了防止`td`所在的`tr`的样式覆盖`td`。...
之前一段时间在做游戏，在游戏中，经常需要用到九宫图，用九宫图可以保证图片的边框不会因为拉伸而走形。在 CSS3 中也有对九宫图的支持 — `border-image`。接下来就去说下它。 ## 语法 ``` css || [ / | / ? / ]? || ``` ### border-image-source 这个没啥好说的...，真要说下，就是可以设置 base64。 ### border-image-slice 这个可以好好唠个10块钱的了，先来找图，估计你看了也就明白了：  `border-image-slice`就是去控制九宫图是怎么切的，根据上图，其中： - 1、2、3、4是绝对不会被拉伸了...
``` html ```