Css

display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;

背景这一个因为滚动条占据空间引起的bug, 查了一下资料， 最后也解决了，顺便研究一下这个属性， 做一下总结，分享给大家看看。 正文昨天， 测试提了个问题， 现象是一个输入框的聚焦提示偏了， 让我修一下, 如下图： 起初认为是红框提示位置不对， 就去找代码看： <Input // ... onFocus={() => setFocusedInputName('guidePrice')} onBlur={() => setFocusedInputName('')}/><Table data-focused-column={focusedInputName} // .../>代码上没有什么问题， 不是手动设置的，而且， 在我和另一个同事， 还有PM的PC上都是OK的： 初步判断是，红框位置结算有差异， 差异大小大概是17px, 但是这个差异是怎么产生的呢？ 就去测试小哥的PC上看， 注意到一个细节， 在我PC上， 滚动条是悬浮的： 在他PC上， 滚动条是占空间的： 在他电脑上， 手动把原本的 overscroll-y: scroll 改成 overscroll-y: overlay 问题就结局了。 由此判定是： 滚动条占据空间 引起的bug。 overscroll-y: overlayCSS属性 overflow， 定义当一个元素的内容太大而无法适应块级格式化上下文的时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。/* 默认值。内容不会被修剪，会呈现在元素框之外 */overflow: visible;/* 内容会被修剪，并且其余内容不可见 */overflow: hidden;/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */overflow: scroll;/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */overflow: auto;/* 规定从父元素继承overflow属性的值 */overflow: inherit;官方描述：overlay  行为与 auto 相同，但滚动条绘制在内容之上而不是占用空间。 仅在基于 WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。表现：html { overflow-y: overlay;}兼容性没有在caniuse上找到这个属性的兼容性， 也有人提这个问题： ...

这本书介绍的方法主要是运用了CSS3的知识，居然的兼容写法，自行查阅查询属性的支持程度入口浏览器前缀处理工具Autoprefixer CSS编码技巧1、减少代码重复 当某些值相互依赖时，应该把它们的相互关系用代码表达出来代码易维护 vs 代码量少currentColor继承inherit2、了解视觉差异3、响应式页面设计 媒体查询的断点不应该由具体的设备来决定，而应该根据设计自身来决定实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应的尺寸4、合理使用简写 合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险5、合理使用预处理器 背景和边框1、半透明边框border: 10px solid hsla(0,0%,100%,.5);background: white;background-clip: padding-box;background-clip 属性规定背景的绘制区域，背景色。由于background-clip的值默认是border-box，背景的颜色会入侵到边框的位置，所以需要设置为padding-box修正。2、多重边框box-shadow：可接受第四个参数数组，水平偏移、垂直偏移、模糊程度、扩张半径可用逗号分隔语法，创建任意数量的投影，第一层投影位于最顶层//可用这个方法实现多个边框，但是如果边框是虚线那就不行了box-shadow: 0 0 0 10px #eee,0 0 0 15px #ddd,0 0 0 20px #ccc;outline:如需两层边框，可先设置一层常规边框，再加上outline（描边）属性来生产外层的边框。使用方式和border一样，位于border外面，可通过outline-offset设置其与边框直接的距离。不接受使用逗号添加多个值。如今，如元素时圆角，则无法贴合圆角（bug，未来可能会可以）。如使用这个属性，最好在不同浏览器中完整地测试最终效果。3、灵活的背景定位background-position：运行指定背景图片距离任意角的偏移量。回退方案：在不支持background-position扩展语法的浏览器中，我们把老套的right、bottom定位值写进background的简写属性中。background-position: right 20px bottom 20px; background-origin：修改背景图片background-position定位的标准。默认是padding-box;background-origin:border-box/padding-box/content-box;因此background-position是以 padding box 为准的进行定位的。想背景图片距离边角的偏移量跟内边距保持一致，可修改background-origin的值为content-box。如不想修改background-origin的默认值，可设置calc()，使用这个函数计算。background-position: calc(100% - 10px) calc(100% - 10px);4、边框内圆角 要实现上图效果，我们习惯会用两个盒子实现。下面介绍一个使用一个盒子实现上图效果。background-color: pink;//设置盒子背景颜色border-radius: 10px;//设置圆角box-shadow: 0 0 0 10px #655;//设置盒子阴影outline: 11px solid #655;//设置盒子outline，一般设置比圆角，阴影大一点，为了更好的效果5、条纹背景linear-gradient：直线过渡radial-gradient：圆过渡，以中心的为起点，颜色过渡通过背景颜色过渡设置，再设置背景大小后面的颜色使用0代替对应的百分百，可以避免修改比例的时候，要改两个数据。注：两个颜色后面跟的百分百是指在哪个位置开始这个样式，两个的差值就是过渡的部分background: linear-gradient(to bottom,#eee 30%,#ddd 30%);background: linear-gradient(to bottom,#eee 30%,#ddd 0);background-size: 100% 15px;斜向条纹（这个只适合45deg的斜向） background: linear-gradient(45deg,#fb2 25%,#58a 0,#58a 50%,#fb2 0,#fb2 75%,#58a 0);background-size: 50px 50px;更好的斜向条纹 ...

概念Transform字面意思就是变形，改变的意思，该元素应用于2D和3D转换，该属性允许我们i元素进行旋转、缩放、移动和倾斜。在css3中transform主要包括以下几种： 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。语法transform: rotate | scale | skew | translate | matrix; 注意：表示一个或者多个函数变换的时候是以空格分开而不是逗号。transform属性实现了一些可用SVG实现的同样功能，它可用于内联(inline)函数和块级(block)元素，它允许我们旋转，缩放和移动元素。他有几个属性值参数：rotate;translate;scale;skew;matrix。旋转rotate 旋转 rotate通过指定的角度参数对原元素指定一个2D 旋转和3D旋转，需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。rotate():2D旋转transform: rotate(45deg); rotateX():沿着X轴3D旋转transform: rotateX(45deg); rotateY():沿着Y轴3D旋转transform: rotateY(45deg); rotateZ():沿着Z轴3D旋转transform: rotateZ(45); rotate3d(x,y,z,angle):3D旋转，接受四个参数，x,y,z介于0-1之间，angle是旋转的度数。元素围绕着xyz在空间中确定的唯一坐标点和原点之间的连线旋转指定的角度，这就是rotate3D。transform: rotate3D(1,1,1,45deg); 移动 translate移动translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动），具体使用方法如下： translateX(x) ， 沿 X 轴位移translateX(x) ， 沿 X 轴位移 translateY(y), 沿Y移动translateY(y) //沿y移动 ranslateZ(z) ， 沿 Z 轴位移，需要配合perspective属性一起使用transform: translateZ(20px); translate(x, y) ， 沿 X Y 轴位移transform: translate(20px,30px); 通过矢量(x,y)指定一个2D translation，x 是第一个过渡值参数，y 是第二个过渡值参数选项。如果未被提供，则y以 0 作为其值。也就是translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体，其基点默认为元素中心点，也可以根据transform-origin进行改变基点。如transform:translate(100px,20px): translate3d(x, y, z) ， 沿 X Y Z 轴位移transform: translate(20px, 20px, 20px); ...

好像当时学习的时候，就是听说css最强大的就是动画了。animation:总共有6个属性 name:动画的名称duration:完成动画的时间timing-function:动画的曲线速度linear速度是相同的， 常用、默认ease,低速开始然后变快然后再慢，ease-in,ease-out,以低速开始、结束ease-in-out,低速开始与结束， 常用cublc-bezier(n,n,n,n),自定义函数delay:动画开始播放的延迟时间interation-count:动画播放的次数n: 自定义次数，默认1次infinite: 无限次diretion:是否反方向播放动画normal 正常，默认方式alternate 反方向定义一个动画的时候需要用到关键词，@keyframes 动画名称动画名称与animation的name字段是一样的定义一个动画<div> kkw</div> <style> div{ ainmation: kkw 1s ease 0 infinate alternate}@keyframes kkw {%0{font-size: 12px}%50{font-size: 24px}100% {font-size: 36px}}</style>

问题：蓝色的背景图使用定位做的遮罩，下面的点击咨询不能触发 解决：给遮罩元素加上属性 pointer-events: none; 原理：这个属性值可以让元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素

form标签创建表单 块元素参数： 1. action:表单提交服务器地址 如果不设置，提交是没有反应2. method:表单提交方式（方法） post 获取信息 get 发送信息（默认值）3. target 提交页面打开在何处打开 _self 当前页面打开 _blank 新页面打开 _new 新打开一个页面，如果是新的就不会在打开一个页面form实现方式通过input标签input 特点： 单标签 行内块元素 默认属性： paddingoutline 轮廓线 跟border一样但不会影响页面布局值： value 显示在框中的默认值placeholder 输入前提示框显示的内容name 定义信息的值autofocus 自动聚焦readonly 将表单设置为只读 数据会提交disabled 将表单设置为禁用 数据不会提交autocomplete 自动补全（on off）<input type="text" placeholder="请输入用户名" name="username" autofocus autocomplete="off">提交按钮 <input type="submit" value="登陆"><input type="button" value="提交">实现效果需要JS密码输入 <input type="password" name="pwd">数字输入 <input type="number" value="100" min="2" max="200" step="5">value 默认值min 最小值max 最大值step 步长搜索框 <input type="search">输入滑块 <input type="range"><br>文件导入 <input type="file"><br> 单文件导入<input type="file" multiple><br> 多文件导入

样式最近因为接触到这个，才搜索了一下这个，它的用法与scoped类似，但是它编译之后更具唯一性，写法稍微麻烦点，记录一下使用方法。这里我用的是less css，在webpack.base.config.js里添加 使用方式：1、在style里添加module。2、样式写法 :class='$style.样式名'

层级结构在我们写html文档的时候,我们所创键的元素默认都是在文档流中排列,那么有在文档流中就有脱离文档流.我们的浮动和绝对定位,固定定位就是让元素脱离文档流.那么先..说说我们的层级结构吧: 按最底层到高层排列 块级元素(block)层级1.背景颜色2.背景图层3.border边框4.普通内容层float浮动层inline-block/inline文本position 定位层级文档流的排列方式就是前面讲的inline/block/inline-block的特性在我们用word文档的时候,引入图片的时候会去选择 文字环绕图片的样式,去更好的节省空间并且更加美观.因此我们引入了浮动这一样式,为的就是节约浏览器的空间.但是,后面慢慢的发现了 浮动样式的布局比display:inline-block更加方面, 因为inline-blcok的解析空格和基线对齐是很头疼的,写一些小demo案例可能不会有那么大的感觉,但是写一些稍微多的会发现div的嵌套也是很头疼的.浮动.好用是好用但是也会造成一些问题.因为设置浮动的元素会半脱离文档流. 半脱离文档流为什么说是版脱离文档流呢?我们前面说到了层级结构,元素浮动起来后,我们可以理解为漂浮到了普通内容层,为什么这么说呢? 我们设置浮动之后,文字会识别到到浮动元素,因此会造成前面元素浮动起来后 后面元素会跑到前面元素下面去但是文字还留在原来的位置上. 块元素是感受不到浮动层的元素,但是inline/inline-block是可以感受到浮动层的,也就造成了上面的现象. 浮动___块级划浮动会将元素转化为块级元素,但却不具有独占一行和父元素宽度100%的特性.而是像inline-block一样由里面的内容撑开.意思就是: 给span标签设置浮动之后, 你就可以给span便签设置宽高和上下margin padding. 浮动---带来的问题浮动是好用,但是同时也带来了些问题就如前面说的,块元素是感受不到浮动元素的.因此 如果父元素是block属性的话,那么就会造成高度塌陷. 高度塌陷就是原本高度由子元素撑开的父元素, 这时候撑开他的子元素飘了, 那么就没人去撑开父元素的高度了,父元素的高度发生了改变,这个现象就叫高度塌陷. 怎么解决浮动带来的问题呢?1.父元素设置固定的宽高浮动元素会造成高度塌陷,是因为元素浮动之后没有内容去撑开父元素的自适应高度.那么这时候如果我们给父元素设置一个固定高度,就不会有高度塌陷这么个现象了. 2.引发bfc(border format context)引发bfc的方法有很多,具体使用是看哪种方法对页面造成的影响最小.都是给父元素设置值 display:inline-block 等可以理解为触发了bfc.同时还可以这么理解,前面所说的行内元素和行内块元素是可以感受到浮动元素的, 那么父元素设置为行内块元素也同样能够感受到浮动的子元素的高度, 那么就不会造成高度塌陷同样的可以设置成:table-cell、tabble-caption 设置overflow值只要overflow值不为默认的visible就能够出发bdc,比如scroll, auto.通常比较习惯使用overflow:hidden,但也会造成一些内容被隐藏的问题. 设置float值子元素悬浮了,那么就把父元素也飘起来那么就在一个平面上了,这时候就可以感受到子元素的高度了. 因此设置父元素的float值不为none就好了. 设置position值既然float半脱离了文档流, 这时候父元素全脱离文档流的话层级更高,因此也就能够感受到底层级的高度了. (别慌,马上就介绍position定位).这里要注意的是:position:static, position:relative 是不脱离文档流的,因此要设置成position:absolute,position:fixed,position:sticky(sticky 要注意兼容性写法, 很多版本还不适用,可以去can i use上查找). 清除浮动clear:both清除浮动本质上就是换行,为什么这么说呢?当给元素设置一个清楚浮动后,这个元素会去感受前面浮动元素的高度大小,然后自适应的调整了下自己的位置. 为什么margin-top 有时候会失效?有些人可能会发现margin-top有时候会失效.其实这不是失效,是找不到看齐的对象.在试验的时候, 可能会发现有时候不管怎么设置上margin值,这个元素都是不动如山.比如下面这个情况,有兴趣的同学可以自己动手调试代码,代码如下, .a{ width: 100px; height: 100px; background-color: yellow; border: 1px solid black; } .b{ width: 500px; height: 500px; background-color: lightblue; /* border: 1px solid ; */ /* padding-top: 10px; */ /* overflow: hidden; */ /* display: inline-block; */ } .c{ width: 100px; height: 100px; background-color: orange; float:left; /* margin-top:100px; */ } .d{ width: 100px; height: 100px; background-color: green; clear:left; margin-top:400px; } /* .e{ width: 100px; height: 100px; } */<div class="a"> </div> <div class="b"> <!-- <div class="e"></div> --> <div class="c"></div> <div class="d"></div> </div>绿色的div块元素已经设置的margin-top:400px但是为什么毫无反应.悄悄地说其实我刚开始的时候也很懵逼,然后就各种试,结果就发现了.因为橘色元素的浮动,并且这个橘色元素的外边距和父元素合并了.导致绿色元素找不到边 去算自己的margin-top.1.那么解决父子外边距合并问题,大家都知道可以设置padding,margin,overflow:hidden 或者设置border就好了. 设置之后绿色元素就会忽略浮动元素去调自己的margin值. 同时还要注意的是, 由于clear:left的使用,这时候的margin值只能比clear:left的默认值大,也就是比浮动元素的高度值大.2.如果橘色浮动元素上面有另外一个元素且不浮动的话(就叫element-1吧)的话,那么这时候绿的方块的margin-top值就是跟着element-1 的底部去调整自己的位置. ...

首先想要实现3D的效果。那么需要设置一个属性ttranform3d： 第一个旋转：当设置了transform-style: preserve-3D的时候，代表此时应用的3d场景了。当设置使用transform-style: flat的时候，使用的是2d的转换效果。所以，当给X设置旋转45度的时候感觉元素有点轻微的向后，宽度不变。但是高度会变低 当设置Y旋转45的时候，想象一个东西被倾斜了，会被拉长 当Z设置了45度的时候，很像2d旋转的模样 当三个都设置了45度的时候。 对于3d的效果，感觉自己的想象力还是有一些不足。不太好形容。有人说，首先需要确认坐标轴。利用左手法则。但是对于我，好像并没有理解啥。然后我想到了一个不太好的方式。自己去找一个盒子。摆出了左右法则。当rotateX的时候，就围绕着自己的大拇指绕一圈当rotateY的时候，就围绕着自己的食指指绕一圈当rotateZ的时候，就围绕着自己的中指指绕一圈并且因为我们还没有用到渲染的3d的透视属性。所以上面的那些图画根据自己的实验结果，就瞬间知道了，渲染的3D设计. 2、perspective设置3D元素的可视效果范围。目前不知道咋用，官网说需要与transform-origin一起使用transform-orgin：一个是X轴的初始值，一个是Y轴的初始值。默认都是50% background-visibility设置背面元素是否可见的。拥有两个属性值：visible可见 hiddle不可见 当然对于3d的也还是 tanslateZ轴，当设置Z轴的时候。就相当于，把一个元素，往后推移了多少的px scaleZ设置Z轴的缩放倍数

前言前两天在浏览 苹果 16寸 营销页面 的时候，发现了几个比较有意思的交互，心里想着自己虽然是一个穷逼，但是知识是无界限的呀，于是便研究了一波。 文章主要讲交互效果，所以文中会有很多 gif 图，大家最好连上无线再看，示例代码链接我放在了文章底部，有需要自取。  两个效果翻盖效果一个是屏幕慢慢打开的效果，在屏幕打开的过程中，电脑图片 是在屏幕中固定不动的，直到打开完毕或者关闭完毕的时候再让 电脑图片 随着滚动条滚动。 缩放图片开始时是一张全屏的图片，在滚动过程中慢慢变成另一张图片，接着这张图片以屏幕正中间为基准点慢慢缩小，在缩小的过程中，这张图是定在屏幕中央的，缩小到一定值的时候，图片随着滚动条滚动。   前置知识再动手写代码之前，我们需要了解几个在接下来代码中要用到的知识点。 粘性定位 sticky可以简单的认为是 相对定位 relative 和 固定定位 fixed 的混合，元素在跨越指定范围前为相对定位，之后为固定定位。 sticky 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于 viewport 来计算元素的偏移量。 一个例子 如下代码，html 结构如下： <body> <h1>我是 sticky 的第一个 demo</h1> <nav> <h3>导航A</h3> <h3>导航B</h3> <h3>导航C</h3> </nav> <article> <p>...</p> <p>...</p> // ... </article></body> 样式如下： nav { display: table; width: 100%; position: sticky; top: 0;}在代码中 nav 元素会根据 body 进行粘性定位，在 viewport 视口滚动到元素 top 距离小于 0px 之前，元素为相对定位，也就是说他会随着文档滚动。之后，元素将固定在与顶部距离 0px 的位置。 ...

1) 字体规则(可以被继承) font-family 'Microsoft YaHei',宋体 font-style: font-weight: font-size: line-height: font:bold normal 14px/1.5em '微软雅黑' em 相对单位，相对于当前元素的字体大小 <div style="font-size:14px;line-height:2em"> hello world </div> rem 相对单位，相对于body中声明的字体大小 body{ font-size:10px } <div style="font-size:14px;line-height:2rem"> hello world </div> https://developer.mozilla.org/zh-CN/docs/Web/CSS/font2) 网络字体（字体图标库）iconfont（阿里的图标库） 图片（设计师设计icon图标）图标--特殊的字体 （写的字跟画画一样）3) 文本相关规则（可以被继承） text-decoration 字体装饰 none 不加任何字体装饰 underline 下划线 line-through 删除线 overline 上划线color 关键字 lightblue blue red 十六进制 #000000 #ffffff #ff0000 #32b593（山西大学校徽绿） rgb rgb(r,g,b) 0~255 rgb(255,0,0) rgba rgba(r,g,b,a) 0~255 rgb(255,0,0,0.5) text-align 容器中的字体的排列方式 text-transform 转换英文的大小写 uppercase lowercase text-indent 字体的缩进4) 列表相关（ul,ol） ...

更多精彩，请点击上方蓝字关注我们！ 5月11日，内蒙古中部、华北大部先后出现了大风沙尘天气，11日午后，北京的天空呈现浅棕色，呼吸中夹着泥土的气息，傍晚时分，沙尘更是混合着雨滴降落在北京，北京市民都惊呼下“泥雨”了。15日，京津冀及周边地区再次受到来自蒙古国沙尘侵袭，频频的沙尘侵扰使大气环境急剧恶化。 对于这次沙尘天气过程，亚洲沙尘暴预报区域专业气象中心早在9日便开始发布沙尘预警提示，引起了远在西班牙的巴塞罗那沙尘暴区域预报中心的关注，并对此进行了报道。 沙尘暴区域专业中心是什么组织？  每年到沙尘天气高发季节，沙尘天气都会给人们健康和财产安全带来巨大威胁。世界气象组织（WMO）亚洲沙尘暴预报区域专业气象中心（北京）（Regional Specialized Meteorological Centre for Atmospheric Sandstorm and Duststorm Forecasts Beijing ,RSMC-ASDF Beijing）应运而生。目前，西班牙巴塞罗那和中国北京是世界气象组织框架下，全球仅有的两个沙尘暴专业业务中心。     亚洲沙尘暴预报区域专业气象中心旨在为提高亚洲受沙尘影响地区或国家的预报预警及防灾减灾能力，积极落实国家“一带一路”倡议，积极推进亚洲各国沙尘监测、预报及预警产品的共享。具体职责包括为亚洲各成员单位提供沙尘天气监测实况和预报产品、编制年度工作报告，参与天气委员会会议，建立数据共享FTP,在国际平台展示国内沙尘天气科研业务成就等。（亚洲沙尘暴预报区域专业气象中心网址http://www.asdf-bj.net/） 沙尘预报技术支撑 近年来，我国在沙尘暴的理化特性、源区位置、释放总量、输送与沉降路径和形式、沉降后的变化，以及气候变化对沙尘的反馈作用等方面取得重要进展： ▼自主研发了亚洲沙尘暴数值预报系统(CUACE/Dust)，成为最早实现沙尘暴数值预报业务化运行的国家之一； ▼开发了基于最优化的沙尘多模式集成产品，大幅提高了沙尘预报的预报精准性； ▼自主研发了基于FY2/FY4系列卫星的沙尘暴分布及强度的卫星定量遥感技术及业务系统，从而使我国有能力利用静止气象卫星动态监测分析亚洲沙尘暴的结构与演变特征； ▼开发了基于源示踪技术的沙尘溯源系统以及基于GIS的三维沙尘显示系统，可跟踪沙尘粒子，追踪沙尘的主要源地。 最优化多模式集成沙尘预报 （利用最优集成方法，可充分集成各模式优点，有效降低预报误差） 2019年北京5月一次沙尘过程溯源 《2019环境气象公报》发布  助力蓝天保卫战  中国气象局上个月刚刚发布的《2019环境气象公报》显示，2019 年共出现15次沙尘天气过程，这个数据较近五年平均次数（11.6次）偏多。但从2000年至2019年的近二十年变化来看，我国沙尘天气过程次数整体趋势是降低的。 2000年至2019年沙尘天气过程次数 2020年，世界气象组织倡导传统气象向地球系统科学迈进，提倡从科研到服务以及业务的目标，提出了全球空气质量预报与信息系统计划——GAFIS(GlobalAir Quality Forecasting and Information System)。该计划旨在以全球协调和标准化的方式提供科学的空气质量预测和信息服务，并带动全球大气观测计划的监测和观测活动。亚洲沙尘暴预报区域专业气象中心将响应WMO的倡议，积极推进和落实基于大气成分观测的包含沙尘预报预警在内的空气质量预报体系建设，更好的为防灾减灾及打赢蓝天保卫战提供科技支撑。 更多环境气象预报产品 请参阅中央气象台官方网站： http://www.nmc.cn/publish/sev...  往期精选  ·END· 中央气象台科技创新服务 创新·绿色·共享 微信号:kjcx_nmc 我就知道你“在看”

一看就会,一做就废最近刚开始学网页前端(Web Front End), 好多人可能都有这种感觉,一看就会,一做就废.那是什么原因呢??每次帮别人解答其实也会有很多收获的,不会的就得多问. 那么问也是有技巧的, 你上来直接问这块代码该怎么写????(execuse me??)别人给你打出来,然后你复制粘贴. 那最后你学到了什么?更加熟练的用ctrl+c, ctrl+v吗?这也是为什么有些人明明是同样的老师下一起学,但是学的效果完全不一样.刚开始学习的时候,最好是每次敲打码前搞清楚自己要做什么怎么做,并且每个标签的用法和特性...别一股脑敲出来然后开始找错,或者代码什么的还不理解,连错哪了都找不出来.学前端也有两周了,今天就跑去敲了敲京东首页的代码,果然之前以为我理解了position,float的用法.一写就全是问题,各种后面的块元素把前面的挡住了什么什么的问题...果然等我把这些问题解决好了然后把排版什么的弄好了,发现对这些东西更熟悉了. 也是由于前面的内容学的比较扎实,后面的知识目前只是大概的过一遍还没认真的搞懂每个标签的含义... 所以敲代码的时候就会出现各种问题..那么刚开始学习的同学们,是不是也有遇到基础的错误老是不知道什么原因造成,或者没有尝试先自己解决就开始问了?学习嘛,既然决定了要学就学精一点..不要说 css html简单大概过一下然后注重学习js什么的鬼话...你基础不打牢固点,后面的学习也是越来越吃力.基础打牢点的话 后面也会越学越轻松. 而且工作方便都比较偏向于解决问题的能力,不然写出来的代码一堆问题,跟你一块写的那不得拿刀砍你...

好吧，这几天忙公司的项目有点搁置了。对于css的中两个地方还是不熟悉。第一个，关于2D转换中的旋转第二个，关于2D转换中的倾斜 1、首先旋转的效果图：在上面，我是将旋转的角度设置为30°，它会沿着X轴的方向，去旋转一定的距离。这个效果图是，旋转了180°，会发现它被反转了位置。 因为在2D的事件中，旋转没有出现按照Y轴旋转的东西，所以我目前自己理解都是按照X轴进行旋转的。所写的代码如下。 <style> *{padding: 0;margin: 0} .warp1{ width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .warp2{ width: 800px; height: 800px; border: 1px solid; flex-direction: column; display: flex; align-items: center; justify-content: center; } .warp3{ width: 300px; height: 300px; background-color: lightpink; transition: all 2s; /*transform-origin: center;*/ } .warp3:hover{ transform: rotate(180deg); /*可以自己更改数值 */ } .warp4{ height: 6px; background: coral; width: 100%; }</style><body class="warp1"> <div class="warp2"> <div class="warp3">我是会发生变化的部分</div> <div class="warp4"></div> </div></body>2、关于skew()。倾斜一开我甚至以为，倾斜与旋转的差不多的，样子甚至没多大的区别。然后果断的被打脸。 上面是X方向倾斜30deg，Y轴的方向为0deg。我们看到是，容器没有超过线条。 ...

普通的input[type=‘file’]的效果很朴素 可以自定义一个file选择文件的按钮： 思路为： 用定位将自定义的按钮遮住原来的选择文件按钮， 再让点击自定义按钮时触发原来的选择文件按钮的事件即可 （对此，label可实现） eg: html: css样式： 结果图： 点击“选择图片”按钮，则会触发选择图片的事件，你就可以选择图片啦！ 以上，是用bootstrap实现的，原生的如下： html: CSS: 效果图： 点一下，就可以弹出选择文件的文件夹啦！

前言何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。 每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情等，这些应该都是我们从小到大写文章而接触到的写作技巧。 作为程序猿的我们，写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新，让人容易理解，让人舒服自然，同时也让自己成就感满满(哈哈，这个才是重点)。因此，我整理下三年来自己使用到的一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。 目录既然写文章有这么多的写作技巧，那么我也需要对CSS开发技巧整理一下，起个易记的名字。 Layout Skill：布局技巧Behavior Skill：行为技巧Color Skill：色彩技巧Figure Skill：图形技巧Component Skill：组件技巧备注 代码只作演示用途，不会详细说明语法部分技巧示例代码过长，使用CodePen进行保存，点击在线演示即可查看兼容项点击链接即可查看当前属性的浏览器兼容数据，自行根据项目兼容需求考虑是否使用以下代码全部基于CSS进行书写，没有任何JS代码，没有特殊说明的情况下所有属性和方法都是CSS类型一部分技巧是自己探讨出来的，另一部分技巧是参考各位前端大神们的，都是一个互相学习的工程，大家一起进步Layout Skill使用vw定制rem自适应布局要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制场景：rem页面布局(不兼容低版本移动端系统)兼容：vw、calc())/* 基于UI width=750px DPR=2的页面 */html { font-size: calc(100vw / 7.5);}使用:nth-child()选择指定元素要点：通过:nth-child()筛选指定的元素设置样式场景：表格着色、边界元素排版(首元素、尾元素、左右两边元素)兼容：:nth-child())代码：在线演示 使用writing-mode排版竖文要点：通过writing-mode调整文本排版方向场景：竖行文字、文言文、诗词兼容：writing-mode代码：在线演示 使用text-align-last对齐两端文本要点：通过text-align-last:justify设置文本两端对齐场景：未知字数中文对齐兼容：text-align-last代码：在线演示 使用:not()去除无用属性要点：通过:not()排除指定元素不使用设置样式场景：符号分割文字、边界元素排版(首元素、尾元素、左右两边元素)兼容：:not())代码：在线演示 使用object-fit规定图像尺寸要点：通过object-fit使图像脱离background-size的约束，使用<img>来标记图像背景尺寸场景：图片尺寸自适应兼容：object-fit代码：在线演示 使用overflow-x排版横向列表要点：通过flexbox或inline-block的形式横向排列元素，对父元素设置overflow-x:auto横向滚动查看场景：横向滚动列表、元素过多但位置有限的导航栏兼容：overflow-x代码：在线演示 使用text-overflow控制文本溢出要点：通过text-overflow:ellipsis对溢出的文本在末端添加...场景：单行文字溢出、多行文字溢出兼容：text-overflow、line-clamp、box-orient代码：在线演示 使用transform描绘1px边框要点：分辨率比较低的屏幕下显示1px的边框会显得模糊，通过::before或::after和transform模拟细腻的1px边框场景：容器1px边框兼容：transform代码：在线演示 使用transform翻转内容要点：通过transform:scale3d()对内容进行翻转(水平翻转、垂直翻转、倒序翻转)场景：内容翻转兼容：transform代码：在线演示 使用letter-spacing排版倒序文本要点：通过letter-spacing设置负值字体间距将文本倒序场景：文言文、诗词兼容：letter-spacing代码：在线演示 使用margin-left排版左重右轻列表要点：使用flexbox横向布局时，最后一个元素通过margin-left:auto实现向右对齐场景：右侧带图标的导航栏兼容：margin代码：在线演示 Behavior Skill使用overflow-scrolling支持弹性滚动要点：iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况)，通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动，增加页面滚动的流畅度场景：iOS页面滚动兼容：iOS自带-webkit-overflow-scrollingbody { -webkit-overflow-scrolling: touch;}.elem { overflow: auto;}使用transform启动GPU硬件加速要点：有时执行动画可能会导致页面卡顿，可在特定元素中使用硬件加速来避免这个问题场景：动画元素(绝对定位、同级中超过6个以上使用动画)兼容：transform.elem { transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */}使用attr()抓取data-*要点：在标签上自定义属性data-*，通过attr()获取其内容赋值到content上场景：提示框兼容：data-*、attr())代码：在线演示 使用:valid和:invalid校验表单要点：<input>使用伪类:valid和:invalid配合pattern校验表单输入的内容场景：表单校验兼容：pattern、:valid、:invalid代码：在线演示 使用pointer-events禁用事件触发要点：通过pointer-events:none禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等)，相当于<button>的disabled场景：限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)兼容：pointer-events代码：在线演示 使用+或~美化选项框要点：<label>使用+或~配合for绑定radio或checkbox的选择行为场景：选项框美化、选中项增加选中样式兼容：+、~代码：在线演示 使用:focus-within分发冒泡响应要点：表单控件触发focus和blur事件后往父元素进行冒泡，在父元素上通过:focus-within捕获该冒泡事件来设置样式场景：登录注册弹框、表单校验、离屏导航、导航切换兼容：:focus-within、:placeholder-shown代码：在线演示 使用:hover描绘鼠标跟随要点：将整个页面等比划分成小的单元格，每个单元格监听:hover，通过:hover触发单元格的样式变化来描绘鼠标运动轨迹场景：鼠标跟随轨迹、水波纹、怪圈兼容：:hover代码：在线演示 使用max-height切换自动高度要点：通过max-height定义收起的最小高度和展开的最大高度，设置两者间的过渡切换场景：隐藏式子导航栏、悬浮式折叠面板兼容：max-height代码：在线演示 使用transform模拟视差滚动要点：通过background-attachment:fixed或transform让多层背景以不同的速度移动，形成立体的运动效果场景：页面滚动、视差滚动文字阴影、视差滚动文字虚影兼容：background-attachment、transform代码：在线演示 使用animation-delay保留动画起始帧要点：通过transform-delay或animation-delay设置负值时延保留动画起始帧，让动画进入页面不用等待即可运行场景：开场动画兼容：transform、animation代码：在线演示 使用resize拉伸分栏要点：通过resize设置横向自由拉伸来调整目标元素的宽度场景：富文本编辑器、分栏阅读兼容：resize代码：在线演示 Color Skill使用color改变边框颜色要点：border没有定义border-color时，设置color后，border-color会被定义成color场景：边框颜色与文字颜色相同兼容：color.elem { border: 1px solid; color: #f66;} 使用filter开启悼念模式要点：通过filter:grayscale()设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们场景：网站悼念兼容：filter代码：在线演示 使用::selection改变文本选择颜色要点：通过::selection根据主题颜色自定义文本选择颜色场景：主题化兼容：::selection代码：在线演示 ...

1，介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ （1）有两种， IE 盒子模型、W3C 盒子模型；（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)； （3）区 别： IE的content部分把 border 和 padding计算了进去； 2，CSS选择符有哪些？哪些属性可以继承？ * 1.id选择器（ # myid）2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul > li） 6.后代选择器（li a） 7.通配符选择器（ * ） 8.属性选择器（a[rel = "external"]） 9.伪类选择器（a:hover, li:nth-child） * 可继承的样式： font-size font-family color, UL LI DL DD DT; * 不可继承的样式：border padding margin width height ; 3，CSS优先级算法如何计算？ * 优先级就近原则，同权重情况下样式定义最近者为准;* 载入样式以最后载入的定位为准; 优先级为: !important > id > class > tag important 比 内联优先级高 ...

在做测试的时候，元素选择是个相当烦人的问题，通常解决方法是在该标签上加上id，可是问题来了，有些时候id加不上去（现在开发大部分是调用别人写好的组件，想加id不是那么容易），或者组件自动生成的id，由于字段名相同，id都是一样的，让人十分头疼。大家都知道有种标签选择方式叫document.querySelector()，是一种常用的通过元素属性来选择的方法。比如通过该方法可以选择class，id，标签等，功能十分强大，既然强大就要善于利用。有种写法是input[type="button"]是选择样式为button的input框，由此扩展，是否所有的标签都有这种写法，本人亲测，确实如此，比如，tr[a="a"]就表示选择有属性a,且其属性值为a的tr标签。除此外，[]内还可以填入多条属性，中间用逗号隔开。详细可见：https://www.cnblogs.com/fanbi/p/7705235.html

前言2019年6月中旬，实在厌倦了之前平平淡淡的工作和毫不起眼的薪资，不顾亲人的反对，毅然决然地决定只身前往沿海城市，想着找到一份更加具有挑战性的工作，来彻彻底底地重新打磨自己，同时去追求更好的薪资待遇。当然在此之前，自己每天下班后都会利用业余时间抓紧复习巩固刷题等等，大概从3月份开始的吧，持续了3个多月。而后从6月中旬面试一直到6月底，中间大概两个星期，其实我的学历和背景并不突出，但是我个人感觉可能是因为自己简历做的稍微还行(后面我可能会单独出一篇文章，来聊聊我做简历时的一点点心得)，让大厂的HR能够多看几眼，中间面过的公司包括喜马拉雅、携程、哔哩哔哩、流利说、蜻蜓FM、爱回收等，陆陆续续拿到4，5个Offer吧，如今已经转正，所以在这里记录下之前的部分面试题，和大家一起分享交流。 正文1. 烈熊网络这家公司其实我也没有太了解过，是我前同事推荐的，说里面的薪资待遇不错，然后我当时也有空闲时间，所以就去试试了，虽然公司名气没有上面提到的公司大，但是他的面试题我觉得还是挺有分量的。1.1 请说出下面代码的执行顺序async function async1() { console.log(1); const result = await async2(); console.log(3);}async function async2() { console.log(2);}Promise.resolve().then(() => { console.log(4);});setTimeout(() => { console.log(5);});async1();console.log(6);我的回答是[1,2,6,4,3,5]。这道题目主要考对JS宏任务和微任务的理解程度，JS的事件循环中每个宏任务称为一个Tick(标记)，在每个标记的末尾会追加一个微任务队列，一个宏任务执行完后会执行所有的微任务，直到队列清空。上题中我觉得稍微复杂点的在于async1函数，async1函数本身会返回一个Promise，同时await后面紧跟着async2函数返回的Promise，console.log(3)其实是在async2函数返回的Promise的then语句中执行的，then语句本身也会返回一个Promise然后追加到微任务队列中，所以在微任务队列中console.log(3)在console.log(4)后面，不太清楚的同学可以网上查下资料或者关注我的公众号「前端之境」，我们可以一起交流学习。 1.2 手动实现Promise，写出伪代码幸运的是在面试前刚好查阅了下这部分的资料，所以回答过程中还算得心应手，主要是需要遵循Promise/A+规范： (1) 一个promise必须具备三种状态(pending|fulfilled(resolved)|rejected)，当处于pending状态时，可以转移到fulfilled(resolved)状态或rejected状态，处于fulfilled(resolved)状态或rejected状态时，状态不再可变； (2) 一个promise必须有then方法，then方法必须接受两个参数： // onFulfilled在状态由pending -> fulfilled(resolved) 时执行，参数为resolve()中传递的值// onRejected在状态由pending -> rejected 时执行，参数为reject()中传递的值promise.then(onFulfilled,onRejected)(3) then方法必须返回一个promise： promise2 = promise1.then(onFulfilled, onRejected);实现代码直接贴出来吧： 参考自：实现一个完美符合Promise/A+规范的Promisefunction myPromise(constructor){ let self=this; self.status="pending" //定义状态改变前的初始状态 self.value=undefined;//定义状态为resolved的时候的状态 self.reason=undefined;//定义状态为rejected的时候的状态 self.onFullfilledArray=[]; self.onRejectedArray=[]; function resolve(value){ if(self.status==="pending"){ self.value=value; self.status="resolved"; self.onFullfilledArray.forEach(function(f){ f(self.value); //如果状态从pending变为resolved， //那么就遍历执行里面的异步方法 }); } } function reject(reason){ if(self.status==="pending"){ self.reason=reason; self.status="rejected"; self.onRejectedArray.forEach(function(f){ f(self.reason); //如果状态从pending变为rejected， //那么就遍历执行里面的异步方法 }) } } //捕获构造异常 try{ constructor(resolve,reject); }catch(e){ reject(e); }}myPromise.prototype.then=function(onFullfilled,onRejected){ let self=this; let promise2; switch(self.status){ case "pending": promise2 = new myPromise(function(resolve,reject){ self.onFullfilledArray.push(function(){ setTimeout(function(){ try{ let temple=onFullfilled(self.value); resolvePromise(temple) }catch(e){ reject(e) //error catch } }) }); self.onRejectedArray.push(function(){ setTimeout(function(){ try{ let temple=onRejected(self.reason); resolvePromise(temple) }catch(e){ reject(e)// error catch } }) }); }) case "resolved": promise2=new myPromise(function(resolve,reject){ setTimeout(function(){ try{ let temple=onFullfilled(self.value); //将上次一then里面的方法传递进下一个Promise状态 resolvePromise(temple); }catch(e){ reject(e);//error catch } }) }) break; case "rejected": promise2=new myPromise(function(resolve,reject){ setTimeout(function(){ try{ let temple=onRejected(self.reason); //将then里面的方法传递到下一个Promise的状态里 resolvePromise(temple); }catch(e){ reject(e); } }) }) break; default: } return promise2;}function resolvePromise(promise,x,resolve,reject){ if(promise===x){ throw new TypeError("type error") } let isUsed; if(x!==null&&(typeof x==="object"||typeof x==="function")){ try{ let then=x.then; if(typeof then==="function"){ //是一个promise的情况 then.call(x,function(y){ if(isUsed)return; isUsed=true; resolvePromise(promise,y,resolve,reject); },function(e){ if(isUsed)return; isUsed=true; reject(e); }) }else{ //仅仅是一个函数或者是对象 resolve(x) } }catch(e){ if(isUsed)return; isUsed=true; reject(e); } }else{ //返回的基本类型，直接resolve resolve(x) }}1.3 请说出以下打印结果let a = {a: 10};let b = {b: 10};let obj = { a: 10};obj[b] = 20;console.log(obj[a]);我的回答是：20。这道题目主要考对JS数据类型的熟练度以及对ES6中属性名表达式的理解。在上题中obj[b] = 20的赋值操作后，obj其实已经变成了{a: 10, [object Object]: 20}，这是因为如果属性名表达式是一个对象的话，那么默认情况下会自动将对象转为字符串[object Object]，最后一步获取obj[a]时，a本身也是一个对象，所以会被转换为获取obj[object Object]也就是上一步赋值的20。 ...

《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）毕竟一个人的能力有限，集体的力量才是无限的！欢迎大家一起来贡献题目，为前端面试每日3+1开源社区贡献力量！点击 我也要出题 贡献你的题目吧，让大家一起来挑战你的题目！ 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 html解释下为什么<p> </p>会换两行？你知道p标签和br标签两者的区别是什么吗？如何在页面中插入TAB符号（制表符）说下cookie都有哪些缺点？举例说明a标签的作用都有哪些？请举例说明关于html的引用标签有哪些？请举例说明html支持的数学符号有哪些？css举例说明伪类:focus-within的用法如何用css自定义滚动条？能做到所有浏览器兼容吗？想要做兼容怎么办呢？border-radius:50%和border-radius:100%有什么区别？如何使用CSS实现段落首字母或首字放大效果？如何给段落的首行缩进？你有去看过或者了解过css的标准文档吗？你知道CSS的标准发布流程吗？js你有用过哪些3D渲染的库？页面的编码和被请求的资源编码不一致时如何处理？ajax的请求状态有哪几种？请介绍下js的数据类型写一个方法找出一段话里面出现频率最多的词请使用js实现一个省市县级联的效果用js实现一个轮播图，并简述有哪些实现的方法软技能你知道什么是内网穿透吗？有没有玩过？你要是在家时，公司网站出问题了你是怎么解决的？假设有一个场景，需要前端自己计算十万级别或更多的数据，你有解决什么方案呢？你有做过H5的游戏开发吗？说说它的开发步骤你有做过Hybrid APP开发吗？说说你的经验你是计算机专业的吗？你们上学都学了哪些内容？你知道开发好的功能要自测吗？你一般是怎么自测的呢？全部所有 交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎加入 “前端面试每日3+1” 微信群（扫个人微信号邀请入群）相互交流。

今天的知识点 (2019.11.03) —— 第201天 (我也要出题)[html] 解释下为什么<p> </p>会换两行？[css] 举例说明伪类:focus-within的用法[js] 你有用过哪些3D渲染的库？[软技能] 你知道什么是内网穿透吗？有没有玩过？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...

场景iPhoneX对比起以前其他的手机，屏幕顶部变成了留海屏，底部取消了物理按键改成了小黑条，这种改动导致了web开发中页面上新的适配问题。 比如一些需要贴在底部的按钮，和呼起的tabBar和底部弹出框，在iphoneX上就会出现被小黑条遮挡内容，或者页面上出现白色空隙的问题。 先上解决代码<head><meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" name="viewport"/></head>body {height: 100vh;}/* 你的贴底元素↓ */.container { position: aboslute; bottom: 0; padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ ...}几个新知识安全区域安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域： Apple的官方文档：adaptivity-and-layout viewport-fitiOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值： contain: 可视窗口完全包含网页内容（左图）cover：网页内容完全覆盖可视窗口（右图）auto：默认值，跟 contain 表现一致 <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" name="viewport"/>参考文档：viewport-fit-descriptor enviOS11 新增特性，Webkit 的一个 CSS 函数，用于向 CSS 插入用户代理定义的变量设定安全区域与边界的距离，有四个预定义的变量： safe-area-inset-left：安全区域距离左边边界距离safe-area-inset-right：安全区域距离右边边界距离safe-area-inset-top：安全区域距离顶部边界距离safe-area-inset-bottom：安全区域距离底部边界距离env()必须配合 viewport-fit=cover 使用!我们最常用的就是 safe-area-inset-bottom, 这个代表着不被小黑条遮挡的安全距离。 padding-bottom: env(safe-area-inset-bottom); 参考文档：designing-websites-for-iphone-x，MDN/env() referencehttps://aotu.io/notes/2017/11...

政采云前端小报第54期浏览更多往期小报，请访问： https://weekly.zoo.team ES6、ES7、ES8、ES9、ES10新特性一览 掌握不断更新的ES新特性从程序媛角度去看项目管理 | Aotu.io「凹凸实验室」 项目管理一般是从技术负责人、项目产品负责人的角度去看的，程序员虽然码代码很重要，但对项目的领悟能力也同样重要。我们经常会遇到各种困惑：手上的项目需求越来越多，BUG列表只增不减，该采取怎样的措施，保证自己的生产力？希望以下的讲述带给你莫名的认同感，或多或少让你磨刀霍霍一试。 需求管理下图描述的是程序员从接到需求到开发环节的过程： 一般我们首先会收到产品的PRD或交互稿，被询问今天什么时间点是...我不想成为不懂 GUI 的 UI 开发者 - 掘金 作为一个程序员，我是从切图开始职业生涯的。行业内一般把我这种编写用户界面 (UI) 的岗位，叫做前端开发。工作几年后我发现了个奇怪的现象，那就是整个前端圈子里，虽然大家常常谈 UI，但很少有人谈 GUI。 这话要从何说起呢？前端圈子里从上游到下游，强调的都是...技术栈：为什么 Node 是前端团队的核心技术栈 小菜前端的基建在一步步走过来的过程中，NodeJS 是如何使用的及扮演了哪些角色，它对于工程师个人，团队能力，公司研发效率，业务支撑，技术的探索与突破等等到底有什么实际的意义...从“愚昧之巅”到“绝望之谷”，讲讲我价值几千万的认知 不要缝合自己的脑洞，打开，打开，重新打开自己的逻辑闭环。当前端遇到机器学习？听 TensorFlow.js 负责人怎么说 第十四届 D2 前端技术论坛将于12月14日拉开帷幕，其中， Google TensorFlow.js 团队的负责人 Ping Yu 将作为「智能化」专场的嘉宾，为我们讲解 TensorFlow.js 生态系统，以及如何将现有的机器学习模型植入到前端。网站性能优化实战——从12.67s到1.06s的故事 - 腾讯Web前端 IMWeb 团队社区 | blog | 团队博客 Web前端 腾讯IMWeb 团队社区再谈javascriptjs原型与原型链及继承相关问题 - 腾讯Web前端 IMWeb 团队社区 | blog | 团队博客 Web前端 腾讯IMWeb 团队社区React Concurrent 模式抢先预览上篇: Suspense the world - 掘金 ...

html代码：<body> <div class="content"></div><div class="footer"></div></body> body { display: flex; flex-flow: column; min-height: 100vh;}.content { flex: 1; }.footer{ flex: 0; }这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。 参考文章：https://segmentfault.com/a/1190000015123189

游戏基于SEER测试网络文体平台模块（Culture and Sports Platform,CSP），正在进行数据调试等工作，大家可以尝鲜体验。此游戏账户和资金等核心系统完全基于区块链，但目前运行于SEER测试网络，和SEER主网并不在一条链上，切勿充入主网资产，由此造成资金损失将无法寻回。需要参与测试并充值的用户请登录SEER测试网络钱包 http://192.144.171.138/ 在 设置 - 接入点 中 添加 API 服务器节点 ，添加 ADDRESS 为 ws://192.144.171.138:8003 的测试网络API，然后在 设置 - 恢复/导入 中 点击从钱包备份文件恢复(.bin)下拉菜单，选择 导入私钥 ，在下方输入框中 粘贴 5HxSqrcNu6nZ5xaLK9f6RTVKghJsVGZejz8CnC8e3qnPc14LUdP 然后点击 提交 ， 导入私钥 ，完成。导入测试账号tester。然后使用此账号向您在游戏中注册的账号转账，进行充值。体验和测试流程： 下载游戏APK测试包：https://www.seer.best/downloa...，打开后可以看到如下界面： 请点击微信登陆完成授权，之后进入游戏，会提示创建SEER账户，此账户会是您在SEER（测试）链上的唯一标识，注意不能是纯字母组成，需要加横杠或数字； *赛亚麻将的开发者在此版本的开发中，考虑到用户操作门槛问题，未使用类似币比的助记词权限验证形式，而是直接使用微信授权登陆并和游戏帐户、区块链账户联合绑定的形式进行登陆验证，此种方式虽然不够“去中心化”，但操作足够简便。之后可能会根据用户需求开发更多形式的登陆和授权模式。 点击左上角带有链标识的图标，会提示前往交易所充值，在主网中大家将可以用网关、转账等各种形式向你的SEER账户充值，但这里我们在测试网络网页钱包上用tester向您的账户充值就可以了。这里示例转账了100万测试SEER，测试网络链上如下： 充值后，退出游戏再重新进入，左上角可以看到有链标识的图标后显示了100万，充值成功，代表此账号余额为100万，和SEER链上的账户余额一致。 同时可能会弹出绑定代理的弹窗，这是一个推广功能设计，代理就是帮忙推广此游戏的用户，你填写的游戏ID的用户可以得到推广奖励。这里随便填一个100001就好了。 我们任意点击一个游戏，进入房间，会提示SEER不足。这是因为我们的SEER全部在账户余额中，并没有划转给平台，只有划转给平台的资产，才能参与游戏（文体平台只能对用户划转的资产有操作权限，比如输赢之类），这是一层保护机制。我们需要点击取SEER，或是提前点击顶部有SEER标识的图标进行授权划转操作。 在币箱页面 输入金额，例如10万，确定，可以看到余额减少了相应金额，并扣除了一些手续费，而SEER图标后增加了相应金额。 区块链上可以看到相应的划转操作提示。 现在可以加入游戏了。游戏开始后，会自动收取一定的房费，这是游戏运营方的主要收入来源。 在区块链上可以看到相应的资金操作，两位玩家分别向GM转了房费，这会从用户划转给平台的资金中自动扣除。 游戏结束后，会进行结算。 在区块链上可以看到相应的资金操作，失败的一方或多方会将资金先转给GM，然后GM会根据各方的输赢情况将相应比例的资金自动分配给胜利的一方玩家。 在SEER文体平台模块中，任何SEER用户可以在主网抵押一笔保证金后获得文体平台权限，文体平台有平台资金池，其他SEER用户可以直接在链上授权一定资产额度给平台，能获得多少用户“授权”和其抵押的保证金有关。 平台通过调用接口控制用户授权的资产额度进行各种链上操作，且可以将亚秒时间内的操作统一打包，这些操作手续费都由平台支付。这样既能保证用户对资产的所有权，又能保证游戏等文体平台原有的游戏核心之类的应用逻辑不作太大的变化，具有很高的效率和可操作性，可以让游戏内积分等完全区块链化，第三方也可以很方便的做成完全合规的区块链应用。 文体平台不光可以应用到游戏领域，票务等文化体育领域的众多方向都可以进行扩展。 详情请参考SEER文体平台模块（Culture and Sports Platform,CSP）使用指南：https://mp.weixin.qq.com/s/mJ...

移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小: 如果设备像素大于等于2，则用2倍图 在stylus中定义一个方法： bg-image($url) /\* 如果设备像素大于等于2，则用2倍图 \*/ background-image: url($url + "@2x.png") background-repeat no-repeat @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) /\* 如果设备像素大于等于3，则用2倍图 \*/ background-image: url($url + "@3x.png") background-repeat no-repeat -webkit-min-device-pixel-ratio: 3是指当时显示屏最小的色倍为3倍的

背景今天写需求的时候发现一个一个小的优化点：用户选择了一些数据之后, 选择的条目需要高亮， 有时候列表很长， 为了提升用户体验，需要加个滚动， 自动滚动到目标位置。 下午简单的查了一下， 问题顺利解决， 就把这个小技巧分享一下给大家。 正文有几种不同的方式来解决这个小问题。 1.scrollTop第一想到的还是scrollTop, 获取元素的位置， 然后直接设置: // 设置滚动的距离element.scrollTop = value;不过这样子有点生硬， 可以加个缓动： var scrollSmoothTo = function (position) { if (!window.requestAnimationFrame) { window.requestAnimationFrame = function(callback, element) { return setTimeout(callback, 17); }; } // 当前滚动高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动step方法 var step = function () { // 距离目标滚动距离 var distance = position - scrollTop; // 目标滚动位置 scrollTop = scrollTop + distance / 5; if (Math.abs(distance) < 1) { window.scrollTo(0, position); } else { window.scrollTo(0, scrollTop); requestAnimationFrame(step); } }; step();};// 平滑滚动到顶部，可以直接：scrollSmoothTo(0)jQuery 中重的animate 方法也可以实现类似的效果： ...

今天的知识点 (2019.10.18) —— 第185天[html] HTML5如何唤醒APP？[css] 你是怎么设计css sprites（精灵图）的？有哪些技巧？[js] onload事件和domcontentloaded哪个先执行呢？[软技能] 你知道什么是域名备案吗？备案有什么用？可以不备案吗？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...

wl-vue-selectProject setupnpm installCompiles and hot-reloads for developmentnpm run serveCompiles and minifies for productionnpm run buildRun your testsnpm run testLints and fixes filesnpm run lintCustomize configurationSee Configuration Reference. 简介本组件提供全选下拉框和树形下拉框功能。wlVueSelect这是一个基于 elementUi 的 el-select 组件的二次封装的下拉框，提供了全选功能和默认选中功能；wlTreeSelect这是一个基于 elementUi 的 el-tree 组件的二次封装的下拉框，提供了树形数据支持和默认选中功能；因这两个需求非常普遍，所以作为一个独立插件发布。el-select 在线访问快速上手npm i wl-vue-select --save 或 npm i wl-vue-select -S 使用 import wl from "wl-vue-select";`import "wl-vue-select/lib/wl-vue-select.css"Vue.use(wl); <wlVueSelect v-model="value" :props="props" :data="data" multiple default-select ></wlVueSelect> <p>----------分割线------------</p> <wlTreeSelect checkbox width="240" :data="treeData" :selected="selected" ></wlTreeSelect>文档序号参数说明类型可选值默认值1dataoptions 可选列表数据Array--2props配置项：显示名字的 label 字段和绑定值的 value 字段Object-{ label: "label", value: "value" }3showTotal当可选项大于多少个时显示全选选项Number-14defaultSelect是否启用默认选中,如果开启全部时选中全部，无全部时选中第一个。(开启此功能请不要给 v-model 赋初始值)Boolean-false5其他其他 el-select 提供的参数---6nodeKey使用树形下拉框时，必须使用 key 来解析数据String-id7selected使用树形下拉框时，绑定选中数据,未开启checkbox时不可使用Array类型String-Number-Array-Object--8checkbox使用树形下拉框时,是否开启多选Boolean-false9width使用树形下拉框时宽度,默认单位 pxString-Number-24010leaf树形下拉框时，是否只可选叶子节点Boolean-false11trigger树形下拉框时，触发方式Stringclick/focus/hover/manualclick版本记录0.3.3 修复树形下拉框开启多选时无限循环的问题，优化多选时根据leaf字段来确定是否只返回叶子节点0.3.2 优化树形下拉框横向超出不显示问题 ...

SEER利用区块链奖励机制，可解决传统体育赛事痛点，提高行业运转效率。比如提高赛事方收入，让观众自由选择想看的比赛，给予赛事众筹的参与者贡献影响力，使其获得由智能合约量化的激励等。此功能可广泛应用于包括但不限于演出、赛事等文体产业中的各种场景。 只有资产发行者能够创建新众筹。在SEER开发者网页钱包中，可在资产发行者的资产页，看到资产功能中有“众筹列表”按钮，进入可查看当前用户已有众筹列表或创建新的众筹。 在创建众筹时，可设置众筹开始结束时间、代理人等。代理人的设计初衷，是出于安全考虑，资产拥有者账号/DAPP官方账号不可以长期在线，众筹创建后由代理者行使后续权力，同时，代理人也可以作为水龙头，负责推广和注册账号。 创建众筹时，还需要设置各种激励的名称及每份奖励数量。例如每次助力奖励10ABC，朋友助力奖励5ABC。 创建众筹时需要添加受益人角色，例如合作媒体、明星、举办方等，在创建时为这些角色设定众筹成功后，资金池的分配比例，并且可以单独为每位角色设置线性解锁、不锁定、到期解锁等锁定方式和锁定天数。 众筹进行中时，需要配合相应的前端程序和活动程序使用，在链上解决的主要是通过智能合约进行筹得资产的增发、销毁、分配、锁定等步骤。而用户贡献流量这一步，则需要特定的活动程序向区块链提供数据，由创建人或代理人权限根据活动数据为本场众筹注入新资产。 例如，一场活动在某一周期内有10000人通过微信授权登陆进行助力，另外这些用户产生了5000人次的邀请朋友助力数据，根据每次助力奖励10ABC，朋友助力奖励5ABC的设定，该周期共计为资金池注入10000 10 + 5000 5 = 125000 ABC，同时，另有 150 位用户通过参与众筹的形式，捐赠或打赏了 50000 ABC，该周期可供受益人各方分配的资产为175000 ABC，这些资产将在活动成功后将根据预先设定的比例进行分配，若失败，捐赠部分将退回给用户。根据活动数据，发起方可根据用户的捐赠和助力贡献或排名，给与大到冠名、广告露出，小到明星签名周边之类的各种名誉奖励。 若有问题，欢迎在开发者论坛参与讨论：https://forum.seerchain.org/t... 体验流程开发者可首先在本地下载配置命令行钱包，连接到此测试网络。导入测试账号tester的私钥，生成多个密钥对，注册多个测试账号。使用tester向自行注册的账号转账测试的SEER，之后使用自行注册的账号创建资产，随后创建众筹，开启众筹。然后使用创建的多个其它账号向自行创建的众筹捐赠资产，使用代理账号或众筹发起账号模拟流量价值进行的增发，众筹到期后输入众筹成功或失败的结果，使用创建或更新时设置的受益人账号领取收益等。 接口说明流量众筹模块需要配合链上原有的资产发行、销毁等功能使用，主要包含六个新的接口：competition_create、competition_update、competition_participate、competition_input、competition_claim、competition_result。其中创建众筹competition_create、更新众筹competition_update参数较复杂、连同收益领取competition_claim、输入结果competition_result，一般使用网页钱包操作即可。 以下介绍参与众筹competition_participate和注入新资产competition_input接口。 competition_participate格式：competition_participate(string account,competition_id_type competition,asset amount,bool broadcast = false); 参数：account：发起者、competition：众筹ID、amount：参与的数额（带精度）以及资产类型、broadcast：是否广播； 作用：普通用户参与众筹（向本次众筹资金池捐赠资产）。 命令行钱包示例：competition_participate 1.2.13 1.18.7 {"amount":10000000,"asset_id":"1.3.3"} true RPC示例：{"jsonrpc": "2.0", "method": "competition_participate", "params": ["1.2.13","1.18.7",{"amount":10000000,"asset_id":"1.3.3"},true], "id": 1} 参数说明（RPC形式）： { "jsonrpc": "2.0", "method": "competition_participate", "params": [ "1.2.13",//发起者 "1.18.7", {//众筹ID "amount": 10000000,//参与的数额 "asset_id": "1.3.3"//资产类型 }, true ], "id": 1}返回信息示例： { "id": 1, "jsonrpc": "2.0", "result": { "ref_block_num": 3404, "ref_block_prefix": 135777280, "expiration": "2019-10-16T15:32:36", "operations": [ [65, { "fee": {//手续费 "amount": 500000, "asset_id": "1.3.0" }, "issuer": "1.2.13",//发起者 "competition": "1.18.7",//众筹ID "amount": { "amount": 10000000,//参与的数额 "asset_id": "1.3.3"//资产类型 } }] ], "extensions": [], "signatures": ["2071d05......2e491"] }}competition_input格式：competition_input(string account,competition_id_type competition,map<uint8_t,uint32_t> input,bool broadcast = false); ...

via BEM by Example 侵删 带单个修饰符的组件一个组件可能有不同状态。状态应该使用修饰符类来实现。<!-- 这样写 --><button class="btn btn--secondary"></button><style lang="scss"> .btn { display: inline-block; color: blue; &--secondary { color: green; } }</style> 不要单独使用修饰符。修饰符的作用是增加而不是替换基类。<!-- 别 --><button class="btn--secondary"></button><style lang="scss"> .btn--secondary { display: inline-block; color: green; } </style> 带子元素的组件更复杂的组件含有子元素。原则上不要使用标签选择器，你不知道<li>里面是否还会出现嵌套的<ul><li><!-- 这样写 --><figure class="photo"> <img class="photo__img" src="me.jpg"> <figcaption class="photo__caption">Look at me!</figcaption></figure><style lang="scss"> .photo { /* css权重 of 10 */ &__img { } /* css权重 of 10 */ &__caption { } /* css权重 of 10 */ }</style><!-- 别 --><figure class="photo"> <img src="me.jpg"> <figcaption>Look at me!</figcaption></figure><style lang="scss"> .photo { /* css权重 of 10 */ img { } /* css权重 of 11 */ figcaption { } /* css权重 of 11 */ }</style>如果您的组件的子元素有几个层次，请不要尝试在类名称中表示每个层次。BEM并非旨在传达结构深度。表示组件中子元素的BEM类名称应仅包括基本/块名称和一个元素名称。在下面的示例中，请注意photo__caption__quote是BEM的不正确用法，而photo__quote更合适。<!-- 这样写 --><figure class="photo"> <img class="photo__img" src="me.jpg"> <figcaption class="photo__caption"> <blockquote class="photo__quote"> Look at me! </blockquote> </figcaption></figure><style lang="scss"> .photo { &__img { } &__caption { } &__quote { } }</style><!-- 别 --><figure class="photo"> <img class="photo__img" src="me.jpg"> <figcaption class="photo__caption"> <blockquote class="photo__caption__quote"> <!-- 在类名中永远不要包含多个子元素 --> Look at me! </blockquote> </figcaption></figure><style lang="scss"> .photo { &__img { } &__caption { &__quote { } // 在类名中永远不要包含多个子元素 } }</style>带修饰符的组件在某些情况下，您可能希望更改组件中的单个元素。在这些情况下，请向元素而不是组件添加修饰符。我发现，修改元素比修改整个组件要少见得多，也没什么用。<figure class="photo"> <img class="photo__img photo__img--framed" src="me.jpg"> <figcaption class="photo__caption photo__caption--large">Look at me!</figcaption></figure><style lang="scss"> .photo{ &__img--framed { /* 新增样式修改 */ } &__caption--large { /* 新增样式修改 */ } }</style>基于组件修改器的样式元素如果你发现正在以相同的方式修改同一组件的元素，则可以考虑将修改器添加到组件本身。并基于该修改器为每个子元素调整样式。这将增加css层级，但使修改组件变得更加简单。<!-- 这样写 --><figure class="photo photo--highlighted"> <img class="photo__img" src="me.jpg"> <figcaption class="photo__caption">Look at me!</figcaption></figure><style lang="scss"> .photo{ &--highlighted { .photo__img { } .photo__caption { } } }</style><!-- 别 --><figure class="photo"> <img class="photo__img photo__img--highlighted" src="me.jpg"> <figcaption class="photo__caption photo__caption--highlighted">Look at me!</figcaption></figure><style lang="scss"> .photo__img--highlighted { } .photo__caption--highlighted { }</style>多词名称BEM名称有意使用双下划线和双连字符而不是单个来分隔块元素修饰符。原因是可以将单个连字符(-)用作单词分隔符。class名称应易于阅读，慎用缩写。<!-- 这样写 --><div class="some-thesis some-thesis--fast-read"> <div class="some-thesis__some-element"></div></div><style lang="scss"> .some-thesis { &--fast-read { } &__some-element { } }</style><!-- 别 -->// These class names are harder to read<div class="somethesis somethesis--fastread"> <div class="somethesis__someelement"></div></div><style lang="scss"> .somethesis { &--fastread { } &__someelement { } }</style>

本篇为【言币有中】第四期，内容为币圈投资心得。 如今以“双微一抖”为代表的娱乐APP，已然成为当代人居家旅行生活必备品。 这些平台上短小碎片化的内容、更新快速的娱乐性信息，以及人们无时不在转移的注意力，无一不昭示着“狂欢化”、“娱乐化”、“快节奏”等图像认知时代的信息倾向。 赫胥黎在《美丽新世界》中曾表达出如此隐忧，“我们将毁于我们热爱的东西”。他担心的是人们将在如此汪洋信息之中变得日益自私和被动，真理将被淹没在无聊又繁琐的世事之中，而我们的文化成为充满感官刺激、欲望追逐以及无规则的庸俗文化。 不由让人想起美国前国务卿布热津斯基（以下简称“布老”）提出的“奶头乐”一词。 何谓“奶头乐”？ 1995年，美国旧金山举办过一个集合全球500名政治精英的会议，会议旨在对全球化的世界进行分析与规划。 与会者们一致认为：全球化带来的快速而激烈的竞争将会使全球80%的人口边缘化，而这80%的庸碌大众与20%搭上全球化快车的精英之间的冲突，将成为今后全球的主要问题。 如何让20%的精英高枕无忧，让80%的所谓“loser”们安分守己呢？ 布老认为，谁也没有能力改变未来的“二八现象”，削弱“边缘人”的精力与不满情绪的办法只有一个，他提出一个全新的词“tittytainment”——“奶头乐”，即在80%人的嘴中塞一个“奶嘴”。 呐，给你个奶嘴。 “奶嘴”的形式可以有两种：一种是发泄式娱乐，比如开放色情行业、鼓励暴力网络游戏、鼓动口水战；一种是满足式娱乐，比如拍摄大量的肥皂剧和偶像剧，大量报道明星丑闻，播放很多真人秀，商品优惠活动、大众化视听娱乐等大众娱乐节目。 这种“驭民之道”听上去有点危言耸听，但当我们不考虑“奶头乐”是否有其“幕后操纵者”，单纯地站在信息化时代受众的视角上看这个词。听上去有些魔性的“奶头乐”，可以说是非常贴合如今的社会现实。 当以矛盾冲突来煽动情绪的文章充斥互联网，当海量信息不断地轰炸人们的视网膜，当人们带着焦虑以及浮躁迁移于不同的平台。 再看看你身边，公共场所开着抖音、快手外放扬声嘻嘻大笑的人们——是不是像一个个含着“奶嘴”的“巨婴”？ 你是否会觉得似乎有那么点道理？甚至开始对号入座？ 币圈投资与“奶头乐” 区块链行业浮躁喧嚣，各色信息也充斥于各个平台，因此甄别优质信息必然成为投资者的基本素养。 但是部分投资人缺乏相应的投资经验，听取各路“大神”的喊单推荐、在各个社群打听着似真似假的内部信息，被这些信息弄得心潮澎湃，直接“梭哈！”，却很少主动去涉猎投资知识来建立自己的认知框架。 他们带着对财富的渴望涌入区块链行业，又不可避免地陷入信息从众的处境，希望以最小的信息成本来实现自己的暴富梦，最终陷入“总是血亏”的高发事件中。 诚然，有些意见领袖一直勤勤恳恳地为大家提供高质量的内容，值得好好吸收甚至是用小本本记下来；但是一部分大V提供的经验之道，或许还得再三考量。 吸收大量低质的碎片化信息，看似填补了投资方法论的空白，但极大地占用了自己独立思考的时间与精力，思考力随之慢慢被侵蚀。 更可怕的是走入“茧房”——日益倾向于接收简单粗暴、浅层易懂的理论和逻辑，难以沉下心来研究K线走势，做交易日记总结投资经验，最后结合行情调整自己的投资策略。 表现就是，还没有get投资交易的核心逻辑，上来就问“买哪个？”“什么时候买？”“多还是空？”，或是频繁情绪化地“追涨杀跌”，难以在行情大涨大跌之时合理调整仓位以及心态。 如何摆脱“毒奶嘴”？ 投资是一场修行，财商的提高不是一朝一夕的事情。 低质量的、武断的信息无法真正提高投资能力，那些多余的荷尔蒙应该用在深层、高密度的阅读之上。 有一句话是这么说的，“当你看一本书感到费劲的时候，证明你在进步和提高。”看上去有点冷幽默，但是理却是这么个道理。 想一想有多久没有用“看上去费脑”的内容给自己充电，一直花费大量时间在简单粗暴的内容上。咬着“毒奶嘴”，注意力被剥夺，最后投资也难逃“七亏二平一盈利”的魔咒。 So，学会摆脱过于泛滥浅层的信息，或是更高一级，从大量信息之中提炼出于己有用的信息。记录自己的交易日记，用更为可靠的方法论来研究投资数据，捋清某种投资行为的逻辑。 投资这件事儿，得有理有据，谨慎实践，才能不乱方寸、让获利成为大概率事件。 好了，本期【言币有中】就到这里。 我们下期见~

一.分析需求假如你的女朋友发给你一堆衣服的图片，然后问你哪件好看，只能选一件最好看的，你会如何做？为什么不交给程序来进行抉择呢？本文的主题就是开发一个选择程序来解决你的女朋友的选择问题。 页面最终效果如图所示: 我们来总结一下要实现的功能: 可以上传多张图片。（这里不需要写后台也是可以的，只不过如果要存储数据可以选择会话存储,当然本例没有被存储）。点击开始的时候会开始在所有的图片之间来回选择。选择加了一个样式（阴影样式）。点击停止的时候，出现选择的结果。点击重置也就重置选择效果。因为默认数据是以上的5张图。所以一旦点击了上传将会被替换掉，所以点击还原就是还原成默认的数据。 二.实现html与cssok，需求分析完成。接下来开始设计整个界面,没错为了让界面看起来比较简洁明了。布局很简单。就是排列一堆图片以及图片名,然后结果显示在下方，最后就是排列一堆按钮。如此一来基本用浮动布局也可以办到。所以html和css都没什么好说的: html: <div id="list-image"></div> <div id="result"> 点击开始选择吧! </div> <div id="list-button"> <button class="upload-btn btn" id="upload-btn" type="button"> 上传 <input type="file" id="upload-input" class="upload-input" multiple> </button> <button class="start-btn btn" id="start-btn" type="button">开始</button> <button class="stop-btn btn" id="stop-btn" type="button">停止</button> <button class="reset-btn btn" id="reset-btn" type="button">重置</button> <button class="origin-btn btn" id="origin-btn" type="button">还原</button></div>css: * { margin: 0; padding: 0; } #list-image { position: relative; margin-top: 25px; } #list-image::after { content: ""; clear: both; height: 0; display: block; visibility: hidden; } #list-image .list-image-item { width: 120px; height: 150px; float: left; margin-left: 15px; } .list-image-item-active { box-shadow: 0 0 15px #2396ef; } #list-image .list-image-item img { width: 120px; height: 120px; display: block; } #list-image .list-image-item p { text-align: center; font-size: 18px; } #list-button { margin: 15px; } .btn { line-height: 1; white-space: nowrap; background: #fff; border: 1px solid #dcdfe6; color: #606266; -webkit-appearance: none; transition: 0.1s; font-weight: 500; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; padding: 12px 14px; font-size: 14px; text-align: center; display: inline-block; cursor: pointer; border-radius: 4px; outline: none; } .start-btn, .upload-btn { background: #66b1ff; border-color: #66b1ff; color: #fff; } .start-btn:hover, .upload-btn:hover, .start-btn:active, .upload-btn:active { color: #fff; background-color: #409eff; border-color: #409eff; } .stop-btn:hover, .stop-btn:active, .reset-btn:hover, .reset-btn:active, .origin-btn:hover, .origin-btn:active { color: #57a3f3; background-color: #fff; border-color: #57a3f3; } #result { color: #2396ef; font-size: 25px; margin: 2em; } @media screen and (max-width: 765px) { #list-image { padding: 20px; margin-top: 0; } #list-image .list-image-item { width: 50%; margin-left: 0; } #list-image .list-image-item img { width: 100px; height: 100px; margin: 10px auto; } #result { margin: 0; text-align: center; margin-bottom: 1em; } #list-button { margin: 0; margin-bottom: 1em; text-align: center; } } input[type="file"] { display: none !important; }三.分析js逻辑代码咱们来分析一下js代码，首先定义一堆默认数据: ...

CSS盒子模型详情请参阅原文 CSS选择器权重

效果 引入样式表functions.php function login_scripts() { wp_enqueue_style( "login-index", get_template_directory_uri() . "/style/login.css" );}add_action('login_enqueue_scripts', 'login_scripts');样式less .login { position: relative; background-image: url("https://img.yzb123.top/wp-bj.jpg"); background-position: center; background-size: cover;}#login { position: absolute; left: 50%; margin-left: -200px; padding: 0; top: 50%; margin-top: -300px; background: #fff; width: 400px; border-radius: 4px; h1 { padding: 30px 0; a { background-image: url("https://img.yzb123.top/1.png"); border-radius: 50px; box-shadow: 0 0 10px 5px #e4eaef; background-size: 80% auto; background-position: center; margin: 0 auto; width: 80px; outline: none; height: 80px; transition: all .2s; &:hover { box-shadow: 0 0 10px 5px #bfd9ef } } } form { box-shadow: none; margin-top: 0; padding: 10px 30px 2px; input { padding: 7px 10px; margin-top: 8px; font-size: 16px; border-radius: 4px; height: 40px; &:focus { border-color: #419df5; box-shadow: 0 0 2px rgb(123, 184, 243); } } .forgetmenot { padding-bottom: 20px; padding-top: 7px; input[type=checkbox], input[type=radio] { width: 20px; height: 20px; margin-top: 0 } } .submit { float: none; input[type=submit] { width: 100%; background: #419df5; border-color: #419df5; line-height: 40px; padding: 0; text-shadow: none; box-shadow: none } } } #nav, #backtoblog { padding-left: 30px }}@media screen and (max-width: 767px) { #login { left: 5%; margin-left: 0; width: 90% }}效果预览前小端 ...

前端面试每日3+1简介有些是聚合平台，大家一起来成就它，而我的使命是要去成就别人，我觉得自己做的事情很伟大，所以我在坚持！就算最后一个人都没有，那我还是要坚持，因为我很固执为自己而活！近些日子，很多人私聊我很多问题，我把这些问题归类整理了下，便形成了“前端面试每日3+1”的介绍。语录整理问：3+1指的是什么？ 答：指的是前端的3个必会技能html/css/javascript和一个工作中相关的软技能。问：为什么是3+1？ 答：在这千变万化，类库层出不穷的前端，要知道html、css、javascript才是基石！有的时候我们舍近而求远，容易被各种框架所迷惑，要做到不忘初心才能方得始终，+1是加了个技能题，扩展我们的视野（广度）。问：你提到的“每日三问”，指的是哪三问呢？ 答：出自于《论语》，曾子曰：“吾日三省吾身”。今天我做计划了吗？今天我学习了吗？今天我思考了吗？问：你为什么要做这个事？你的初衷是什么？ 答：好多人都问过我，为什么要做这个事情呢？故事起源于离职同事发来的一道求助面试题，然后在部门企业微信群里炸开了，答题完后大家觉得如果要是每天来一题，是不是会更爽呢？以面代练，突发其想说干就干，所以就有了这个开源仓库，只为利他利己！当时的一股劲，说做就做，没想这么多。现在好好想下，其实不为别的，就算是为了自己吧，坚持去做一件事，哪怕就只有我一个人。问：为什么没有答案？ 答：这个问题已经有不下百人问过我，在这我一直都在强调三点： 1.独立思考（勤思考）；2.动手去做（多动手）；3.坚持学习（能坚持）答案网上一大把，就算是我一下子把上千道题目和答案放在你面前，你未必看得下去，学习是一个思考与积累的过程。我宁愿自己花点时间深入弄懂一个知识点，也不愿意仅仅只是把这几千道题收藏起来！问：有没有人让你提供过答案？ 答：有，非常多！有不少朋友上来就是要答案，我都会说没有！问：面试题这么多，网上搜索出来有很多，为何还要一天天发呢？ 答：如果我一下子把所有题列出来了，你觉得你还会看吗？就好比一下给你几十G的视频，你觉得会有效果吗？问：你去哪弄的这么多面试题？ 答：很多都是工作中遇到的，然后拿出来分享下，当然还有更多是来自广大朋友的力量。所以说开源是大家的，不是我一个人的，取之于民用之于民。问：题目有没有可能出完的一天？出完了怎么办？ 答：会，但学习的过程是无止境的。问：你觉得出的题偏难还是简单？ 答：我觉得没必要去划分简单和难的界线，只有学与不学。问：看到你的平时提交记录，都是在还没到5点的时候，你究竟是几点起的？ 答：4：30问：你不困吗？答：不困问：有没有人质疑过你？答：有啊，有几次我一刚发完题，网友们就在微信上私聊我假装跟我聊天，看我是机器发的还是人工发的，刚开始几次我还好就回复了，但后来我就不回复了，等上班在地铁上时再回复下，因为我不想占用他们的早上的宝贵时间。问：你是如何来得动力？ 答：做就要做好，这是一种个性吧。问：你怎么会有这么多时间？ 答：早上的时间完完全全属于自己的，那时没有微信、没有电话、没有饭局等的打扰。问：这开源项目未来还要添加什么功能吗？ 答：可能会做个网站展示吧，具体怎么做暂时还未考虑这么多。问：你是怎么做推广的？ 答：刚开始的时候，我天天在掘金上发，后面被喷了很多次，但我就是这么厚脸皮，既然请不了大v，那就只能天天坚持厚脸皮啰^_^！问：在开源过程中会有反对你的人吗？ 答：好多，非常感谢！问：你能自我评价下自己是个什么样的人？ 答：非常靠谱问：有和你做类似的事情吗？或者说是竞争对手？ 答：这不存在竞争对手一说。但做的过程中发现类似的朋友还是挺多的，都是爱学习的朋友！希望更多的朋友参与进来！像木易杨、刘小夕他们也在为社区贡献，质量都非常高，欢迎大家也关注下（呵呵，我得去收他们的广告费才行，1分也是爱）。问：你这个项目主要针对的是哪些人群呢？ 答：web开发的朋友们。问：对于喜欢学习的朋友你有什么建议吗？ 答：只要你真的感兴趣，剩下的就只有坚持了。问：听说你非常喜欢打羽毛球 答：这不用听说的，认识我的人都知道这个事情！问：前端里面你觉得公众号做得最好的是哪个？ 答：情大的《前端早读课》，他几年前发第一篇的时候我刚好在地铁上，在这几年的时间里，我每天都会看。问：你说你的事业是父亲，怎么说呢？ 答：其实生活和工作是息息相通的，作为父亲，是一种责任，对孩子的负责也是对自己的负责。问：对于前端的发展，你怎么看？ 答：静下心来学习，以不变应万变。问：你做这个开源项目的目的是什么？ 答：没有想过，单纯地想坚持做件事吧。其实这是为了什么呢？挣钱？挣名利？我只觉得别人能做到的，我一定也可以做得到，就是那么要强！问：在开源过程中你学到了什么？ 答：学会了包容和取舍。问：在开源过程中，你觉得遇到最印象深刻的是什么？ 答：有个网友加我说他通过3+1的深入学习，自己掌握了很多以前不会也没有去想过的知识点，同时也给自己找到了份好工作，最重要的是学会了主动学习。这点令我非常感动，至少有认可的，知足！问：在开源过程中，有没有发生过什么问题？ 答：题目有时候会出现类似的（已经尽量避免了，后期准备做个题库管理的工具，加上点人工智能分词，就能分析出题目是否类似了）问：在开源过程中遇到最大的困难是什么？ 答：是自己的坚持！刚开始时，会有各种好心的朋友提建议，随着时间的增长也会暴露出问题，比如说端午节去玩时，由于忘带电脑，就只发了issue，没有更新README，朋友们一眼就看出来了。问：为何要纯手工发布而不写个工具做自动化发布呢？ 答：怕变成自动化后，我就很少关注这事了。但我后期我会写些工具来辅助，比如说题目的管理等。问：会坚持多久？ 答：很久问：如果硬要加个期限呢？答：5年问：别人做的面试题都标有大厂的标签，为何你不标下 答：很多时候，我们都是小人物，也有很多人都跟我一样，并非人人都是BAT出身，每个人都是从新手一步步过来的。问：别人做的面试题都标高级、进阶之类的，为何你不标下 答：标了高级、进阶只是看着好看而已，只有自己学到了才是真货。问：宗旨是什么 答：勤思考，多动手，善总结，能坚持问：给前端人员有什么建议吗？ 答：学习方法：集中学习法，分散学习法。学习是个积累的过程，希望大家能每天保持学习，平时的积累，是要深度的，不是只看下题就会了！学习本该孤独的。问：你写的死磕自己，愉悦大家是怎么理解呢？ 答：推荐大家去看看罗振宇《罗辑思维》，每天早上6点发布60s语音，这年头敢死磕自己的太少了！

最近开始学习Zepto源代码，分享出来，共同学习。前端新人，技术欠佳，多多见谅参考的gitbook地址感谢作者奉献 代码主体机构： 定义Zepto——核心自执行函数 函数里面的变量都为私有变量，防止污染全局var zepto = (function (){})(); 自执行函数 定义全局Zepto 核心函数 函数常用示例 $('div'); init函数： zepto.init = function (selector, context) { var dom // If nothing given, return an empty Zepto collection if (!selector) return zepto.Z() // Optimize for string selectors else if (typeof selector == 'string') { selector = selector.trim() // If it's a html fragment, create nodes from it // Note: In both Chrome 21 and Firefox 15, DOM error 12 // is thrown if the fragment doesn't begin with < if (selector[0] == '<' && fragmentRE.test(selector)) dom = zepto.fragment(selector, RegExp.$1, context), selector = null // If there's a context, create a collection on that context first, and select // nodes from there else if (context !== undefined) return $(context).find(selector) // If it's a CSS selector, use it to select nodes. else dom = zepto.qsa(document, selector) } // If a function is given, call it when the DOM is ready else if (isFunction(selector)) return $(document).ready(selector) // If a Zepto collection is given, just return it else if (zepto.isZ(selector)) return selector else { // normalize array if an array of nodes is given if (isArray(selector)) dom = compact(selector) // Wrap DOM nodes. else if (isObject(selector)) dom = [selector], selector = null // If it's a html fragment, create nodes from it else if (fragmentRE.test(selector)) dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null // If there's a context, create a collection on that context first, and select // nodes from there else if (context !== undefined) return $(context).find(selector) // And last but no least, if it's a CSS selector, use it to select nodes. else dom = zepto.qsa(document, selector) } // create a new Zepto collection from the nodes found return zepto.Z(dom, selector) }如果传递的第一个参数为string——首字母为< 并且时html标签 创建新的DOM否则如果为正常的字符串直接获取DOM如果有第二项参数 递归调用只有单参数本方法 并且执行find方法如果传递的参数为函数——作为ready的回调传递如果已经时zepto对象 直接返回如果是DOM数组 如果是单个DOM如果是html片段 ...

盒模型盒模型由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成，其有两种标准：标准模型和IE模型。由上图对比可看出区别在于元素的box-sizing的默认值不同： 标准模型：默认box-sizing: content-box。定义宽（width）高(height)等于盒子内容（content）的宽高。IE模型：默认box-sizing: border-box.定义的宽（width）高(height)等于内容(content)+内边距(padding)+边框(border)的总宽高

( 第六篇 )仿写'Vue生态'系列___"模板loader与计算属性"本次任务 编写'cc-loader', 使我们可以使用'xxx.cc'文件来运行我的框架代码.为'cc_vue'添加生命周期函数.新增'计算属性'.新增'观察属性'.一.'cc-loader'的定义与编写本次只是编写一个最基础的版本, 后续完善组件化功能的时候, 会对它有所改动.使'webpack'可以解析后缀为'cc'的文件.必须做到非常的轻量.让我们一步一步来做出这样一个'loader', 首先我先介绍一下文件结构, 在'src'文件夹平级建立'loader'文件夹, 里面可以存放以后我做的所有'loader'. 不可或缺的步骤就是定义'loader'的路径.cc_vue/config/common.js新增resolveLoader项 resolveLoader: { // 方式1: // 如果我书写 require('ccloader'); // 那么就会去 path.resolve(__dirname, '../loader')寻找这个引入. alias: { ccloader: path.resolve(__dirname, '../loader') }, // 方式2: 当存在require('xxx');这种写法时, 先去'node_modules'找寻, 找不到再去path.resolve(__dirname,'../loader')找找看. modules:[ 'node_modules', path.resolve(__dirname,'../loader') ] },'loader'文件的配置写完了, 那么可以开始正式写这个'loader'了.cc_vue/loader/cc-loader.js // 1: 'source'就是你读取到的文件的代码, 他是'string'类型.function loader(source) { // ..具体处理函数 // 2: 处理完了一定要把它返回出去, 因为可能还有其他'loader'要处理它, 或者是直接执行处理好的代码. return source;}module.exports = loader;模板的定义 本次暂不处理title, 因为没啥技术含量暂时也没必要.'#--style-->' 会被替换为css的内容.'#--template-->' 会被替换为模板的内容.<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8' /> <meta name='viewport' content='width=device-width, initial-scale=1.0' /> <meta http-equiv='X-UA-Compatible' content='ie=edge' /> <title>编译模板</title> #--style--> </head> <body> <div id="app"> #--template--> </div> </body></html>最终要达到的'.cc'文件的书写方式 ...

https://mp.weixin.qq.com/s?__biz=MzU2NTc1MTc5MQ==&mid=2247484379&idx=1&sn=c1b76fd6dea196085924b095f9532542&chksm=fcb7b95bcbc0304d512fdf7c2737efe68a0c88282101f5e6a902d43878690839e3d4912c2c2c&token=167148415&lang=zh_CN#rd

相关文章基于阿里egg框架搭建博客（1）——开发准备基于阿里egg框架搭建博客（2）——Hello World基于阿里egg框架搭建博客（3）——注册与登录基于阿里egg框架搭建博客（4）——权限控制基于阿里egg框架搭建博客（5）——置顶导航条基于阿里egg框架搭建博客（6）——浏览、发表文章基于阿里egg框架搭建博客（7）——编辑文章 githttps://github.com/ZzzSimon/e...喜欢就点个赞吧！ 正文模板继承导航条是博客不可或缺的一部分，几乎每一个页面都有置顶导航条。我们不可能在每个页面都复制一份相同的代码，因为这样代码变得冗余，而且当需要修改导航条时，改动量会非常之大。所幸的是，我们使用了nunjucks作为view模板，其提供的模板继承功能可以解决这个问题。 官方文档：https://nunjucks.bootcss.com/...页面设计 功能设计如页面设计图中所示，导航条共有6块功能： 站点名称，点击后可以回到首页文章按钮，点击后可以查看文章列表搜索框，可以按文章名称搜索文章发表文章按钮，顾名思义，可以发表博文用户头像下拉按钮，我的文章可以查看自己的文章或重新编辑设置，可以修改个人信息注销，注销用户，删除session，返回登录父模板parent.tpl代码（包含导航条）我们创建/app/view/parent.tpl文件： <!DOCTYPE html><html><head> <link rel="stylesheet" href="/public/bootstrap/css/bootstrap.css"> <script type="text/javascript" src="/public/js/jquery.min.js"></script> <script type="text/javascript" src="/public/bootstrap/js/bootstrap.min.js"></script> {% block head %}{% endblock %}</head><body><div id="nav"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="/">妖云小离</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="/articleList.htm">文章</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">预留 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" action="/search?_csrf={{ ctx.csrf | safe }}"> <div class="input-group"> <input type="text" class="form-control" placeholder="搜索" name="keyword"> <span class="input-group-btn"> <button class="btn btn-default" type="submit"> <span class="glyphicon glyphicon-search " aria-hidden="true"></span> </button> </span> </div> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="/edit.htm"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 发表文章</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <img src="" id="avatarNav" class="img-circle" style="width: 26px; margin-top: -6px"> <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="/myarticle.htm">我的文章</a></li> <li><a href="/myInfo.htm">设置</a></li> <li role="separator" class="divider"></li> <li><a href="/user/logout">注销</a></li> </ul> </li> </ul> </div> </div> </nav></div><div id="top" class="row" style="margin-top: 10%"></div><div class="container"> {% block content %}{% endblock %}</div><script type="text/javascript"> function getCookie(c_name) { if (document.cookie.length > 0) { c_start = document.cookie.indexOf(c_name + "=") if (c_start != -1) { c_start = c_start + c_name.length + 1 c_end = document.cookie.indexOf(";", c_start) if (c_end == -1) c_end = document.cookie.length return unescape(document.cookie.substring(c_start, c_end)) } } return "" } $('#avatarNav').attr('src', getCookie('avatarUrl'));</script>{% block script %}{% endblock %}</body></html>父模板中可以继承重写的地方有3处： ...

相关文章基于阿里egg框架搭建博客（1）——开发准备基于阿里egg框架搭建博客（2）——Hello World基于阿里egg框架搭建博客（3）——注册与登录基于阿里egg框架搭建博客（4）——权限控制基于阿里egg框架搭建博客（5）——置顶导航条基于阿里egg框架搭建博客（6）——浏览、发表文章基于阿里egg框架搭建博客（7）——编辑文章 githttps://github.com/ZzzSimon/e...喜欢就点个赞吧！ 正文俗话说万事开头难，此章节涉及大量的知识点，在每个代码后面都有解释，需要大家查看官方文档。 user表设计简单来说，注册与登录就是对user表的读写。所以我们首先对user表进行设计： 字段说明字段解释iduuidusername用户名password密码phone手机号create_time创建时间update_time更新时间avatar_url头像urlsql脚本DROP TABLE IF EXISTS `user`;CREATE TABLE `user` ( `id` varchar(20) NOT NULL, `username` varchar(18) NOT NULL, `password` varchar(20) NOT NULL, `phone` varchar(11) DEFAULT NULL, `create_time` datetime NOT NULL, `update_time` datetime NOT NULL, `avatar_url` varchar(255) DEFAULT NULL, PRIMARY KEY (`username`)) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;注册页面设计页面设计如上图所示，需要用户输入用户名，密码，手机号，还可以上传自己的头像。 前端代码官方文档推荐我们使用nunjucks作为模板。 使用方法：https://eggjs.org/zh-cn/intro...我们在app\view\home目录下创建register.tpl文件： <html><head> <title>注册</title> <link rel="stylesheet" href="/public/bootstrap/css/bootstrap.css"> <script type="text/javascript" src="/public/js/jquery.min.js"></script> <script type="text/javascript" src="/public/bootstrap/js/bootstrap.min.js"></script></head><body><div class="container "> <form class="center-block" style="width: 50%;margin-top: 10%" method="POST" action="/user/register?_csrf={{ ctx.csrf | safe }}" enctype="multipart/form-data"> <div class="form-group "> <img src="/public/avatar/default.jpg" id="avatarPic" class="img-circle center-block" style="width: 64px;"> <input type="file" id="avatarBtn" name="file" style="visibility: hidden"> <p class="text-center help-block">点击头像更改，只支持jpg,png格式，大小≤ 200 kb</p> </div> <div class="form-group"> <label for="username">账号</label> <input type="text" class="form-control" id="username" placeholder="用户名" name="username"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password" placeholder="密码" name="password"> </div> <div class="form-group"> <label for="phone">手机号</label> <input type="text" class="form-control" id="phone" placeholder="手机号" name="phone"> </div> <div class="form-group"> <button type="submit" class="btn btn-info pull-right">注册</button> </div> </form></div><script> $('#avatarPic').bind('click', function () { $('#avatarBtn').click(); }); $('#avatarBtn').bind('change',function (e) { if (window.FileReader) { var reader = new FileReader(); reader.readAsDataURL(e.target.files[0]); //监听文件读取结束后事件 reader.onloadend = function (e) { $('#avatarPic').attr("src",e.target.result); //e.target.result就是最后的路径地址 }; } });</script></body></html>有3点需要注意： ...

相关文章基于阿里egg框架搭建博客（1）——开发准备基于阿里egg框架搭建博客（2）——Hello World基于阿里egg框架搭建博客（3）——注册与登录基于阿里egg框架搭建博客（4）——权限控制基于阿里egg框架搭建博客（5）——置顶导航条基于阿里egg框架搭建博客（6）——浏览、发表文章基于阿里egg框架搭建博客（7）——编辑文章 githttps://github.com/ZzzSimon/e...喜欢就点个赞吧！ 正文上一篇文章我们实现了用户的注册与登录，接下来就需要对用户权限进行控制了，比如：普通用户只能评论，管理员可以发表文章，最高管理员可以修改用户权限等等。由于权限控制是一个通用的功能，我们把这块功能做成中间件。关于中间件： 官方文档：https://eggjs.org/zh-cn/basic...功能设计一个用户对应1个角色可以通过配置文件配置，某一个角色无权限使用的页面与接口可以配置无需验证用户与权限的path。比如：登录与注册的相关页面与接口只有登录过才能访问的path，否则跳转登录页。User表，增加role（角色）字段 配置文件我们在config/config.default.js中加入以下内容： auth : { noAuth:['/login.htm','/user/login','/register.htm','/user/register'], noPermission:{ admin:[], manager:['/admin.htm'], user:['/admin.htm','/edit.htm'] } }其中：noAuth节点配置的是无需验权就能访问的pathnoPermission节点配置的是各个角色无权限访问的path auth.js中间件代码我们创建app/middleware/auth.js文件： module.exports = (options, app) => { return async function auth(ctx, next) { //如果用户session没失效 if (typeof (ctx.session.user) !== 'undefined') { const username = ctx.session.user.username; //这里有两种做法，第一种每次都查库校验角色，优点：实时，角色变更对用户无感。缺点：查库效率低，可考虑用redis //第二种，把角色信息放进session,优点：无需查库，效率高。缺点：角色变更时需额外逻辑来处理老的session，否则客户端的用户角色无法实时更新 const role = await ctx.service.user.getRoleByUsername(username); const noPerList = options.noPermission[role]; if (noPerList && !noPerList.includes(ctx.path)) { await next(); } else { ctx.body = '无权限，请联系网站管理员！'; } //登录注册页面不需要权限 } else if (options.noAuth.includes(ctx.path)) { await next(); //如果session失效后则重定向到登录页 } else { ctx.redirect('/login.htm') } }};效果我们创建一个用户，并给与他user角色，由配置文件可以看出，user角色无权限访问/edit.htm路径。如图： ...

前端工程师，为什么要学习Docker ?传统的虚拟机，非常耗费性能 Docker可以看成一个高性能的虚拟机，并且不会浪费资源，主要用于Linux环境的虚拟化，类似VBox这种虚拟机，不同的是Docker专门为了服务器虚拟化，并支持镜像分享等功能。前端工程师也可以用于构建代码等等目前看，Dokcer不仅带火了GO语言，还会持续火下去 首先，我们看看传统的虚拟机和Docker的区别传统的虚拟机： Docker: 可以看到，传统的虚拟机是每开一个虚拟机，相当于运行一个系统，这种是非常占用系统资源的，但是Docker就不会。但是也做到了隔离的效果 Docker容器虚拟化的优点:环境隔离Docker实现了资源隔离，实现一台机器运行多个容器互不影响。 更快速的交付部署使用Docker，开发人员可以利用镜像快速构建一套标准的研发环境，开发完成后，测试和运维人员可以直接通过使用相同的环境来部署代码。 更高效的资源利用Docker容器的运行不需要额外的虚拟化管理程序的支持，它是内核级的虚拟化，可以实现更高的性能，同时对资源的额外需求很低。 更易迁移扩展Docker容器几乎可以在任意的平台上运行，包括乌力吉、虚拟机、公有云、私有云、个人电脑、服务器等，这种兼容性让用户可以在不同平台之间轻松的迁移应用。 更简单的更新管理使用Dockerfile，只需要小小的配置修改，就可以替代以往的大量的更新工作。并且所有修改都是以增量的方式进行分发和更新，从而实现自动化和高效的容器管理。 正式开始本文撰写于2019年10月13日 电脑系统：Mac OS 使用最新版官网下载的Docker 以下代码均手写，可运行 下载官网的Docker安装包，然后直接安装 https://www.docker.com/ Docker官网下载地址安装后直接打开 打开终端命令行，输入docker,会出现以下信息，那么说明安装成功 下载安装成功后，首先学习下Docker的两个核心知识点 container(容器)和image(镜像) Docker的整个生命周期由三部分组成：镜像（image）+容器（container）+仓库（repository） 思维导图如下： 该如何理解呢？每台宿主机（电脑），他下载好了Docker后，可以生成多个镜像，每个镜像，可以创建多个容器。发布到仓库时，以镜像为单位。可以理解成：一个容器就是一个独立的虚拟操作系统，互不影响，而镜像就是这个操作系统的安装包。想要生成一个容器，就用安装包（镜像）生成一次 上面就是Docker的核心概念，下面开始正式操作 补充一点：如果想深入Docker , 还是要去认真学习下原理，今天我们主要讲应用层面的 首先，我们回到终端命令行操作 输入: docker images如果你的电脑上之前有创建过的镜像，会得到如下： 如果没有的话就是空～ 我们首先创建一个自己的镜像 先编写一个Node.js服务 创建index.js // index.jsconst Koa = require('koa');const app = new Koa();app.use(async ctx => { ctx.body = 'Hello docker';});app.listen(3000);然后配置package.json文件 { "name": "app", "version": "1.0.0", "private": true, "scripts": { "start": "node server.js" }, "dependencies": { "koa": "^2.5.0" } } 正常情况下 使用npm start 或 node index.js 就可以启动服务可是我们这里需要打包进Docker中，这里就需要写一个配置文件dockerfile ...

相关文章基于阿里egg框架搭建博客（1）——开发准备基于阿里egg框架搭建博客（2）——Hello World基于阿里egg框架搭建博客（3）——注册与登录基于阿里egg框架搭建博客（4）——权限控制基于阿里egg框架搭建博客（5）——置顶导航条基于阿里egg框架搭建博客（6）——浏览、发表文章基于阿里egg框架搭建博客（7）——编辑文章 githttps://github.com/ZzzSimon/e...喜欢就点个赞吧！ 正文这是必备的Hello World章节，本章节将不使用脚手架，逐步创建一个hello world web应用。 初始化项目先来初始化下目录结构： $ mkdir egg-hello-world$ cd egg-hello-world$ npm init$ npm i egg --save$ npm i egg-bin --save-dev执行完成后如下图所示：除了下载的node模块以外什么都没有，不要着急，我们接下来会一点点创建。 添加 npm scripts 到 package.json： { "name": "egg-example", "scripts": { "dev": "egg-bin dev" }}编写Controller上一节我们知道，controller是需要放在app/controller/目录下的，所以我创建helloWorld.js文件： // app/controller/home.jsconst Controller = require('egg').Controller;class HelloWorldController extends Controller { async index() { this.ctx.body = 'Hello World'; }}module.exports = HelloWorldController;编写路由规则egg将路由交由app/router.js管理，于是我们在app/目录下创建router.js文件： // app/router.jsmodule.exports = app => { const { router, controller } = app; router.get('/', controller.helloWorld.index);};配置文件最后加上一个配置config/config.default.js文件：注意：config与app为同级目录！ ...

1 引言Flex 与 Grid 相比就像功能键盘和触摸屏。触摸屏的控制力相比功能键盘来说就像是降维打击，因为功能键盘只能上下左右控制（x、y 轴），而触摸屏打破了布局障碍，直接从（z 轴）触达，这样 无论 UI 内部布局再复杂，都可以通过 touch 直接定位。 Flex 是一维布局方式，我们需要不断嵌套 Div 才能形成复杂结构，而一旦布局产生了变化，原有嵌套结构如果不能 “兼容变化” 到新结构，代码就需要重构。而 Grid 就像触摸屏一样，可以二维布局，即便布局方式做了翻天覆地的调整，也仅需少量修改就能适配。 这就是这次精读 用 css grid 重新思考布局 的原因，理解这个革命性布局技术给布局，甚至代码逻辑组织带来的变化。 2 概述作者首先抛出了 Flex 的问题，其实是 block float flex 这三种布局模式的通病： 布局结构由 Div 层级结构描述，导致 Div 层级复杂且遇到结构变更时难以维护。定制能力弱。Flex 布局有一些不受控制的智能设定，比如宽度 50% 的子元素会被同级元素挤到 50% 以下，这种智能化在某些场景是需要的，但由于没有提供像 Grid 的 minmax 之类的 API，所以定制型不足。 举个例子，上图的结构用 Flex 描述可能是这样的： <div class="card"> <div class="profile-sidebar"> <img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img" /> <ul class="social-list"> <li> <a href="#" class="social-link" ><i class="fab fa-dribbble-square"></i ></a> </li> <li> <a href="#" class="social-link" ><i class="fab fa-facebook-square"></i ></a> </li> <li> <a href="#" class="social-link" ><i class="fab fa-twitter-square"></i ></a> </li> </ul> </div> <div class="profile-body"> <h2 class="profile-name">Ramsey Harper</h2> <p class="profile-position">Graphic Designer</p> <p class="profile-info"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere a tempore, dignissimos odit accusantium repellat quidem, sit molestias dolorum placeat quas debitis ipsum esse rerum? </p> </div></div>利用 HTML 嵌套结构，我们将图形纵向分成两大块，然后在每块内部继续嵌套划分布局，这是最经典的布局行为了。 ...

今天的知识点 (2019.10.14) —— 第181天[html] 请使用纯HTML制作一个进度条[css] 你知道css的预处理器和后处理器都有哪些吗？它们有什么区别呢？[js] 写一个密码生成器，并同时写一个密码强度校验的方法[软技能] 你有自己写过爬虫的程序吗？说说你对爬虫和反爬虫的理解？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...

前言前端的面试和学习都是不可或缺的事情，在这里收集一些高频面试题，供自己现在和以后查阅和查缺补漏的同时，也希望对小伙伴有所帮助。 HTML1、HTML语义化的理解1、用正确的标签做正确的事情！2、HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；3、在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。4、搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。5、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解 2、HTML5有哪些新特性、移除了那些元素？<font color='red'>HTML5</font> 现在已经不是 <font color='red'>SGML</font> 的子集，主要是关于图像，位置，存储，多任务等功能的增加 绘画 canvas用于媒介回放的 <font color='red'>video</font> 和 <font color='red'>audio</font> 元素本地离线存储 <font color='red'>localStorage</font> 长期存储数据，浏览器关闭后数据不丢失<font color='red'>sessionStorage</font> 的数据在浏览器关闭后自动删除语意化更好的内容元素，比如<font color='red'>article、footer、header、nav、section</font>表单控件，<font color='red'>calendar、date、time、email、url、search</font>新的技术<font color='red'>webworker、 websocket、 Geolocation</font>移除的元素： 纯表现的元素：<font color='red'>basefont、big、center、font、 s、strike、tt、u</font>对可用性产生负面影响的元素：<font color='red'>frame、frameset、noframes</font>支持HTML5新标签： <font color='red'>IE8/IE7/IE6</font>支持通过<font color='red'>document.createElement</font>方法产生的标签可以利用这一特性让这些浏览器支持<font color='red'>HTML5</font>新标签浏览器支持新标签后，还需要添加标签默认的样式当然也可以直接使用成熟的框架、比如<font color='red'>html5shim</font>3、<img>的title和alt有什么区别alt 是图片加载失败时，显示在网页上的替代文字；title 是鼠标放上面时显示的文字。alt是img必要的属性，而title不是。4、从浏览器地址栏输入url到显示页面的步骤浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；载入解析到的资源文件，渲染页面，完成。5、HTML全局属性(global attribute)有哪些class:为元素设置类标识data-*: 为元素增加自定义属性draggable: 设置元素是否可拖拽id: 元素id，文档内唯一lang: 元素内容的的语言style: 行内css样式title: 元素相关的建议信息6、介绍一下你对浏览器内核的理解？主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核 JS引擎则：解析和执行javascript来实现网页的动态效果 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎 7、请描述一下 cookies，sessionStorage 和 localStorage 的区别？cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密） cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存 存储大小： cookie数据大小不能超过4ksessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大有期时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据sessionStorage 数据在当前浏览器窗口关闭后自动删除cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭 8、行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？行内元素有：a b span img input select strong块级元素有：div ul ol li dl dt dd h1 h2 h3 h4… p空元素：<br> <hr> <img> <input> <link> <meta>行内元素不可以设置宽高，不独占一行块级元素可以设置宽高，独占一行9、如何在页面上实现一个圆形的可点击区域？svgborder-radius纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等10、HTTP状态码及其含义1XX：信息状态码2XX：成功状态码3XX：重定向4XX：客户端错误5XX: 服务器错误11、你能描述一下渐进增强和优雅降级之间的不同吗渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 ...

带计数器的自动编号CSS计数器就像“变量”。变量值可以通过CSS规则递增（它将跟踪它们被使用的次数）。要使用CSS计数器，我们将使用以下属性：counter-reset - 创建或重置计数器counter-increment - 增加计数器值content - 插入生成的内容counter()或counters()函数 - 将计数器的值添加到元素要使用CSS计数器，必须首先使用counter-reset创建。 下面的示例为页面创建一个计数器（在body选择器中），然后递增每个<h2>元素的计数器值，并将“选项 < 计数器的值 >：”添加到每个<h2>元素的开头： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>教程（jc2182.com）</title> <style> body { counter-reset: section; } h2::before { counter-increment: section; content: "选项 " counter(section) ": "; } </style></head><body><h1>使用CSS计数器:</h1><h2>HTML教程</h2><h2>CSS教程</h2><h2>JavaScript教程</h2><p><b>注意:</b> 只有在指定了!DOCTYPE时，IE8才支持这些属性。</p></body></html>嵌套计数器以下示例为页面（节）创建一个计数器，为每个<h1>元素（子节）创建一个计数器。对于每个<h1>元素，“section”计数器将计为“Section < 值的分区计数器 >。”，并且“subsection”计数器将计入每个<h2>元素，记入“<分区计数器的值 >==< 分段计数器的值 >“： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>教程（jc2182.com）</title> <style> body { counter-reset: section; } h1 { counter-reset: subsection; } h1::before { counter-increment: section; content: "分区计数器的值 " counter(section) ". "; } h2::before { counter-increment: subsection; content: counter(section) "." counter(subsection) " "; } </style></head><body><h1>HTML教程:</h1><h2>HTML教程</h2><h2>CSS教程</h2><h1>Scripting教程:</h1><h2>JavaScript</h2><h2>VBScript</h2><h1>XML教程:</h1><h2>XML</h2><h2>XSL</h2><p><b>注意:</b>只有在指定了!DOCTYPE时，IE8才支持这些属性。</p></body></html>属性描述content与::before和::after伪元素一起使用，插入生成的内容counter-increment递增一个或多个计数器值counter-reset创建或重置一个或多个计数器

今天的知识点 (2019.10.09) —— 第176天[html] 做好的页面都有在哪些浏览器上测过[css] 你是怎样对css文件进行压缩合并的？[js] 请用js实现一个promise的方法[软技能] 在工作中，你觉得如何提高幸福指数呢？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...

写在前面在真正的前端开发中，我们很少去写行内样式和内嵌样式，通常都是去引用外部样式。 而在我们学习之初的外部样式表都是用link引入的，但是当后来我们学习的逐渐深入，发现@import也可以引入样式。那么同样是引入外部样式，这两者有什么区别呢，下面请跟随我来详细了解一下link和@import的区别吧！ 区别<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" > <style type="text/css" > @import url("./myCss.css"); </style> </head></html>这就是两种引用方式的常见用法，可以很清晰的看出 1、从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css的语法，只有导入样式表的作用。2、加载顺序：页面被加载时，link会和html同时被加载而；@import引入的 CSS 将在页面加载完毕后被加载。3、兼容性：@import是 CSS2.1 才有的语法，所以只能在 IE5以上 才能识别；而link是 HTML 标签，所以不存在兼容性问题。4、DOM：javascript只能控制dom去改变link标签引入的样式，而@import的样式不是dom可以控制的。5、link方式的样式权重高于@import的权重。（如果对权重不是十分了解，可以看我之前的文章）@import最优写法@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别@import url(style.css) //Windows NS4, Macintosh NS4不识别@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别@import url("style.css") //Windows NS4, Macintosh NS4不识别由上分析知道，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。 结论@import是依赖css的，存在一定的兼容问题，并且根据浏览器渲染机制来说，他在dom树渲染完成后才会渲染，并且不能被js动态修改。 ...

今天的知识点 (2019.10.08) —— 第175天[html] HTML5的哪些新特性是令你最兴奋的？[css] 如果css文件过大时，如何异步加载它？[js] 请说说你对promise的理解[软技能] 你对“技术服务于生活”的理解是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...

故障艺术，英文名称叫glitch，在很多赛博朋克作品中经常看到，其实就是故意表现一种显示设备的小故障效果，抖音的图标其实就是这种的效果，我们看下这个图标 这个图标中的红色和蓝色的偏移其实就是一种故障艺术，看到这个，我就能想到早年我家还没有有线电视时，摇天线对电视信号的场景，信号一差就是对着电视一阵拳打脚踢，现在看到这种艺术效果颇为怀念。 某甲：为啥我没遇到过这种场景？ 我：你把手里的平板扔地上就能看到了。 某甲：（土豪动作完成）我摔了，咋还没看到呢 我：我就打个比方，你何必当真... 某甲：我一定要看到！ 我：要不你再跺几脚... ----------------------------------------我是打算开始的分割线------------------------------------------ 我们先来实现一个动态的抖音故障效果，首先我们要有一个干净的抖音图标，我是从阿里巴巴矢量图标库找的，因为它家支持SVG格式，得到的SVG代码是这样的。 <svg id="douyin" t="1570181112474" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2916" width="128" height="128"> <path d="M937.386667 423.850667a387.84 387.84 0 0 1-232.874667-77.824v352.341333C704.512 878.250667 565.930667 1024 394.922667 1024S85.333333 878.250667 85.333333 698.368c0-179.882667 138.581333-325.632 309.589334-325.632 17.066667 0 33.706667 1.450667 49.92 4.266667v186.624a131.754667 131.754667 0 0 0-48.64-9.216c-76.288 0-138.154667 65.024-138.154667 145.322666 0 80.213333 61.866667 145.322667 138.24 145.322667 76.202667 0 138.069333-65.109333 138.069333-145.322667V0h172.714667c0 134.485333 103.68 243.541333 231.594667 243.541333v180.309334h-1.28" p-id="2917"></path> </svg>看到的图形是这样子的 注意，在SVG的代码里面是没有设置颜色的，图片里面的黑色是为了让大家看清楚。我们先把白色，蓝色和红色的三层抖音图标先显示出来，代码如下： <use xlink:href="#douyin" x="0%" y="10%" class="douyin1" /><use xlink:href="#douyin" x="0%" y="10%" class="douyin2" /><use xlink:href="#douyin" x="0%" y="10%" class="douyin" />/ 白色 /.douyin { ...

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .container{ width: 300px; height: 100px; background: #7DC3FD; color: #fff; display: flex; } .item{ overflow: hidden; flex: 1; border: 1px solid #fff; } .line{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } </style></head><body> <div class="container"> <div class="item"> 商品图片 </div> <div class="item"> <div class="line"> 商品描述商品描述商品描述商品描述商品描述 </div> </div> </div></body></html> /* 大佬勿喷，有问题求指正 */ /* 问题描述：使用多级flex布局时，文字溢出以省略号代替失效； 使用场景：商城购物车元素左右布局内容的商品描述； 解决方案：在父级元素增加overflow: hidden； */

今天的知识点 (2019.10.07) —— 第174天[html] img、input标签它们是行内元素还是块级元素？[css] css3和css2的区别是什么？[js] 你知道断点续传的原理吗？用js怎么实现？[软技能] 你想当技术总监吗？你觉得技术总监应具备什么样的技能？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...

《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 htmlHTML的标签区分大小写吗？属性名区分大小写吗？HTML的注释有几种写法？有什么规范吗？怎样给radio分组呢？你知道HTML什么是单闭合标签和双闭合标签吗？为何要分为这两种呢？什么是Data URI？你知道有哪些常见的视频（音频）编码格式和视频（音频）格式吗？Shadow DOM和Virtual DOM有什么区别？css你有使用过字体图标吗？它有什么好处？你知道什么是流体排版吗？说说它的原理是什么？请说说你对vh、vw的理解以及它们的运用场景是什么？css怎么更改表单的单选框或下拉框的默认样式？你了解css3的currentColor吗？举例说明它的作用是什么？怎么去掉点击a链接或者图片出现的边框？css的linear-gradient有什么作用呢？js清空一个数组的方式有哪些？它们有什么区别？ES5和ES6、ES7有什么区别？写一个根据xpath获取元素的方法用js实现一个复制粘贴的功能说说你对ArrayBuffer的理解！它和Array有什么区别？如何解决在手机上长时间点击会选中图片？你了解什么是AOP吗？它的作用是什么？举个例子软技能从你的角度上来说下你对“产品经理”这个岗位的理解请解释下单线程与多线程之间的区别？浏览器本地存储和服务器端存储有区别呢？说下你对预加载的理解？你有做过直播相关开发吗？知道它的原理吗？写js代码时你喜欢哪种命名方式？这么多年来，你值得骄傲坚持的是什么？全部所有 交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎加入 “前端面试每日3+1” 微信群（扫个人微信号邀请入群）相互交流。

今天的知识点 (2019.10.06) —— 第173天[html] HTML的标签区分大小写吗？属性名区分大小写吗？[css] 你有使用过字体图标吗？它有什么好处？[js] 清空一个数组的方式有哪些？它们有什么区别？[软技能] 从你的角度上来说下你对“产品经理”这个岗位的理解《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...

( 第五篇 )仿写'Vue生态'系列___"解析模板事件" 本次任务 取消'eval', 改为'new Function'.支持用户使用'@'与'v-on'绑定各种事件.支持初始化'methods'数据.使用函数时可以传参与不传参, 可以使用'$event'.实现'c-center'与'c-show'指令.实现'cc_cb'函数, 模板里面也可以用if - else.一. eval 与 Function项目里面的取值操作, 我之前一直采用的都是eval函数, 但是前段时间突然发现一个特别棒的函数Function, 下面我来演示一下他的神奇之处. 1. 可以执行字符串 let fn1 = new Function('var a = 1;return a'); console.log(fn1()); // 12. 可以传递参数下面写的name与age就是传入函数的两个参数, let fn2 = new Function('name','age', ' return name+age');console.log(fn2('lulu',24)); // lulu24第二种传参方式 let fn3 = new Function('name, age', ' return name+age');console.log(fn3('lulu',24)); // lulu24综上我可以推断, 他的原理是把最后一个参数当做执行体, 然后前面如果有参数就被当做新生成函数的参数. 3. 全局作用域他执行的时候里面的作用域是全局的, 就算在函数内部, 执行时候也取不到函数内部的值, 所以想要使用的值, 都需要我们手动传进去. // 报错了, 找不到ufunction cc(){ let u = 777; let fn = new Function('var a = 5;console.log(u); return a'); console.log(fn()); } cc()// 执行成功function cc(){ u = 777; // 直接挂在window上 let fn = new Function('var a = 5;console.log(u); return a'); // 777 console.log(fn()); // 5 } cc()我也试了一下, 里面的var a 并不会污染全局, 放心使用吧; ...

本文参考CSS中文文档 CSS3 nav-right 属性 指定导航使用向左箭头和右箭头导航键： button#b1{ top:20%;left:25%; nav-index:1; nav-right:#b2;nav-left:#b4; nav-down:#b2;nav-up:#b4;}button#b2{ top:40%;left:50%; nav-index:2; nav-right:#b3;nav-left:#b1; nav-down:#b3;nav-up:#b1;}button#b3{ top:70%;left:25%; nav-index:3; nav-right:#b4;nav-left:#b2; nav-down:#b4;nav-up:#b2;}button#b4{ top:40%;left:0%; nav-index:4; nav-right:#b1;nav-left:#b3; nav-down:#b1;nav-up:#b3;}浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 属性IEChromeFFsafariOpennav-down不兼容不兼容不兼容不兼容Supported in Opera 11.5-12.不兼容于更新版本的浏览器属性定义及使用说明nav-right的属性指定使用箭头向右导航键导航。 默认值：auto继承：no版本：CSS3JavaScript 语法：object.style.navRight=2语法nav-index: auto|number|inherit;值说明auto浏览器将决定哪个元素导航id指定导航到该元素的IDtarget-name指定导航到目标帧inherit指定nav-right属性的值，应该从父元素继承本文参考CSS中文文档

本文参考CSS中文文档 CSS3 nav-up 属性指定导航使用向上箭头和向下箭头导航键： button#b1{ top:20%;left:25%; nav-index:1; nav-right:#b2;nav-left:#b4; nav-down:#b2;nav-up:#b4;}button#b2{ top:40%;left:50%; nav-index:2; nav-right:#b3;nav-left:#b1; nav-down:#b3;nav-up:#b1;}button#b3{ top:70%;left:25%; nav-index:3; nav-right:#b4;nav-left:#b2; nav-down:#b4;nav-up:#b2;}button#b4{ top:40%;left:0%; nav-index:4; nav-right:#b1;nav-left:#b3; nav-down:#b1;nav-up:#b3;}浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 属性IEChromeFFsafariOpennav-down不兼容不兼容不兼容不兼容Supported in Opera 11.5-12.不兼容于更新版本的浏览器属性定义及使用说明nav-up的属性指定使用箭头向上导航键导航。 默认值：auto继承：no版本：CSS3JavaScript 语法：object.style.navUp="#div2"语法nav-up: auto|id|target-name|inherit;值说明auto浏览器将决定哪个元素导航id指定导航到该元素的IDtarget-name指定导航到目标帧inherit指定nav-up属性的值，应该从父元素继承本文参考CSS中文文档

本文参考CSS中文文档 CSS3 nav-left 属性指定导航使用向左箭头和右箭头导航键： button#b1{ top:20%;left:25%; nav-index:1; nav-right:#b2;nav-left:#b4; nav-down:#b2;nav-up:#b4;}button#b2{ top:40%;left:50%; nav-index:2; nav-right:#b3;nav-left:#b1; nav-down:#b3;nav-up:#b1;}button#b3{ top:70%;left:25%; nav-index:3; nav-right:#b4;nav-left:#b2; nav-down:#b4;nav-up:#b2;}button#b4{ top:40%;left:0%; nav-index:4; nav-right:#b1;nav-left:#b3; nav-down:#b1;nav-up:#b3;}浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 属性IEChromeFFsafariOpennav-down不兼容不兼容不兼容不兼容Supported in Opera 11.5-12.不兼容于更新版本的浏览器属性定义及使用说明nav-left的属性指定使用箭头向左导航键导航。 默认值：auto继承：no版本：CSS3JavaScript 语法：object.style.navLeft="#div2"语法nav-left: auto|id|target-name|inherit;值说明auto浏览器将决定哪个元素导航id指定导航到该元素的IDtarget-name指定导航到目标帧inherit指定nav-left属性的值，应该从父元素继承本文参考CSS中文文档

本文参考CSS中文文档 CSS3 outline-offset 属性指定外边框边缘的轮廓15px： div { border:2px solid black; outline:2px solid red; outline-offset:15px;}浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 属性IEChromeFFsafariOpennav-down不兼容不兼容不兼容不兼容Supported in Opera 11.5-12.不兼容于更新版本的浏览器属性定义及使用说明outline-offset属性设置轮廓框架在 border 边缘外的偏移 Outlines在两个方面不同于边框： Outlines 不占用空间Outlines 可能非矩形默认值：0继承：no版本：CSS3JavaScript 语法：object.style.outlineOffset="15px"语法outline-offset: length|inherit:值描述length轮廓与边框边缘的距离。inherit规定应从父元素继承 outline-offset 属性的值。相关文章CSS3 教程: CSS3 用户界面本文参考CSS中文文档

今天的知识点 (2019.10.05) —— 第172天[html] HTML的注释有几种写法？有什么规范吗？[css] 你知道什么是流体排版吗？说说它的原理是什么？[js] ES5和ES6、ES7有什么区别？[软技能] 请解释下单线程与多线程之间的区别？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...

今天的知识点 (2019.10.04) —— 第171天[html] 怎样给radio分组呢？[css] 请说说你对vh、vw的理解以及它们的运用场景是什么？[js] 写一个根据xpath获取元素的方法[软技能] 浏览器本地存储和服务器端存储有区别呢？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...

本文参考 CSS中文文档 CSS 参考手册阿西河教程的 CSS 参考手册在所有主流浏览器中测试通过. CSS 属性"CSS" 列指示属性是在哪个 CSS 版本中定义的 (CSS1, CSS2, 或者 CSS3). 动画属性属性描述CSS@keyframes定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。3animation复合属性。检索或设置对象所应用的动画特效。3animation-name检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义3animation-duration检索或设置对象动画的持续时间3animation-timing-function检索或设置对象动画的过渡类型3animation-delay检索或设置对象动画的延迟时间3animation-iteration-count检索或设置对象动画的循环次数3animation-direction检索或设置对象动画在循环中是否反向运动3animation-play-state检索或设置对象动画的状态3背景属性属性描述CSSbackground复合属性。设置对象的背景特性。1background-attachment设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。1background-color设置或检索对象的背景颜色。1background-image设置或检索对象的背景图像。1background-position设置或检索对象的背景图像位置。必须先指定background-image属性。1background-repeat设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。1background-clip指定对象的背景图像向外裁剪的区域。3background-originS设置或检索对象的背景图像计算background-position时的参考原点(位置)。3background-size检索或设置对象的背景图像的尺寸大小。3边框(Border) 和 轮廓(Outline) 属性属性描述CSSborder复合属性。设置对象边框的特性。1border-bottom复合属性。设置对象底部边框的特性。1border-bottom-color设置或检索对象的底部边框颜色。1border-bottom-style设置或检索对象的底部边框样式。1border-bottom-width设置或检索对象的底部边框宽度。1border-color置或检索对象的边框颜色。1border-left复合属性。设置对象左边边框的特性。1border-left-color设置或检索对象的左边边框颜色。1border-left-style设置或检索对象的左边边框样式。1border-left-width设置或检索对象的左边边框宽度。1border-right复合属性。设置对象右边边框的特性。1border-right-color设置或检索对象的右边边框颜色。1border-right-style设置或检索对象的右边边框样式。1border-right-width设置或检索对象的右边边框宽度。1border-style设置或检索对象的边框样式。1border-top复合属性。设置对象顶部边框的特性。1border-top-color设置或检索对象的顶部边框颜色1border-top-style设置或检索对象的顶部边框样式。1border-top-width设置或检索对象的顶部边框宽度。1border-width设置或检索对象的边框宽度。1outline复合属性。设置或检索对象外的线条轮廓。2outline-color设置或检索对象外的线条轮廓的颜色。2outline-style设置或检索对象外的线条轮廓的样式。2outline-width设置或检索对象外的线条轮廓的宽度。2border-bottom-left-radius设置或检索对象的左下角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数3border-bottom-right-radius设置或检索对象的右下角圆角边框。3border-image设置或检索对象的边框样式使用图像来填充。3border-image-outset规定边框图像超过边框的量。3border-image-repeat规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。3border-image-slice规定图像边框的向内偏移。3border-image-source规定要使用的图像，代替 border-style 属性中设置的边框样式。3border-image-width规定图像边框的宽度。3border-radius设置或检索对象使用圆角边框。3border-top-left-radius定义左上角边框的形状。3border-top-right-radius定义右上角边框的形状。3box-decoration-break规定行内元素被折行3box-shadow向方框添加一个或多个阴影。3盒子(Box) 属性属性描述CSSoverflow-x如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。3overflow-y如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。3overflow-style规定溢出元素的首选滚动方法。3rotation围绕由 rotation-point 属性定义的点对元素进行旋转。3rotation-point定义距离上左边框边缘的偏移点。3颜色(Color) 属性属性描述CSScolor-profile允许使用源的颜色配置文件的默认以外的规范3opacity设置一个元素的透明度级别3rendering-intent允许超过默认颜色配置文件渲染意向的其他规范3内边距(Padding) 属性属性说明CSSpadding在一个声明中设置所有填充属性1padding-bottom设置元素的底填充1padding-left设置元素的左填充1padding-right设置元素的右填充1padding-top设置元素的顶部填充1媒体页面内容属性属性说明CSSbookmark-label指定书签的标签3bookmark-level指定了书签级别3bookmark-target指定了书签链接的目标3float-offset在相反的方向推动浮动元素，他们一直具有浮动3hyphenate-after指定一个断字的单词断字字符后的最少字符数3hyphenate-before指定一个断字的单词断字字符前的最少字符数3hyphenate-character指定了当一个断字发生时，要显示的字符串3hyphenate-lines表示连续断字的行在元素的最大数目3hyphenate-resource外部资源指定一个逗号分隔的列表，可以帮助确定浏览器的断字点3hyphens设置如何分割单词以改善该段的布局3image-resolution指定了正确的图像分辨率3marks将crop and/or cross标志添加到文档3string-set 3尺寸(Dimension) 属性属性描述CSSwidth设置元素的宽度1height设置元素的高度1max-height设置元素的最大高度2max-width设置元素的最大宽度2min-height设置元素的最小高度2min-width设置元素的最小宽度2弹性盒子模型（Flexible Box） 属性(新)属性说明CSSflex复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。3flex-grow设置或检索弹性盒的扩展比率。3flex-shrink设置或检索弹性盒的收缩比率。3flex-basis设置或检索弹性盒伸缩基准值。3flex-flow复合属性。设置或检索弹性盒模型对象的子元素排列方式。3flex-direction该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。3flex-wrap该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。3align-content在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。3align-items定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。3align-self定义flex子项单独在侧轴（纵轴）方向上的对齐方式。3justify-content设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。3order设置或检索弹性盒模型对象的子元素出现的順序。3弹性盒子模型（Flexible Box） 属性(旧)属性说明CSSbox-align指定如何对齐一个框的子元素3box-direction指定在哪个方向，显示一个框的子元素3box-flex指定一个框的子元素是否是灵活的或固定的大小3box-flex-group指派灵活的元素到Flex组3box-lines每当它在父框的空间运行时，是否指定将再上一个新的行列3box-ordinal-group指定一个框的子元素的显示顺序3box-orient指定一个框的子元素是否在水平或垂直方向应铺设3box-pack指定横向盒在垂直框的水平位置和垂直位置3字体（Font） 属性属性说明CSSfont在一个声明中设置所有字体属性1font-family规定文本的字体系列1font-size规定文本的字体尺寸1font-style规定文本的字体样式1font-variant规定文本的字体样式1font-weight规定字体的粗细1@font-face一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体3font-size-adjust为元素规定 aspect 值3font-stretch收缩或拉伸当前的字体系列3内容生成属性(Generated Content Properties)属性说明CSScontent与 :before 以及 :after 伪元素配合使用，来插入生成内容2counter-increment递增或递减一个或多个计数器2counter-reset创建或重置一个或多个计数器2quotes设置嵌套引用的引号类型2crop允许replaced元素只是作为一个对象代替整个对象的矩形区域3move-toCauses an element to be removed from the flow and reinserted at a later point in the document3page-policy判定基于页面的给定元素的适用于计数器的字符串值3网格（Grid） 属性属性说明CSSgrid-columns指定在网格中每列的宽度3grid-rows指定在网格中每列的高度3超链接(Hyperlink) 属性属性说明CSStarget简写属性设置target-name, target-new,和target-position属性3target-name指定在何处打开链接（目标位置）3target-new指定是否有新的目标链接打开一个新窗口或在现有窗口打开新标签3target-position指定应该放置新的目标链接的位置3线框(Linebox) 属性属性说明CSSalignment-adjust允许更精确的元素的对齐方式3alignment-baseline其父级指定的内联级别的元素如何对齐3baseline-shift允许重新定位相对于dominant-baseline的dominant-baseline3dominant-baseline指定scaled-baseline-table3drop-initial-after-adjust设置下拉的主要连接点的初始对齐点3drop-initial-after-align校准行内的初始行的设置就是具有首字母的框使用初级连接点3drop-initial-before-adjust设置下拉的辅助连接点的初始对齐点3drop-initial-before-align校准行内的初始行的设置就是具有首字母的框使用辅助连接点3drop-initial-size控制局部的首字母下沉3drop-initial-value激活一个下拉式的初步效果3inline-box-align设置一个多行的内联块内的行具有前一个和后一个内联元素的对齐3line-stacking一个速记属性设置line-stacking-strategy, line-stacking-ruby,和line-stacking-shift属性3line-stacking-ruby设置包含Ruby注释元素的行对于块元素的堆叠方法3line-stacking-shift设置base-shift行中块元素包含元素的堆叠方法3line-stacking-strategy设置内部包含块元素的堆叠线框的堆叠方法3text-height行内框的文本内容区域设置block-progression维数3列表(List) 属性属性说明CSSlist-style在一个声明中设置所有的列表属性1list-style-image将图象设置为列表项标记1list-style-position设置列表项标记的放置位置1list-style-type设置列表项标记的类型1外边距(Margin) 属性属性说明CSSmargin在一个声明中设置所有外边距属性1margin-bottom设置元素的下外边距1margin-left设置元素的左外边距1margin-right设置元素的右外边距1margin-top设置元素的上外边距1字幕(Marquee) 属性属性说明CSSmarquee-direction设置内容移动的方向3marquee-play-count设置内容移动多少次3marquee-speed设置内容滚动的速度有多快3marquee-style设置内容移动的样式3多列(Multi-column) 属性属性说明CSScolumn-count指定元素应该分为的列数3column-fill指定如何填充列3column-gap指定列之间的差距3column-rule对于设置所有column-rule-*属性的简写属性3column-rule-color指定列之间的颜色规则3column-rule-style指定列之间的样式规则3column-rule-width指定列之间的宽度规则3column-span指定元素应该跨越多少列3column-width指定列的宽度3columns缩写属性设置列宽和列数3页面媒体(Paged Media) 属性属性说明CSSfit如果其宽度和高度属性都不是auto给出一个提示，如何大规模替换元素3fit-position判定方框内对象的对齐方式3image-orientation指定用户代理适用于图像中的向右或顺时针方向的旋转3page指定一个元素应显示的页面的特定类型3size指定含有BOX的页面内容的大小和方位3定位（Positioning） 属性属性说明CSSbottom设置定位元素下外边距边界与其包含块下边界之间的偏移2clear规定元素的哪一侧不允许其他浮动元素1clip剪裁绝对定位元素2cursor规定要显示的光标的类型（形状）2display规定元素应该生成的框的类型1float规定框是否应该浮动1left设置定位元素左外边距边界与其包含块左边界之间的偏移2overflow规定当内容溢出元素框时发生的事情2position规定元素的定位类型2right设置定位元素右外边距边界与其包含块右边界之间的偏移2top设置定位元素的上外边距边界与其包含块上边界之间的偏移2visibility规定元素是否可见2z-index设置元素的堆叠顺序2分页（Print） 属性属性说明CSSorphans设置当元素内部发生分页时必须在页面底部保留的最少行数2page-break-after设置元素后的分页行为2page-break-before设置元素前的分页行为2page-break-inside设置元素内部的分页行为2widows设置当元素内部发生分页时必须在页面顶部保留的最少行数2Ruby 属性属性说明CSSruby-align控制Ruby文本和Ruby基础内容相对彼此的文本对齐方式3ruby-overhang当Ruby文本超过Ruby的基础宽，确定ruby文本是否允许局部悬置任意相邻的文本，除了自己的基础3ruby-position它的base控制Ruby文本的位置3ruby-span控制annotation 元素的跨越行为3语音（Speech） 属性属性说明CSSmark缩写属性设置mark-before和mark-after属性3mark-after允许命名的标记连接到音频流3mark-before允许命名的标记连接到音频流3phonemes指定包含文本的相应元素中的一个音标发音3rest一个缩写属性设置rest-before和rest-after属性3rest-after一个元素的内容讲完之后，指定要休息一下或遵守韵律边界3rest-before一个元素的内容讲完之前，指定要休息一下或遵守韵律边界3voice-balance指定了左，右声道之间的平衡3voice-duration指定应采取呈现所选元素的内容的长度3voice-pitch指定平均说话的声音的音调（频率）3voice-pitch-range指定平均间距的变化3voice-rate控制语速3voice-stress指示着重力度3voice-volume语音合成是指波形输出幅度3表格（Table） 属性属性说明CSSborder-collapse规定是否合并表格边框2border-spacing规定相邻单元格边框之间的距离2caption-side规定表格标题的位置2empty-cells规定是否显示表格中的空单元格上的边框和背景2table-layout设置用于表格的布局算法2文本（Text） 属性属性说明CSScolor设置文本的颜色1direction规定文本的方向 / 书写方向2letter-spacing设置字符间距1line-height设置行高1text-align规定文本的水平对齐方式1text-decoration规定添加到文本的装饰效果1text-indent规定文本块首行的缩进1text-transform控制文本的大小写1unicode-bidi 2vertical-align设置元素的垂直对齐方式1white-space设置怎样给一元素控件留白1word-spacing设置单词间距1text-emphasis向元素的文本应用重点标记以及重点标记的前景色。1hanging-punctuation指定一个标点符号是否可能超出行框3punctuation-trim指定一个标点符号是否要去掉3text-align-last当 text-align 设置为 justify 时，最后一行的对齐方式。3text-justify当 text-align 设置为 justify 时指定分散对齐的方式。3text-outline设置文字的轮廓。3text-overflow指定当文本溢出包含的元素，应该发生什么3text-shadow为文本添加阴影3text-wrap指定文本换行规则3word-break指定非CJK文字的断行规则3word-wrap设置浏览器是否对过长的单词进行换行。32D/3D 转换属性属性说明CSStransform适用于2D或3D转换的元素3transform-origin允许您更改转化元素位置3transform-style3D空间中的指定如何嵌套元素3perspective指定3D元素是如何查看透视图3perspective-origin指定3D元素底部位置3backface-visibility定义一个元素是否应该是可见的，不对着屏幕时3过渡（Transition） 属性属性说明CSStransition此属性是 transition-property、transition-duration、transition-timing-function、transition-delay 的简写形式。3transition-property设置用来进行过渡的 CSS 属性。3transition-duration设置过渡进行的时间长度。3transition-timing-function设置过渡进行的时序函数。3transition-delay指定过渡开始的时间。3用户外观(User-interface) 属性属性说明CSSappearance定义元素的外观样式3box-sizing允许您为了适应区域以某种方式定义某些元素3icon为元素指定图标3nav-down指定用户按向下键时向下导航的位置3nav-index指定导航（tab）顺序。3nav-left指定用户按向左键时向左导航的位置3nav-right指定用户按向右键时向左导航的位置3nav-up指定用户按向上键时向上导航的位置a3outline-offset设置轮廓框架在 border 边缘外的偏移3resize定义元素是否可以改变大小3

内容来自《CSS选择器世界》 css选择符辨析(空格) 后代 选择器优先级相同，后来居上document.querySelector('#myId').querySelectorAll(':scope div div')> 子 主要目的：避免冲突场景：状态类名控制、标签受限、层级位置与动态判断+ 相邻 为兼容IE8实现:first-child~ 随后 随前实现：视觉在前，dom在后|| 列 跨列td选择选择器模式amcss [am-button~="large"]{}正则:开头 [attr^="val"]; 结束 [attr$="val"]; 包含 [attr*="val"] 忽略大小写 [attr~="val" i]搜索过滤css选择器最佳实践小写、短命名，同一前缀组合‘-’命名＜5;面向属性、语义(html标签、属性、伪类)的命名不要驼峰、id、嵌套、标签、*选择器状态类名：.active自身无样式样式类型：重置、基础、交互变化/* 网站变量 */:root{--base-color:#4c5161;}/* 样式重置 */body,p,dd,dl,h1,...,ol,ul{margin:0}/* 通用结构 */.cs-header{}.cs-main{}.cs-footer{}/* 组件样式 */.cs-icon{}.cs-button{}.cs-dialog{}/* 模块样式 */.cs-module-header{}.cs-module-title{}.cs-module-x{}/* 业务样式 */.cs-some-.../* css样式库 */.dn{display:none}.db{display:block}.dib{display:inline-block}.fl{float:left}伪类用户行为 :hover 不适用移动端；增加延时优化体验；:active 支持任意元素;数据上报;样式技巧：box-shadow,linear-gradient,outline;:focus 非disabled表单元素，href的<a>,<area>,contenteditable的普通元素;鼠标经过行为的键盘访问:focus-within:在担负起元素或是任意子元素聚焦时；下拉列表；:focus-visible:键盘访问的聚焦:focus:not(:focus-visible){outline:0}URL定位 :link和:visited：和:hover,:active优先级：LVHA:any-link::link对已访问的无效，只作用于<a>:target 锚点；场景：展开收起，选项卡:target-within target或后代元素，目前暂不支持输入 :enabled和:disabled chrome下enable影响a,ie下fieldset不支持，contenteditable="true"不匹配:read-only和:read-write:readonly可被表单提交，disabled不能；:placeholder-shown 场景：meterial 风格；空值判断；:default selected checked必须为true 场景：标记支付方式”推荐“:checked 只能表单,而[checked]任意，变化并非实时的；阅读更多；选项卡；单复选框，开关；:indeterminate checkbox.indeterminate=true;单选所有name的都没选中时匹配，没有name没选中也匹配；未选中提示文案；输入值验证 :valid和invalid (:user-invalid :blank 尚未支持):in-range和:out-of-range:required和:optional:user-invalid和:blank树结构 :root 文档根元素，xhtml,svg。Shadow DOM不行。root负责css变量，html负责样式:empty 可有注释before after，不能有空格换行。场景：隐藏空元素，字段缺失提示子索引 :first-child:last-child:only-child 没有任何兄弟元素:nth-child() 只适用于内容动态的，支持 odd,even,An+B;:nth-last-child() 动态列表数量匹配（聊天群头像）li:only-child{} li:first-child:nth-last-child(2){}匹配类型 ...

今天的知识点 (2019.10.02) —— 第169天[html] 什么是Data URI？[css] 你了解css3的currentColor吗？举例说明它的作用是什么？[js] 说说你对ArrayBuffer的理解！它和Array有什么区别？[软技能] 你有做过直播相关开发吗？知道它的原理吗？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...

今天的知识点 (2019.10.01) —— 第168天[html] 你知道有哪些常见的视频（音频）编码格式和视频（音频）格式吗？[css] 怎么去掉点击a链接或者图片出现的边框？[js] 如何解决在手机上长时间点击会选中图片？[软技能] 写js代码时你喜欢哪种命名方式？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...

本文《php 上传图片:php上传图片代码（同时图片保存到数据库）》完美解决：上传图片代码（同时图片保存到数据库教程）/*下面提供的php上传图片代码是一款利用php copy来上传文件的，他不但可以把图片上传到服务器，同时还把图片的地址保存到了mysql教程数据库里面哦。*/ // 连接数据库$conn = mysql_connect("localhost", "phpdb", "phpdb");mysql_select_db("test",$conn);?><?// 取得网页的参数$id=$_post['id']; // 判断该用户名是否已经存在$checksql="select * from image where id='$id'";$check_re=mysql_query($checksql,$conn);$num=mysql_num_rows($check_re);if($num!=0){ echo "<table width='100%' align=center><tr><td align=center>"; echo "该用户名已经存在，请选择另一个"; echo "<font color=red>上传失败！</font><br><a href='网页特效:history.back(-1)'>返回</a>";echo "</td></tr></table>";exit();} 本文php 上传图片:php上传图片代码（同时图片保存到数据库）来源于zzarea.com // 方法二：只保存文件名，// 保存文件名时，文件在php.ini配置文件中设置的upload临时目录中，也就是upload_tmp_dir 参数中 if ($photo<>""){ if (($photo_type== "image/pjpeg")or($photo_type == "image/gif")){ // c:winnttemp 使php.ini配置文件中设置的upload文件的临时目录 $photodir="c:winnttemp/"; if(!(file_exists($photo_name))){ // 拷贝该图片文件到设定的上传文件临时目录中 copy($photo,$photodir.$photo_name);} } else{ echo "<script language=javascript>alert('上传照片只能是jpg或者gif！');history.go(-1)</script><br>";echo "或者"; echo "文件名已经存在，请为图片改一个文件名"; exit;}}else{ $photo_name="";}$sql="insert into image (id, photo) values('$id', '$photo_name')"; ...

在前端项目开发过程中，总是会引入一些UI框架，已为方便自己的使用，很多大公司都有自己的一套UI框架，下面就是最近经常使用并且很流行的UI框架。 一.Mint UI Mint UI是 饿了么团队开发基于vue .js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。官网：https://mint-ui.github.io/#!/...Github: https://github.com/ElemeFE/mi... 二.WeUIWeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。 官网地址：https://weui.io/Github: https://github.com/weui/weui.git 三.cube-ui cube-ui 是滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。 官网地址：https://didi.github.io/cube-u...Github: https://github.com/didi/cube-ui/ 四.iView UI iview ui是一个强大的ui库基于vue，有很多实用的基础组件比elementui的组件更丰富，主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发，支持 ES2015 高质量、功能丰富 友好的 API ，自由灵活地使用空间。 官网地址：https://www.iviewui.comGithub: https://github.com/TalkingDat... 五.layui layui是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。官网地址:https://www.layui.comGithub: https://github.com/sentsin/la... 六. ElementUI Element是饿了么前端开源维护的Vue UI组件库,组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。 主要用于开发PC端的页面，是一个质量比较高的Vue UI组件库。官网地址:http://element-cn.eleme.io/#/...Github: https://github.com/ElementUI/... ...

1 概述1.1 前言使用一个或多个图像相关的CSS属性（background-blend-mode, mix-blend-mode, or filter）可以实现许多特殊的图片显示效果。本文转载自Bennett Feely的个人网站，文中共列举了20种图片显示效果。 详细代码及英文原文请访问Bennett Feely的主页。 2 效果列表2.1 铅笔画效果效果示例 SCSS代码.pencil-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: invert(1)) and (background-blend-mode: difference) { background-image: $url, $url; background-blend-mode: difference; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(2) invert(1) grayscale(1); box-shadow: inset 0 0 0 1px black; }}查看示例程序 2.2 水彩效果效果示例 SCSS代码.watercolor-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: blur(2px)) and (mix-blend-mode: multiply) { position: relative; overflow: hidden; &:before, &:after { display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; } &:before { background-image: $url, $url; background-blend-mode: difference; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(2) invert(1) grayscale(1); box-shadow: inset 0 0 0 1px black; } &:after { background-image: $url; background-position: center; mix-blend-mode: multiply; filter: brightness(1.3) blur(2px) contrast(2); } }}查看示例程序 ...

WEB前端开发是目前最火的行业之一，竞争很大，工资很高，未来发展也极好。 我做WEB开发有很长一段时间，现在经常看见大家在留言问我想转行学习WEB前端但是不知道是选择自学，还是选择培训。 今天根据我对于这行业的了解，给大家详细对比一下这两个选择的优势和劣势。 如果我解释的大家还是不懂可以直接私聊我。 希望可以帮助零基础入门的你少走弯路。 个人经历： 我学前端并不是培训的，因为我那个时候学开发还是比较早的，WEB这块我做了挺多年，在后端JAVA开发也做过挺久，现在是做项目经理。我最开始也是从大一开始自学的，毕竟大学里学的还是太皮毛了，那个时候对做网页比较有兴趣，所以我还是比较相信兴趣是最好的老师这句话的。 那个时候在网上找了一些视频教程学着也是非常痛苦，自己也看了一些书，像《javascript权威指南》（犀牛书）这些书，但是作用都不是很大。所以我在这里不建议大家初学入门前端去看书，还是建议当你学完了一部分基础之后，你再看书温习，效果会更好，这样的效果是我实践出来的，仅代表个人建议。直接完全看书学的后果可能是看了觉得能看懂，但是自己动起手来，啥也写不出来。 关于教程视频，不在于多，越多越是不看的，这也是我个人总结出来的，我还是很少见到自己完全视频教程学习能自学会前端开发的，尤其现在框架越来越难，还不断更新，光看视频还是比较难学好前端的，很多代码上的东西如果没有人告诉你，可能你连空行都不会，代码写的一团糟，最基本的达不到，更不要说找到工作了。 我之前在上市公司做了5年开发，现在做一个外包公司的项目经理。 我个人建议： 对于培训还是自学，如果你条件还可以，负担不是那么大，能培训还是培训的，培训一定会比你自学的好，因为培训有老师带你，你肯定会进步快，学习编程最好还是有领路人，没有那么多天才能自学成功，如果培训都很难学好，那么自学一定学不好。不过目前的培训费用都在18000以上，这还只是培训费而已，加上一些其他的东西，四个月时间要小三万吧！建议可以选择线上辅导学习，这样性价比会更高一些。 如果条件不允许，也可以选择自学，自学挺难的，但是如果你韧性强，自学也可以找到工作，但是你需要有一个指导你的人，从比例来看会很低，其实无论在哪里学习都是一样的，重在内心怎么看待你学习前端这个事情。 如果你选择培训建议如下： 如今前端市场竞争很大，各个企业争先恐后的在重金抓有能力的人，也就是我们常说的项目经验，我们这个行业别的要求不高，就是做项目的能力，到了公司是否可以干活，能干活完成任务怎么样都可以。但是目前培训的市场学费都在18000+以上，加上四个月的吃住行，至少也要30000块钱，这笔费用挺多的。最重要的还是时间问题，我学完编程就学了2年，怎么可能用四个月时间学的很好，除非很聪明的人，我个人觉得目前学前端想要找工作，至少要学习个半年的时间，身边也有不少在培训的时候发生的一些事情，当然有好的结果，也有很多不好的结果，不做评价，如果想去培训的朋友，建议慎重选择，想清楚是不是可以很努力去学，毕竟师傅领进门修行还是靠个人。 如果你选择自学建议如下： 1.了解如今的市场行情，就是企业需要什么样的人才，了解清楚企业技术需求，这点很重要。 2.有一套系统的学习方案，学习不是瞎学的，是有节奏感的，每天看多少视频，不是说看完了就完了，在很多人的实践中，看完视频一点用没有用。一天用多少时间学前端，自己规划好，每天做什么案例都是非常重要的。 合理的学习路线，我这里也给大家一些建议： 基础学习：网页布局基础：HTML+CSS+DIV盒子模型+前端开发基础：javascript语法基础+javascript面试对象+DOM操作+javascript插件学习+javascript类库（jquery为例）+AJAX+代码性能优化 进阶学习:H5标签+CSS3动画+2D/3D转换应用+Canvas+SVG+本地存储（WEBsql）+移动端WEBAPP开发+移动端框架学习 框架学习：Vue+Angular+React+Bootstrap+node 最好可以有人指路： 有人指路，很多问题是我们刚刚开始自己不可能解决的，除非那个是天才，可能一个小问题，我们一天都想不明白，但是别人的一句话可能就懂了，这个就是经验。 这些就是我做前端那么多年，给想学习前端小伙伴们的一些建议，希望可以帮助大家。 如果对于WEB前端开发这个行业的其他相关知识还是不是特别了解，可以随时来咨询我，学习路线，学习建议，学习方法都可以随时私聊来问我，希望可以帮助大家少走弯路。 需要相关前端学习资料私我呀，私我回复：“前端资料”，即可获取相关学习资料哦 。 原作者：WEB开发李家靖原文链接：https://www.jianshu.com/p/f42...

线上体验地址https://jsfiddle.net/z13wtr0q/ 先说优缺点，毕竟骨架屏实现的方案有很多种 优点简单，不需要工程，不用puppeteer生成骨架dom，也不需要二次开发维护定制程度高，想怎么搞就怎么搞不臃肿，只给你想要的缺点自动化程度低，需要在骨架dom上手动添加类协同要求高，不像工程化能通过工程去约束思路通过伪元素实现骨架样式，通过操作样式实现骨架和页面的动态切换 实现css部分(scss写法)通过after伪元素生成骨架样式，并通过absolute覆盖到实际元素上 .skt-loading { pointer-events: none; /* 加载中阻止事件 */ .skeleton { position: relative; overflow: hidden; border: none !important; border-radius: 5px; background-color: transparent !important; background-image: none !important; &::after { content: ''; position: absolute; left: 0; top: 0; z-index: 9; width: 100%; height: 100%; background-color: #EBF1F8; display: block; } /* 下面这部分都是自定义的，看需求修改 */ &:not(.not-round)::after { border-radius: 4px; } &:not(.not-before)::before { position: absolute; top: 0; width: 30%; height: 100%; content: ""; background: linear-gradient(to right,rgba(255,255,255,0) 0, rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%); transform: skewX(-45deg); z-index: 99; animation: skeleton-ani 1s ease infinite; display: block; } &.badge { &::after { background-color: #F8FAFC; } } } } @keyframes skeleton-ani { /* 骨架屏动画 */ from { left: -100%; } to { left: 150%; } }html部分只需要在你认为合理的骨架粒度元素上添加skeleton类即可 ...

主要介绍 useState useEffect useReducer useContext 用法 你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？——拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。 你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？——拥有了Hooks，生命周期钩子函数可以先丢一边了。 你在还在为组件中的this指向而晕头转向吗？——既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对this。 一个最简单的Hooks 首先让我们看一下一个简单的有状态组件： image 我们再来看一下使用hooks后的版本： 是不是简单多了！可以看到， Example变成了一个函数，但这个函数却有自己的状态（count），同时它还可以更新自己的状态（setCount）。这个函数之所以这么了不得，就是因为它注入了一个hook-- useState，就是这个hook让我们的函数变成了一个有状态的函数。 除了 useState这个hook外，还有很多别的hook，比如 useEffect提供了类似于 componentDidMount等生命周期钩子的功能， useContext提供了上下文（context）的功能等等。 Hooks本质上就是一类特殊的函数，它们可以为你的函数型组件（function component）注入一些特殊的功能。咦？这听起来有点像被诟病的Mixins啊？难道是Mixins要在react中死灰复燃了吗？当然不会了，等会我们再来谈两者的区别。总而言之，这些hooks的目标就是让你不再写class，让function一统江湖。 React为什么要搞一个Hooks？ 想要复用一个有状态的组件太麻烦了！ 我们都知道react都核心思想就是，将一个页面拆成一堆独立的，可复用的组件，并且用自上而下的单向数据流的形式将这些组件串联起来。但假如你在大型的工作项目中用react，你会发现你的项目中实际上很多react组件冗长且难以复用。尤其是那些写成class的组件，它们本身包含了状态（state），所以复用这类组件就变得很麻烦。 那之前，官方推荐怎么解决这个问题呢？答案是：渲染属性（Render Props）和高阶组件（Higher-Order Components）。我们可以稍微跑下题简单看一下这两种模式。 渲染属性指的是使用一个值为函数的prop来传递需要动态渲染的nodes或组件。如下面的代码可以看到我们的 DataProvider组件包含了所有跟状态相关的代码，而 Cat组件则可以是一个单纯的展示型组件，这样一来 DataProvider就可以单独复用了。 虽然这个模式叫Render Props，但不是说非用一个叫render的props不可，习惯上大家更常写成下面这种： 高阶组件这个概念就更好理解了，说白了就是一个函数接受一个组件作为参数，经过一系列加工后，最后返回一个新的组件。看下面的代码示例， withUser函数就是一个高阶组件，它返回了一个新的组件，这个组件具有了它提供的获取用户信息的功能。 生命周期钩子函数里的逻辑太乱了吧！ 我们通常希望一个函数只做一件事情，但我们的生命周期钩子函数里通常同时做了很多事情。比如我们需要在 componentDidMount中发起ajax请求获取数据，绑定一些事件监听等等。同时，有时候我们还需要在 componentDidUpdate做一遍同样的事情。当项目变复杂后，这一块的代码也变得不那么直观。 classes真的太让人困惑了！ 我们用class来创建react组件时，还有一件很麻烦的事情，就是this的指向问题。为了保证this的指向正确，我们要经常写这样的代码： this.handleClick=this.handleClick.bind(this)，或者是这样的代码： <buttononClick={()=>this.handleClick(e)}>。一旦我们不小心忘了绑定this，各种bug就随之而来，很麻烦。 还有一件让我很苦恼的事情。我在之前的react系列文章当中曾经说过，尽可能把你的组件写成无状态组件的形式，因为它们更方便复用，可独立测试。然而很多时候，我们用function写了一个简洁完美的无状态组件，后来因为需求变动这个组件必须得有自己的state，我们又得很麻烦的把function改成class。 在这样的背景下，Hooks便横空出世了！ 什么是State Hooks？ 回到一开始我们用的例子，我们分解来看到底state hooks做了什么： 声明一个状态变量 useState是react自带的一个hook函数，它的作用就是用来声明状态变量。 useState这个函数接收的参数是我们的状态初始值（initial state），它返回了一个数组，这个数组的第 [0]项是当前当前的状态值，第 [1]项是可以改变状态值的方法函数。 所以我们做的事情其实就是，声明了一个状态变量count，把它的初始值设为0，同时提供了一个可以更改count的函数setCount。 上面这种表达形式，是借用了es6的数组解构（array destructuring），它可以让我们的代码看起来更简洁。不清楚这种用法的可以先去看下我的这篇文章：30分钟掌握ES6/ES2015核心内容（上）。 ...

原文：https://www.smashingmagazine....译者：前端小智为了保证的可读性，本文采用意译而非直译。 为了回馈读者，《大迁世界》不定期举行(每个月一到三次)，现金抽奖活动，保底200，外加用户赞赏，希望你能成为大迁世界的小锦鲤，快来试试吧当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子内容中推开。 CSS1中描述了 margin-top、margin-right、margin-bottom和margin-left属性，以及一次设置所有四个属性的简写 margin。 margin看起来是一个相当简单的事情，但是，在本文中，咱们将看一些在使用margin一些让人迷惑有有趣的事情。 特别是，margin之间如何相互作用，以及 margin 重叠效果。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ CSS 盒模型CSS 盒模型指的是一个盒子的各个部分——content、padding、border和margin,它们各自之前是如何布局及相互作用的， 如下所示： 盒子的的四个margin属性和maring缩写都在CSS1中定义。 CSS2.1规范有一个演示盒模型的插图，还定义了用来描述各种盒子的术语，其中包括 content box、填padding box、border box和 margin box。 现在有一个 Level 3 Box Model specification 的草案。这个规范引用了CSS2作为盒模型和margin的定义，因此我们将在本文的大部分内容中使用CSS2定义。 margin 重叠CSS1 规范定义了margin，也定义了垂直 margin 重叠。如果考虑到在早期，CSS被用作文档格式语言，那么 margin 重叠是有意义的。 margin 重叠意味着，当一个有底部margin的标题后面跟着一个有顶部 margin 的段落时，它们之间就不会出现较大的空白。 当两个 margin 发生重叠时，它们将组合在一起，两个元素之间的空间取较大的一个。 较小的 margin 在较大的里面。 在以下情况下，margin 会重叠： 相邻的兄弟姐妹完全空盒子父元素和第一个或最后一个子元素依次来看看这些场景。 相邻的兄弟姐妹对 margin 重叠的最初描述是演示相邻兄弟姐妹之间的 margin 是如何重叠的。除了下面提到的情况之外，如果有两个元素在正常流中依次显示，那么第一个元素的底部 margin 将与下面元素的顶部 margin 一起重叠。 在下面示例中，有三个div元素。第一个 div 的顶部和底部的margin都是50px。第二个 div 的顶部和底部 margin 都是20px。第三个 div 的顶部和底部 margin 都是3em。前两个元素之间的 margin 是50px，因为较小的顶部 margin 与较大的底部 margin 相结合。第二个元素与第三个元素之间的 margin 是 3em，因为3em大于第二个元素底部margin 20px。 ...

今天的知识点 (2019.09.11) —— 第148天[html] input的onblur和onchange事件区别是什么？[css] 什么是脱离文档流？有什么办法可以让元素脱离标准的文档流？[js] 请使用原生的js实现斐波那契数列[软技能] 你知道什么是AST吗？说说你对AST的理解，它的运用场景有哪些？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...

前情回顾一看就懂之webpack基础配置一看就懂之webpack高级配置与优化 一、简介本文主要讲述的是webpack的工作原理，及其打包流程，一步步分析其打包过程，然后模拟实现一个简单的webpack，主要是为了更深刻地了解其打包流程，为了充分体现其山寨的意义，故名称定为web-pack。二、webpack的一些特点webpack的配置文件是一个.js文件，其采用的是node语法，主要是导出一个配置对象，并且其采用commonjs2规范进行导出，即以module.exports={}的方式导出配置对象，之所以采用这种方式是为了方便解析配置文件对象，webpack会找到配置文件然后以require的方式即可读取到配置文件对象。webpack中所有的资源都可以通过require的方式引入，比如require一张图片，require一个css文件、一个scss文件等。webpack中的loader是一个函数，主要为了实现源码的转换，所以loader函数会以源码作为参数，比如，将ES6转换为ES5，将less转换为css，然后再将css转换为js，以便能嵌入到html文件中，plugin是一个类，类中有一个apply()方法，主要用于Plugin的安装，可以在其中监听一些来自编译器发出的事件，在合适的时机做一些事情。三、webpack打包原理解析webpack通过自定义了一个可以在node和浏览器环境都能执行__webpack_require__函数来模拟Node.js中的require语句，将源码中的所有require语句替换为__webpack_require__，同时从入口文件开始遍历查找入口文件依赖，并且将入口文件及其依赖文件的路径和对应源码映射到一个modules对象上，当__webpack_require__执行的时候，首先传入的是入口文件的id，就会从这个modules对象上去取源码并执行，由于源码中的require语句都被替换为了__webpack_require__函数，所以每当遇到__webpack_require__函数的时候都会从modules对象上获取到对应的源码并执行，从而实现模块的打包并且保证源码执行顺序不变。四、webpack打包流程分析webpack启动文件: webpack首先会找到项目中的webpack.config.js配置文件，并以require(configPath)的方式，获取到整个config配置对象，接着创建webpack的编译器对象，并且将获取到的config对象作为参数传入编译器对象中，即在创建Compiler对象的时候将config对象作为参数传入Compiler类的构造函数中，编译器创建完成后调用其run()方法执行编译。编译器构造函数: 编译器构造函数要做的事：创建编译器的时候，会将config对象传入编译器的构造函数内，所以要将config对象进行保存，然后还需要保存两个特别重要的数据:一个是入口文件的id，即入口文件相对于根目录的相对路径，因为webpack打包输出的文件内是一个匿名自执行函数，其执行的时候，首先是从入口文件开始的，会调用__webpack_require__(entryId)这个函数，所以需要告诉webpack入口文件的路径。另一个是modules对象，对象的属性为入口文件及其所有依赖文件相对于根目录的相对路径，因为一个模块被__webpack_require__(某个模块的相对路径)的时候，webpack会根据这个相对路径从modules对象中获取对应的源码并执行，对象的属性值为一个函数，函数内容为当前模块的eval(源码)。总之，modules对象保存的就是入口文件及其依赖模块的路径和源码对应关系，webpack打包输出文件bundle.js执行的时候就会执行匿名自执行函数中的__webpack_require__(entryId)，从modules对象中找到入口文件对应的源码执行，执行入口文件的时候，发现其依赖，又继续执行__webpack_require__(dependId)，再从modules对象中获取dependId的源码执行，直到全部依赖都执行完成。 编译器构造函数中还有一个非常重要的事情要处理，那就是安装插件，即遍历配置文件中配置的plugins插件数组，然后调用插件对象的apply()方法，apply()方法会被传入compiler编译器对象，可以通过传入的compiler编译器对象进行监听编译器发射出来的事件，插件就可以选择在特定的时机完成一些事情。编译器run: 编译器的run()方法内主要就是: buildModule和emitFile。而buildModule要做的就是传入入口文件的绝对路径，然后根据入口文件路径获取到入口文件的源码内容，然后对源码进行解析。其中获取源码过程分为两步: 首先直接读出文件中的源码内容，然后根据配置的loader进行匹配，匹配成功后交给对应的loader函数进行处理，loader处理完成后再返回最终处理过的源码。源码的解析，主要是: 将由loader处理过的源码内容转换为AST抽象语法树，然后遍历AST抽象语法树，找到源码中的require语句，并替换成webpack自己的require方法，即webpack_require，同时将require()的路径替换为相对于根目录的相对路径，替换完成后重新生成替换后的源码内容，在遍历过程中找到该模块所有依赖，解析完成后返回替换后的源码和查找到的所以依赖，如果存在依赖则遍历依赖，让其依赖模块也执行一遍buildModule()，直到入口文件所有依赖都buildModule完成。入口文件及其依赖模块都build完成后，就可以emitFile了，首先读取输出模板文件，然后传入entryId和modules对象作为数据进行渲染，主要就是遍历modules对象生成webpack匿名自执行函数的参数对象，同时填入webpack匿名自执行函数执行后要执行的__webpack_require__(entryId)入口文件id。五、实现一个简单的webpack① 让web-pack命令可执行 为了让web-pack命令可执行，我们需要在其package.json中配置bin，属性名为命令名称即web-pack，属性值为web-pack启动文件，即"./bin/index.js"，这样web-pack安装之后或者执行npm link命令之后，就会在/usr/local/bin目录下生产对应的命令，使得web-pack命令可以在全局使用，如:// package.json { "bin": { "web-pack": "./bin/index.js" },}② 让web-pack启动文件可以在命令行直接执行 虽然web-pack命令可以执行了，但是该命令链接的文件是"./bin/index.js"，即输入web-pack命令执行的是"./bin/index.js"这个js文件，而js文件是无法直接在终端环境下执行的，所以需要告诉终端该文件的执行环境为node，所以需要在"./bin/index.js"文件开头添加上#! /usr/bin/env node，即用node环境执行"./bin/index.js"文件中的内容，如:// ./bin/index.js #! /usr/bin/env node③ 获取配置文件，创建编译器并执行 // ./bin/index.js #! /usr/bin/env nodeconst path = require("path");const config = require(path.resolve("webpack.config.js")); // 获取到项目根目录下的webpack.config.js的配置文件const Compiler = require("../lib/Compiler.js");// 引入Compiler编译器类const compiler = new Compiler(config); // 传入config配置对象并创建编译器对象compiler.run(); // 编译器对象调用run()方法执行④ 编译器构造函数 之前说过，编译器的构造函数主要就是保存config对象、保存入口模块id、保存所有模块依赖(路径和源码映射)、插件安装。// ../lib/Compiler.js class Compiler { constructor(config) { this.config = config; // ① 保存配置文件对象 this.entryId; // ② 保存入口模块id this.modules = {} // ③ 保存所有模块依赖(路径和源码映射) this.entry = config.entry; // 入口路径，即配置文件配置的入口文件的路径 this.root = process.cwd(); // 运行web-pack的工作路径，即要打包项目的根目录 // ④遍历配置的插件并安装 const plugins = this.config.plugins; // 获取使用的plugins if(Array.isArray(plugins)) { plugins.forEach((plugin) => { plugin.apply(this); // 调用plugin的apply()方法安装插件 }); } }}⑤ 编译器run()方法 ...

背景:之前做过一个支付宝小程序,领导要求用钉钉写个一样的出来.于是乎就开始了. 首先创建一个钉钉小程序 钉钉小程序有四个场景,我尝试了前三个场景,感觉就是发布的时候不太一样.最终选中了第三方个人应用开发.如果是公司开发的话记得找公司要管理账号.我是先自己创建了一个企业写的测试应用.下面的U_Gen价签小工具是我创建好的小程序. 下载小程序开发者工具,引入官网给的git上的代码.(我服务端和前端代码都下过,后面尝试了下,不能一起写.我这个项目需求也很简单不需要服务端做很多事,所以我就讲讲我主要写的前端页面吧.) 绑定小程序,修改页面小程序开发者工具里面可以开发很多版本的,你可以在这里选择你创建的小程序的类型.然后在旁边关联你创建好的小程序就可以了.我是写完了再截图的,所以目录东西可能有的多.给介绍一下,我引入了add-button.因为我要显示icon的,在这里写icon会方便一些.static文件夹下就是我的icon图标了.至于怎么导入icon图标我的文章里描述的很清楚了.不懂的可以再看一下这篇 引入阿里icon图标todos文件夹下就是我的页面样式,逻辑等了. 这里要连接后端接口的话一定要记得添加安全域名: 然后在js文件中去发请求 dd.showLoading()就是显示个loading出来.dd.httpRequest()就是发请求了.dd.alert()是弹框,里面的content是弹框内容,buttonText是弹框提示语. 修改主题色在app.acss里面.修改小程序标题在app.json里面,"pages"里面是一进页面加载的页面路径.如果你也引入了add-button的话记得在需要用的文件里导入,就像我这个todos.json里面导入的样子一样.add-button里面的样式和内容被我改了很多,我还是贴出来吧. 我的页面代码都是在todos里面.也一并附上主要就是axml里面的内容.其他的逻辑都是根据自己需求去写的.我的页面也只用到了钉钉的几个方法而已. 设置体验版,增加体验人员 再介绍下小程序开发者工具吧:1:可以更改机型,看样式的2:上传代码到钉钉开放平台的版本管理里面3:开启手机模拟器,右侧就会显示一个这样的模拟器出来4:修改样式的. 附上我的小程序效果图: 遇到的问题1:发请求参数一直不对,最后自己写了headers指定了格式,又加上了JSON.stringify转了一下才好.2:把服务端的方法用到了前端,我一直想在前端去生成签名,玩一下免登陆,获取个用户头像啥的.但是没成功.最后发现那些方法都是服务端的.前端用不了..我想应该不会有人跟我一样.. 但还是说一下..(其实签名我参数最后都写出来了的..应该是对的)3:icon加载比文字慢.我原来是写的button,然后写了个text把icon放到button旁边.但是加载特慢,扫描后回到页面图标就会消失一会儿.体验感很差,最后没办法,只能跟支付宝小程序写一样的,来个add-button.把icon放进add-button里面.然后在用到的todos文件里,引入add-button.让它先加载.就不会有这个问题了.4:如果有些问题网上你也没搜到答案,官网的api也没找到解决方法.可以去问人工服务.哈哈哈哈.我第一次问.还真的解决了问题的.就在钉钉开发平台的右下角,可以接入人工服务的.就是回的慢了点. 关于小程序,不管是微信的,还是支付宝的,还是钉钉的,我感觉都一样的.只是调用的方法名不一样而已.你会写了一个,其他的都是依葫芦画瓢而已.

1- 由于弹框比较长，所以弹出的时候前面的弹框内容需要滑动，但是背景需要禁止滚动 2-所以使用watch 监听，弹窗出现禁止滚动，弹框消失可以滚动 watch: {coachCard (newVal, oldVal) { if (newVal == true) { console.log('gaibian l '); let cssStr = "overflow-y: hidden; height: 100%;"; document.getElementsByTagName('html')[0].style.cssText = cssStr; document.body.style.cssText = cssStr; } else { let cssStr = "overflow-y: auto; height: auto;"; document.getElementsByTagName('html')[0].style.cssText = cssStr; document.body.style.cssText = cssStr; } // 下面需要这两行代码，兼容不同浏览器 document.body.scrollTop = this.pageScrollYoffset; window.scroll(0, this.pageScrollYoffset);}}, 贼长的弹框

一、游戏介绍龙纪链DGEra Chain（www.dgera.net）作为一个正规的3D区块链手游，集合了健康、娱乐、教育、收益为一体。龙纪链不仅仅是一个简单的游戏，它除了带给大家欢乐以外，还可以让玩家收获价值。在传统的游戏中只有少部分的高级玩家才能依靠卖装备、卖皮肤、卖号等方式进行赚钱。普通玩家想依靠游戏赚钱简直比登天还要难，但是区块链游戏不同，只要你找对了门路，躺着就能赚钱！那我们废话不多说，马上来了解下龙纪链这款火爆又刺激的游戏吧！图片描述 龙纪链是款全新上线的区块链赚钱软件，也可以说是首款获得知名金融公司领投的区块链3D互动游戏，游戏中的3D建模的卡通恐龙都十分逼真可爱！ 玩家通过ETH兑换龙晶购买创始龙，每只龙自身有一定的初始属性，玩家需要购买“龙晶”“肉”等道具进行创始龙培育，用户只需要培育它即可获得收益，每条龙都是有价格的，不同的龙根据稀有程度价值也并不一样!龙完全归用户所有，无法被复制或销毁，每只龙有独一无二的基因，决定其固有属性，成年龙的交配繁殖遵循生物界遗传变异规律，幼崽属性充满未知，同时也充满无限可能。图片描述 二、玩法解读1、创始龙创始龙需使用龙晶购买及升级，创始龙只在创始期发售，创始期后绝版。每个id限量购买一只，可注册多个id账号。龙的等级越高挖到龙币速率越快，收益越高。2、龙晶：1龙晶=0.01ETH。龙晶需使用ETH购买，只在创始期发售，创始期后绝版。龙晶可升级龙的等级。3、肉：130*肉=0.01ETH。肉需使用ETH购买，肉为龙补充挖矿体力，1块肉可挖矿1小时，体力不足挖矿停止。4、龙币DG：龙币发行价≈0.1CNY。龙币只能通过挖矿获得。升值空间大，创始期结束后将上线各大国际顶尖的主流交易所。5、龙盒：龙盒需使用ETH购买 初级龙盒：1个初级龙盒=0.03ETH，有几率获得10个龙晶。 中级龙盒：1个中级龙盒=0.08ETH，有几率获得30个龙晶。 高级龙盒：1个高级龙盒=0.20ETH，有几率获得100个龙晶。6、挖矿收益龙每日挖矿收益龙币，龙等级越高，挖矿收益越多，收益越多。 创始期结束时，平台根据ID持币数量发放持币奖励，持币总数越多奖励翻倍越高。创始期结束后，日挖矿收益翻倍。图片描述 龙纪链真正的做到了区块链游戏中的佼佼者。龙纪链的开发团队勇于创新、敢于突破，他们拥有多年游戏行业经验，又兼具区块链行业经历了解游戏市场、运营及产品现状，有效的将游戏与区块链技术融合。理所应当的成为了区块链游戏的“C”位王者。所以，如此好的躺赚机会，你不赶紧抓住机会！抓紧去下载吧。图片描述图片描述龙纪链官网：www.dgera.netTelegram群：https://t.me/DGEraChain币用群：https://0.plus/DGEraChain新手指南：https://dgera.zendesk.com/hc/... 进微信群加：xiyomi080 popipu000注册下载链接：https://front.dgera.net/regis...

问题描述：使用vue开发移动端页面时，提示如下错误，并且点击事件不触发，PC端正常[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. 解决：全局样式添加* {touch-action: pan-y;}， pan-y表示启用单指垂直平移手势(上下滑动事件)

慢慢整理、修改、丰富HTML相关1.HTML5的优缺点优点： 网络标准统一、HTML5本身是由W3C推荐出来的。多设备、跨平台即时更新。提高可用性和改进用户的友好体验；有几个新的标签，这将有助于开发人员定义重要的内容；可以给站点带来更多的多媒体元素(视频和音频)；可以很好的替代Flash和Silverlight；涉及到网站的抓取和索引的时候，对于SEO很友好；被大量应用于移动应用程序和游戏。缺点： 安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。完善性：许多特性各浏览器的支持程度也不一样。技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战性能：某些平台上的引擎问题导致HTML5性能低下。浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没2.HTML5的新特性HTML5新增了 27 个元素，废弃了 16 个元素 新特性： 语义：能够让你更恰当地描述你的内容是什么连通性：能够让你和服务器之间通过创新的新技术方法进行通信离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用设备访问 Device Access：能够处理各种输入和输出设备样式设计: 让作者们来创作更加复杂的主题3.HTML5元素根据现有的标准规范，把 HTML5的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。 结构性元素主要负责web上下文结构的定义 结构性元素用途section在 web 页面应用中，该元素也可以用于区域的章节描述。header页面主体上的头部， header 元素往往在一对 body 元素中。footer页面的底部（页脚），通常会标出网站的相关信息。nav专门用于菜单导航、链接导航的元素，是 navigator 的缩写。article用于表现一篇文章的主体内容，一般为文字集中显示的区域。块性元素主要完成web页面区域的划分，确保内容的有效分割 块级元素用途aside用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。figure是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。code表示一段代码块。dialog用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础 行内语义元素用途meter表示特定范围内的数值，可用于工资、数量、百分比等。time表示时间值。progress用来表示进度条，可通过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。video视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。audio音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。 交互性元素用途details用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来。datagrid用来控制客户端数据与显示，可以由动态脚本及时更新。menu主要用于交互菜单（曾被废弃又被重新启用的元素）。command用来处理命令按钮。4.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?（1）、Doctype声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。 ...

今天的知识点 (2019.09.10) —— 第147天[html] 本地存储的生命周期是什么？[css] 请问background-attachmentn属性有什么用途？[js] 阻止事件的默认行为有哪些？说说它们之间的区别是什么？[软技能] 前端的性能统计有哪些指标？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...

//rem适配处理//rem适配原理：改变了一个元素在不同设备上占据的css像素的个数 (function(){ var styleNode = document.createElement('style');//创建style var wh = document.documentElement.clientWidth/16;//获取屏幕窗口的宽度在除以16 styleNode.innerHTML = "html{font-size" + wh + "px!important}"; document.head.appendChild(styleNode); })()

*注：本文章是在工作过程中所接触的知识点的整理，涉及的东西比价杂乱，如有错误之处，欢迎纠错与指导

野子电竞数据官网改版https://www.xxe.io/全新登场数据分析1、数据分析是什么？百度百科给出的定义:2、数据分析划分3、数据分析作用3.1 现状分析3.2 原因分析3.3 预测分析4、数据分析基本步骤明确分析目的和思路数据采集数据处理数据分析数据展现报告撰写 写在前面的话：之前工作的岗位叫做数据分析工程师，主要做生产数据分析。然而由于身处液晶面板行业一家大型国企企业，很多工作内容，跟互联网行业有些出入。通过查看资料，整理了一下互联网行业针对数据分析师的定位描述，虽有些微出入，但叫做数据分析工程师也没有什么问题。大约我们差的东西，应该是时刻需要面对的压力，以及互联网行业压力下所具备的活力。1、数据分析是什么？百度百科给出的定义:数据分析是指用适当的统计分析方法对收集来的大量数据进行分析，提取有用信息和形成结论而对数据加以详细研究和概括总结的过程。这一过程也是质量管理体系的支持过程。在实用中，数据分析可帮助人们作出判断，以便采取适当行动。 2、数据分析划分数据分析可划分为：描述性数据分析、探索性数据分析、验证性数据分析。描述性数据分析属于初级数据分析，另两个属于高级数据分析。 其中探索性分析侧重于在数据之中发现新的特征，而验证性数据分析则侧重于验证已有假设的真伪证明。我们日常学习和工作中所涉及的数据分析主要是描述性数据分析。 3、数据分析作用数据分析是为了最大化地开发数据的功能，发挥数据的作用。把隐藏在一大批看似杂乱无章的数据背后的信息集中和提炼出来，总结出所研究对象的内在规律。商业领域中， 数据分析能够给帮助企业进行判断和决策，以便采取相应的策略与行动。数据分析在企业日常经营分析中主要有三大作用： 3.1 现状分析分析数据中隐藏的当前现状信息。比如告诉你企业目前运营情况，可以通过相关业务中各个指标的完成情况来进行判断等。 3.2 原因分析分析现状发生以及存在的原因。比如企业运营情况中比较好的方面，以及比较差的方面都是由哪些原因引起的，以指导做出决策，对相关策略进行调整和优化。 3.3 预测分析分析预测将来可能会发生什么。根据以往数据，对企业未来发展趋势做出预测，为制订企业运营目标及策略提供有效的参考与决策依据。一般通过专题分析来完成。 在以往的工作中，这些方面均有涉及。主要分析生产数据，和业务部门反馈沟通，以便其做出优化改善，以达到某些指标所制定的目标。 4、数据分析基本步骤这大概是一个方法论的问题。万事皆有套路，数据分析也是，大抵都是如下几个步骤：明确分析目的和思路数据采集数据处理数据分析数据展现报告撰写 明确分析目的和思路明确分析目的和思路，这是整个流程的指引方向的灯塔，是一路前行的信念。我为什么要做数据分析？我我要达到预期的什么效果？要怎么做？都应当做到胸中有丘壑。在明确了分析目的后，需要理清我们的思路，并搭建分析框架，把分析目的分解成若干个不同的分析要点，即如何具体开展数据分析，需要从哪几个角度进行分析，采用哪些分析指标。 数据采集数据采集是按照确定的数据分析框架，收集相关数据的过程，它为数据分析提供了素材和依据。根据不同的分析目的，有不同的数据来源。数据可以是直接可以获取的原始数据，也可以是经过加工后的数据。 数据处理数据处理是指对收集到的数据进行加工整理，形成适合数据分析的样式。数据处理主要包括数据清洗、数据转化、数据提取、数据计算等处理方法。一般拿到手的数据都需要进行一定的处理才能用于后续的数据分析工作。数据处理是数据分析的基础。 数据分析数据分析是指用适当的分析方法及工具，对处理过的数据进行分析，提取有价值的信息，形成有效结论的过程。数据挖掘其实是一种高级的数据分析方法， 就是从大量的数据中挖掘出有用的信息。数据挖掘侧重解决四类数据分析问题:分类、聚类、关联和预测，重点在寻找模式和规律。 数据分析与数据挖掘的本质是一样的，都是从数据里面发现关于业务的知识。 数据展现数据是通过表格和图形的方式来呈现的，我们常说用图表说话就是这个意思。常用的数据图表包括饼图、柱形图、条形图、折线图、散点图、雷达图等。数据展现可以通过各种工具来进行。比如Echarts，其他BI工具。当然Excel的图表工具也是很好的数据展现工具。 报告撰写数据分析报告其实是对整个数据分析过程的一个总结与呈现。通过报告，把数据分析的起因、过程、结果及建议完整地呈现出来，供决策者（领导）参考。

野子电竞数据官网改版https://www.xxe.io/ 全新登场1.通用型的数据分析入门思维，比如AARRR（海盗模型）获取用户–>提高活跃度–>提高留存率–>获取营收–>自传播 2.实现数据分析的流程深入业务–>构建指标体现–>事件设计–>数据采集–>业务目标–>数据分析–>验证迭代重点：1）构建指标体现；2）数据分析+验证迭代 3.关注的指标1）总体运营指标：1.1.活跃用户数、新增用户数1.2.总订单量、访问到下单转化率1.3.成交金额（GMV）、销售金额、客单价1.4.销售毛利、毛利率 2）流量指标：2.1.新增用户数、页面访问数2.2.用户获取成本2.3.跳出率、页面访问时长、人均页面访问数2.4.注册会员数、活跃会员数、活跃会员率、会员平均购买次数、会员留存率 3）销售指标：3.1.加入购物车次数、加入购物车买家数、加入购物车商品数、购物车支付转化率3.2.下单笔数、下单金额、下单买家数、浏览下单转化率3.3.支付金额、支付买家数、支付商品数、浏览-支付买家转化率、下单-支付买家转化率3.4.交易成功/失败订单数、交易成功/失败金额、交易成功/失败买家数、交易成功/失败商品数、退款订单数量、退款金额、退款率 4）客户价值指标：4.1.累积购买客户数、客单价4.2.新客户数量、新客户获取成本、新客户客单价4.3.消费频率、最近一次购买时间、消费金额、重复购买率 5）市场营销活动指标：5.1.新增访问人数、新增注册人数、总访问次数5.2.订单数量、下单转化率5.3.ROI(投资回报率) 4.如何分析1）渠道分析顺序：曝光–>点击–>下载–>注册–>付费核心数据是有效注册数，其次是付费用户数，最后是arpu值 2）用户运营：2.1.根据活跃度：新增活跃用户、活跃老用户、沉默用户、流失用户…2.2.根据商品偏好：美妆类、母婴类、零食类、电子产品类、书籍类…2.3.根据消费能力：普通会员、黄金会员、白金会员、钻石会员…2.4.根据消费频率：每周一次以上、每月1-2次、三个月2次…

emmm 名字瞎想的2333前言这是一个用来练习的css demo，如果有哪里写的不好，还请各位指正，一定虚心接受。嘻嘻 HTML布局 <div class="container"> <div class="loading"> <div class="eat"></div> <div class="load"></div> <div class="load"></div> <div class="load"></div> </div> </div>CSS 样式主要使用了动画效果，通过不断控制元素的角度位置实现一个类似于吃豆人一样的loading demo。 body { margin: 0; padding: 0; background: #fff; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loading { position: relative; width: 200px; height: 50px; display: flex; } .eat { position: relative; width: 50px; height: 50px; left: 0; color: #ff0000; animation: eat-animate 2.4s ease-in-out infinite; } @keyframes eat-animate { 100% { left: 150px; } } .eat::before { content: ''; position: absolute; width: 0; height: 0; width: 50px; height: 25px; top: 0; border-radius: 50px 50px 0 0; background: currentColor; transform: rotate(-30deg); animation: eat-top 2.4s ease-in-out infinite; } @keyframes eat-top { 20% { transform: rotate(-30deg); } 35% { transform: rotate(0deg); } 45% { transform: rotate(-30deg); } 60% { transform: rotate(0deg); } 70% { transform: rotate(-30deg); } 85% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } .eat::after { content: ''; position: absolute; width: 0; height: 0; width: 50px; height: 25px; bottom: 0; border-radius: 0 0 50px 50px; background: currentColor; transform: rotate(30deg); animation: eat-bottom 2.4s ease-in-out infinite; } @keyframes eat-bottom { 20% { transform: rotate(30deg); } 35% { transform: rotate(0deg); } 45% { transform: rotate(30deg); } 60% { transform: rotate(0deg); } 70% { transform: rotate(30deg); } 85% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } .load { position: relative; width:30px; height: 30px; margin: 10px; color: #e47272; border-radius: 50%; background: currentColor; } .load:nth-child(2) { animation: load1 2.4s linear infinite; transform: scale(1); } @keyframes load1 { 35% { transform: scale(0); } 100% { transform: scale(0); } } .load:nth-child(3) { animation: load2 2.4s linear infinite; transform: scale(1); } @keyframes load2 { 30% { transform: scale(1); } 58% { transform: scale(0); } 100% { transform: scale(0); } } .load:nth-child(4) { animation: load3 2.4s linear infinite; transform: scale(1); } @keyframes load3 { 60% { transform: scale(1); } 80% { transform: scale(0); } 100% { transform: scale(0); } }Preview ...

今天的知识点 (2019.09.09) —— 第146天[html] 请说说viewport是什么？在什么时候下使用？有什么作用？[css] 移动页面底部工具条有3个图标，如何平分？在设置边框后最后一个图标掉下去了怎么办？[js] 请举例说明动态操作DOM的方法有哪些？[软技能] 移动端的用户体验有哪些优化的方法？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...

Angular8集成Editor.md编辑器就不必多说了。这里主要介绍集成editormd后通过他自带的解析markdown方法，解析markdown生成html文章地址：http://www.bowen-tech.top/art...

项目地址项目地址： https://github.com/Wscats/CV简历的本质在写简历之前，我们必须清楚的了解一件事情，那就是简历是什么？它不是人生履历，不是项目清单，也不是技能大放送。简历的存在只有一个目的 —— 帮你约到面试。只要能达到这个目的，简历可以是一段视频，一个开源项目，一张照片，甚至是一行字，比如： I wrote javascript当然，绝大部分简历的形式，就是我们所熟知的，是一篇文章。即使你通过其他方式获得了面试，当你入职的时候，还是要有这么一份纸质简历的，所以不要想着偷懒。 其实简历不只是表现自己，更是传递以下三个信息，增强通过率。 是什么（你能做什么？，擅长什么？）比别人好在哪些地方（相比其他同行，你的优势？）如果雇佣你，招聘方会得到什么好处 （能不能为企业带来效益？）正如你抉择跳槽，思考要不要留在这个公司的时候，你也可能考虑下面三点 待遇（给的钱够不够？福利好不好）环境（同事nice不？老板好不好？事少离家近？工作开心与否？是否帅哥美女多？嗯哼）个人（有晋升机会不？能否再进步？）当然企业和你的相互选择其实正如上面几点中的考量和博弈，当然面试是平等的，是相互选择的结果，所以有你对企业的考量，也有企业对你的考量 回归到写简历，和很多人在大学写议论文写作文是不同的，过分的论证会显得自夸，反而容易引起反感，所以要点到为止。这里的技巧是，提供论据，把论点留给阅读简历的人自己去得出。放论据要具体，最基本的是要数字化，好的论据要让人印象深刻。 举个例子，下边内容是虚构的： 2015年(时间可以具体到年月，或者经历的项目周期)，我共同(一般都是团队开发了，单干就别写了，除非你个人能力非常突出)参与了XX新闻网站后端发布系统的开发（这部分是大家都会写的）。作为团队里面的核心程序员，我不但完成了网站界面、功能逻辑的开发工作，更提出了高效的组件化和模块化开发方案，通过模块化开发让团队成员较少编写代码时候的冲突，通过组件化让团队成员分工合作，各善其职，有效的提升了系统的的开发效率。（这部分是很多人忘掉的，记得写出你在这个项目中具体负责的部分，以及你贡献出来的价值。）在该系统上线后，Web前端性能从10QPS提升到200QPS，服务器由10台减少到3台（ 通过量化的数字来增强可信度 ）。2016年我升任WAPCMS项目负责人，带领一个3人小组支持着每天超过2亿的PV（ 这就是你自身的优势。你能带给旧企业的价值，也就是你能带给新企业的价值。 ）。 有同学问，如果我在项目里边没有那么显赫的成绩可以说怎么办？讲不出成绩时，就讲你的成长。因为学习能力也是每家公司都看中的东西。你可以写你在这个项目里边遇到了一个什么样的问题，别人怎么解决的，你怎么解决的，你的方案好在什么地方，最终这个方案的效果如何。 具体、量化、有说服力，是技术简历特别需要注重的地方。 （以上内容在写完简历后，对每一段进行评估，完成后再删除） 联系方式（HR会打印你的简历，用于在面试的时候联系，所以联系方式放到最上边会比较方便） 头像（如果你觉得自己长得可以，你可以放哈）手机：139 （如果是外地手机，可注明。如经常关机，要写上最优联系时间）Email：wscats@gmail.com （虽然我觉得QQ邮箱无所谓，不过有些技术人员比较反感，建议用163，gmail也可以）QQ/微信号：7*（提供一个通过网络可以联系到你的方式）个人信息易佳梦/女/1990本科/XX大学计算机系工作年限/经验：3年技术博客：https://wscats.github.io/blog ( 使用GitHub Page映射页面会显得的逼格较高 )Github：https://github.com/Wscats ( 原创repo+多star的Github帐号会极大的提升你的个人品牌 )期望职位：Web前端程序员/工程师期望薪资：税前月薪15k~20k，特别喜欢的公司可例外期望城市：广州工作经历工作经历按逆序排列，最新的在最前边，因为HR更多的是了解你在上一家公司或者近几年你的工作情况，我建议实际工作小于半年的你也可以不写当然（IT行业跳槽如此平凡~），因为短的在职经历会让HR觉得你不够稳定，存在录用后的风险，还有工作经历最好有层次感，比如你刚开始第一份前端工作你用的技术比较简单，你可以写你自己负责切图，用jQuery写逻辑，用sass写样式，然后再下一份工作你可能技术加强了，你就可以写你用vue，angular来开发了一个单页面应用，还负责写了部分后端接口，这样可以让面试官觉得你有自我学习，不断进步的习惯。 123公司 （ 2016年9月 ~ 2017年9月 ）456项目我在此项目负责了哪些工作，分别在哪些地方做得出色/和别人不一样/成长快，这个项目中，我最困难的问题是什么，我采取了什么措施，最后结果如何。这个项目中，我最自豪的技术细节是什么，为什么，实施前和实施后的数据对比如何，同事和领导对此的反应如何。 789项目我在此项目负责了哪些工作，分别在哪些地方做得出色/和别人不一样/成长快，这个项目中，我最困难的问题是什么，我采取了什么措施，最后结果如何。这个项目中，我最自豪的技术细节是什么，为什么，实施前和实施后的数据对比如何，同事和领导对此的反应如何。 其他项目（每个公司写2~3个核心项目就好了，如果你有非常大量的项目，那么按分类进行合并，每一类选一个典型写出来。其他的一笔带过即可。） 根据上面的模板你可以这样来写 广州XX有限公司（2016.09 ~ 2017.03）技术部-前端工程师这个项目目的主要以成人学历为主线开发，有大专、本科、资格证等线上销售的教育培训产品。我在此项目负责了前期界面研究，做出原型设计，原型切图，配合后台开发人员设计界面与开发功能，并负责框架开发，封装公共组件，以及根据需要引进第三方插件。我在项目中遇到的最大困难是实现产品前端界面效果与设计图纸在某些界面上难以绝对统一我采用Vue+jQuery开发方案，在细节上我运用了jwplayer.js、jquery.KinSlideshow来实现幻灯片轮播效果，增强用户体验更好等。自我评价最好突出自己的优势，比如学习能力，解决问题能力，带队能力，沟通能力和技术能力等等想简单点可以这样写： 1.喜欢学习新技术，有良好的文档编写和代码书写规范，耐心打磨用户体验和用户界面2.有良好的沟通能力和团队合作能力，性格随和，认真负责，自学能力强详细的你也可以这样来 1. 对前端技术具有浓厚的兴趣，喜欢逛CSDN，博客园等技术论坛；2. 具备良好的审美能力，有良好的代码编程习惯；（说好的审美，可以和设计师好好玩耍）3. 学习适应能力强，愿意不断学习新知识丰富自己；（学习能力大企业最看重）4. 抗压能力强，有信心在不同的工作强度下进行开发工作；（抗压技能点加上，去常加班的公司有独特优势，额）5. 性格随和，具有良好的团队合作精神。（性格最好能适应团队）开源项目和作品选取你自己Github上的某个开源项目即可，当然开源项目最好写清楚文档，比如安装方法，核心代码的分析（这一段用于放置工作以外的、关键来证明你的能力的材料，也可以理解为其他工程师或者开源社区对你的认可度） 开源项目（对于程序员来讲，没有什么比Show me the code能有说服力了） Piano：????用键盘8个键演奏一首蒲公英的约定送给自己或月亮代表我的心送给她（项目的简要说明，Star和Fork数多的可以注明）Articles：????分享我的学习片段和与你的回忆（项目的简要说明，Star和Fork数多的可以注明）技术文章（挑选你写作或翻译的技术文章，好的文章可以从侧面证实你的表达和沟通能力，也帮助招聘方更了解你） 我如何用前端技术得到XXOO网站的VIP前端程序员经常忽视的一个JavaScript面试题 （ 或者好的翻译文章可以侧证你对英文技术文档的阅读能力）技能清单（我一般主张将技能清单写入到工作经历里边去。不过很难完整，所以有这么一段也不错）以下均为我熟练使用的技能 后端开发：PHP/Node后端框架：ThinkPHP/CodeIgniter前端框架：ReactJS/VueJS/AngularJS/Omi/EmberJS/Cocos2dJS/Ionic前端样式库：WeUI/Bootstrap/AntDesign/ElementUI/AmazeUI前端工具库：jQuery/Zepto/Lodash/Axios前端调试：Postman/Charles/Vue(React) Dev Tools前端插件：Swiper/Iscroll前端模块工具：Webpack/Gulp/RequireJS/Fis/Grunt预编译语言：Typescript/Sass/Less/Pug/JadeNative开发：Weex/React Native/Cordova/Uni App小程序相关：Mpvue/Taro/Kbone/Wepy数据库相关：MySQL/MongoDB/PgSQL/PDO/SQLite版本管理、文档和自动化部署工具：SVN/Git单元测试：PHPUnit/SimpleTest/Qunit/Mocha云和开放平台：SAE/BAE/AWS/微博开放平台/微信应用开发例如你可以这样写,当然你得根据自己的个人情况进行修改 1、熟练使用合理的结构和样式编写兼容主流浏览器的页面；2、能适当运用CSS3使页面在现代浏览器上效果更佳；3、熟练运用rem单位和flex布局实现不同浏览器宽度下的整页缩放；4、熟练使用photoshop软件进行简单的图片处理，能根据图片特征保存成最优的格式；5、熟练使用原生javaScript以及常用javaScript库，如jQuery、zepto；6、能运用模块化、面向对象的方式编程；7、了解http协议，能够根据http请求报文、响应报文和状态码排查问题；8、熟练运用ajax实现异步数据传递，熟悉JSON等数据交换格式；了解php和数据库；9、了解如何使用node.js搭建本地server模拟接口返回数据测试ajax接口；10、能使用Bootstrap、WeUI、Ionic等前端样式库和框架进行开发；11、熟练运用AngularJS，VueJS进行模块开发，了解双向数据绑定原理，熟练编写控制器、服务、组件、过滤器等12、熟练使用Gulp对代码进行压缩合并；熟悉使用Git和SVN进行代码管理和版本控制；当然再举个例子（精通慎用！熟悉可以多用，不够自信就用了解吧，额哼） 1、熟练HTML、DIV+CSS的页面布局，能根据设计图完成页面制作2、熟练响应式布局、弹性盒布局，熟悉基于HTML5的WebApp开发以及移动端适配3、熟练主流浏览器的兼容性以及相应的适配技术，完成页面的完整兼容4、熟练掌握HTML5、CSS3新增功能，了解Canvas动画制作5、熟悉掌握原生JavaScript，熟悉jQuery，了解Zepto6、熟练Bootstrap、AngularJS等前段框架，了解MUI、Vue框架7、熟练使用AJAX进行数据交互，协助后端开发工程师完成项目8、熟练JSON数据的使用以及处理方式9、熟练LocalStorage、SessionStorage、Cookie等本地存储10、熟悉使用Swiper、Font-awesome、jQueryUI以及jQuery插件等前端插件11、熟练使用Cordova插件将WebApp打包成安卓App，实现混合App开发12、熟练使用Visual Studio Code、SublimeText、HBulider、Git、Gulp、Scss、Photoshop 等开发工具这里尽量不要重复叙述相同的技能点，保持好每一条都是独特的，每一条描述出现的英文技能点关键词尽量保持大小统一，比如Bootstrap、WeUI、Ionic，这样写没问题，但是不要个别大写个别小写bootstrap、WeUI、ionic，遇到强迫症的HR就尴尬了，不过有些还是例外的比如jQuery,还是第二个字母大写吧(...额，不解释)，还有这里不要出现一些“感性“的描述，比如熟悉使用PHP，能跟后端工程师愉快的合作(什么鬼)，这些句子就不要出现了 ...

《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 html说说你对表单属性type="hidden"的理解，它的运用场景有哪些？SGML（标准通用标记语言）和HTML（超文本标记语言），XML（可扩展标记语言）和HTML的之间有什么关系？请说说<pre>和<code>标签的区别？如何实现应用缓存？说说你对manifest的理解form标签定义请求类型和请求地址分别是哪个属性？说说你对HTML5的keygen标签的理解，它的作用是什么？如何让textarea标签中的内容原格式输出？csscss怎样使每个字符宽度一样？说下你对background-size的理解，它有什么运用场景？如何自定义radio按钮的样式word-wrap、word-break和white-space有什么区别？说说你对字母"X"在CSS中有什么作用？CSS3中的transition是否可以过渡opacity和display？说下background-color:transparent和opacity:0的区别是什么？js原生Math的方法有哪些？请列举并描述其功能什么是词法分析？请描述下js词法分析的过程？自己实现数组的 map、filter、find 方法请描述下函数的执行过程写一个洗扑克牌的方法说用原生js实现封装一个选项卡的功能说下你对柯里化函数(currying)的理解，它有什么运用场景？软技能为什么提倡利用多个域名来存储网站的资源？W3C是什么？请说说你对它的理解你有自己的博客吗？维护的频率是多久呢？在选择框架时应该考虑哪些因素？你觉得你上家公司的前端开发流程有什么地方要优化的吗？怎么优化呢？你会PHP、JAVA、Python或GO吗？都有做过哪些应用呢？你知道Jenkins吗？有没有用过？说说你对它的理解全部所有 交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎加入 “前端面试每日3+1” 微信群（扫个人微信号邀请入群）相互交流。

今天的知识点 (2019.09.08) —— 第145天[html] 说说你对表单属性type="hidden"的理解，它的运用场景有哪些？[css] css怎样使每个字符宽度一样？[js] 原生Math的方法有哪些？请列举并描述其功能[软技能] 为什么提倡利用多个域名来存储网站的资源？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...

写一个BUI折叠菜单插件效果预览 控件分析控件结构一个点击显示隐藏的效果, 并且点击的时候, 会先把展开进行隐藏, 再展开自己的. 从界面上我们来看看结构的设计.<!-- 一般控件最外层就是控件的容器名 --><div class="bui-foldmenu"> <div class="bui-foldmenu-item">菜单</div> <div class="bui-foldmenu-content">内容</div> <div class="bui-foldmenu-item">菜单2</div> <div class="bui-foldmenu-content">内容2</div></div>这里我们采用的是并列同级的方式, 那结构写起来有点麻烦, 其实这个结构跟 dl,dt,dd 是一致的, 那我们完全可以优化成以下结构.<!-- 一般控件最外层就是控件的容器名 --><dl class="bui-foldmenu"> <dt>菜单</dt> <dd>内容</dd> <dt>菜单2</dt> <dd>内容2</dd></dl>bui的设计是基于按钮的原型撑开容器的方式, 这样可以保持每个容器都是一致的标准高度, 所以我们再对结构进行优化.<!-- 一般控件最外层就是控件的容器名 --><dl class="bui-foldmenu"> <dt class="bui-btn">菜单</dt> <dd>内容</dd> <dt class="bui-btn">菜单2</dt> <dd>内容2</dd></dl>像刚刚效果图,菜单的点击还会有图标的切换, 再结合布局来得到以下结构, 一切皆布局, 一切皆容器.<!-- 一般控件最外层就是控件的容器名 --><dl class="bui-foldmenu"> <dt class="bui-btn bui-box"><div class="span1">菜单</div><i class="icon-foldmenu"></i></dt> <dd>内容</dd> <dt class="bui-btn bui-box"><div class="span1">菜单2</div><i class="icon-foldmenu"></i></dt> <dd>内容2</dd></dl>控件样式一般作为插件的独立样式引入, bui-foldmenu.css文件 .bui-foldmenu {}.bui-foldmenu>dt,.bui-foldmenu>[class*=bui-btn] { border: 0; border-bottom: 1px solid #eee;}/* 默认隐藏内容 */.bui-foldmenu>dd { display: none; border: 0; overflow-y: auto; border-bottom: 1px solid #eee; background: #fff;}/* 图标 */.bui-foldmenu .icon-foldmenu { -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s;}.bui-foldmenu .icon-foldmenu:before { content: "\e649";}/* 激活的时候显示block */.bui-foldmenu>.active+dd { display: block;}/* 激活的二级菜单的时候,把箭头翻转 */.bui-foldmenu>.active .icon-foldmenu { -webkit-transform: rotate(-180deg); transform: rotate(-180deg);}样式里面就默认隐藏内容标签(dt相邻的dd),由控件初始化, 其它都是一些修饰, 设置激活状态的时候,箭头翻转.控件脚本1.5.4 新增 bui.extend 方法,可以用来扩展插件, 并且保持跟 bui原本的使用方式一致.bui.extend 控件参数是一个对象, 其中包含以下参数name string 控件名称config object 控件默认参数callback function 控件的逻辑最简单的版本// 最简单的版本bui.extend({ name: "foldmenu", config: { id: "" }, callback: function(opt) { // that 指向插件的抛出的公共方法, option widget 等 let that = this; // this.config 为已经跟初始化参数合并以后的结果; let param = this.config; // 缓存选择器 let $id = null; // 要抛给开发者的方法 that.init = function(option) { // 对直接调用init方法的参数进行合并 param = $.extend(true, {}, param, option); // 单页多页选择器,如果是单页,这个插件只能在模块里面用, 不能在bui.ready $id = bui.$(param.id); // 绑定事件,点击的时候增加激活样式 $id.children("dt").click(function(e) { var hasActive = $(this).hasClass("active"); if (hasActive) { $(this).removeClass("active"); } else { // 加上样式以后会自动对箭头及下一层级展示处理; $(this).addClass("active"); } }) return that; } // 如果有依赖bui控件,应该在这里写,这样方便外部调用 // that.widgets.loading = ui.loading({ // appendTo: opt.id // }); // 如果需要销毁的生命周期,则在这里加上. // that.beforeDestroy = function() { // // return that; // } // 必须传id if (!param.id) { // 抛出错误 bui.showLog("必须传id参数.") return that; } // 默认先初始化一次 return this.init(opt); }});控件使用<dl id="folder" class="bui-foldmenu"> <dt class="bui-btn">菜单</dt> <dd>内容</dd> <dt class="bui-btn">菜单2</dt> <dd>内容2</dd></dl> // 初始化 var uiFloder = bui.foldmenu({id:"#folder"}) // uiFloder.config 可以拿到一些实例的参数插件预览在线预览bui.folder插件 ...

滚动穿透在移动端开发中是一个很常见的问题，产生诡异的交互行为，影响用户体验，同时也让我们的产品看起来不那么“专业”。虽然不少产品选择容忍了这样的行为，但是作为追求极致的工程师，应该去了解为什么会产生以及如何去解决。 什么是滚动穿透移动端开发中避免不了会在页面上进行弹窗、加浮层等这种操作。一个最常见的场景就是整个页面上有一个遮罩层，上面画着各种各样的东西，具体是什么就不讨论。实现这样一个遮罩层可难不住即使是一个刚开始写前端的小白。但是这里有一个问题就是如果不对遮罩层做任何处理，当用户在上面滑动时会发现遮罩层下方的页面居然也在滚动，这就很 interesting 了。就如下面的例子，一个名为mask长宽都是屏幕大小的遮罩层，我们在上面滑动时，下面的内容也在跟随滚动，即滚动“穿透”到了下方，这就是滚动穿透（scroll-chaining）。 上方 demo 的遮罩层底部是一个逐渐变蓝的内容容器，但是滑动上面遮罩层时，底部也跟随滚动了，这只是一个最简单的场景，后面我们会讨论更复杂的情况。 为什么会出现目前 Google 上搜滚动穿透会出现一大堆教你如何解决的文章，但是它们都是在告诉你怎么解决怎么 hack 掉这种交互异常。并没有告诉读者为什么会产生这种行为，甚至认为这是浏览器的一个 bug。对于我来说这个是难以理解的，因为就算解决了问题，其实也并不知道问题的根本是怎样的。 认知误区有一个误区就是我们设置了一个和屏幕一样大小的遮罩层，盖住了下面的内容，按理说我们应该能屏蔽掉下方的所有事件也就是说不可能触发下面内容的滚动。那么我们就去看一下规范，什么时候会触发滚动。 // https://www.w3.org/TR/2016/WD...When asked to run the scroll steps for a Document doc, run these steps: For each item target in doc’s pending scroll event targets, in the order they were added to the list, run these substeps:If target is a Document, fire an event named scroll that bubbles at target.Otherwise, fire an event named scroll at target.Empty doc’s pending scroll event targets.通过规范我们可以明白的 2 点是，首先滚动的 target 可以是 document 和里面的 element。其次，在 element 上的 scroll 事件是不冒泡的，document 上的 scroll 事件冒泡。 ...

野子电竞数据官网改版https://www.xxe.io/ 全新登场前端工程化借鉴了很多后端的成功经验，设计模式，MVC，组件化与模块化等，再结合前端本身的分层与分治的特点，逐渐变得复杂。 在angular里ioc，di的概念也开始盛行，而且结合的还不错，不过aop这种说法还真少见，可能是我太孤陋寡闻了吧，不免去百度一下。 一开始听到前端AOP这个提法我还有些吃惊，我是会后端开发的，SPRING的AOP已深入人心，面向切片与切入点都是核心概念，但是javascript做AOP还是真没在项目里做过。js是解释型的语言，语法松散灵活，是一种非强类型的语言，它是一种天生的函数式语言，除了值类型，一些皆为对象，包括函数，前端开发一直以来都是一个页面一个页面地生产的，做AOP的意义何在？而且也没有听说哪个框架里有AOP。后来一查，还真有，在DOJO这个框架里比较流行，不过DOJO我一直没用过，所以就没深入去了解。 所以，我说AOP如果需要用的话，可以用JS闭包来做，在调用其他方法前先调用一个切面方法。现在想想，我觉得这样说也没错，前端模块化基本都是用闭包来实现的，如果不做封装，都是松散的JS文件，何谈AOP？ AOP一般用在哪儿呢？日志记录、权限检查、事务处理，我想权限检查和事务处理最好是放到后端去做，一是为了安全，二是好控制，事务很难在界面逻辑上控制，但在后端的业务逻辑或数据库层就容易的多，而权限检查在前端做就不安全，因为JS和HTML都是文本格式的，代码在前端是暴露的，只能做一些弱检查。日志记录可能是前端AOP主要的一个应用方向吧，但前端代码是在浏览器里运行的，日志记录也很难记到文件里，只能利用cookie或console，前者不适应记录日志，因为会降低性能，而后者主要用来做调试代码用，这么看来，我觉得AOP的作用并不明显，了解一下即可。 使用回调的方式实现AOP： advice = function(originalFunc){console.log(“before function”);originalFunc();console.log(“after function”);}varobj ={foo: function(){console.log(‘foo’);}}advice(obj.foo)1234567891011这最简单不过了，要想使用AOP，我们不得不通过advice来调用每一个方法，这种方式的确不够友好。需要做一些封装，使用闭包来控制：（以下代码来源于网络） function around(obj, prop, advice){var exist =obj[prop];var previous = function(){return exist.apply(obj, arguments);};var advised =advice(previous);obj[prop] = function(){//当调用remove后，advised为空//利用闭包的作用域链中可以访问到advised跟previous变量，根据advised是否为空可以来决定调用谁return advised ?advised.apply(obj, arguments) : previous.apply(obj, arguments);}; return{ remove: function(){ //利用闭包的作用域链，在remove时将advised置空，这样执行过程中不会进入本次around //这几个不能删 //obj[prop] = exist; advised = null; advice = null; //previous = null; //exist = null; //obj = null;}}123456789101112}var count = 1;advice = function(originalFunc){var current = count++;return function() {console.log("before function " +current);originalFunc.apply(this, arguments);console.log("after function " +current);}}var obj ={foo: function(arg){console.log(this.name + " and " +arg);},name: “obj”} ...

野子电竞数据官网改版https://www.xxe.io/ 全新登场介绍一下webpack和gulp以及项目中的具体使用现今的很多网页其实可以看做是功能丰富的应用，它们拥有复杂的javascript代码和一大堆依赖包，为了简化开发的复杂度，有很多实践方法模块化：将复杂的程序细化为小的文件类似于typescript这种在js基础上拓展的开发语言，可以简化我们的开发，并且之后可以用bable等工具将其转化成为js即浏览器认识的语言Sass,less等css预处理器webpack是模块打包机，它做的事情是分析你的项目结构，找到js模块以及其他的一些浏览器不能直接运行的语言，并将其打包为合适的格式供浏览器使用Babel编译js的平台，可以使用下一代的es6和es7使用基于js拓展的语言，如 react的JSX模块组织的几种方法通过书写在不同文件中，使用script标签进行加载common.js node.js使用的就是这种方式amd进行加载 require.js使用这种模式es6模块webpackwebpack的特点丰富的插件方便进行工作大量的加载器，包括加载各种静态资源代码分割，提供按需加载的能力发布工具webpack的优势webpack是以commonjs的形式来书写脚本 但对amd和cmd也支持全面，方便旧项目进行代码迁移能被模块化的不仅仅是js了开发便捷 能替代部分grunt和gulp的工作 比如打包 压缩 图片转base64扩展性强 插件机制完善webpack的属性值entry 入口文件output:定义构建后的输出文件module:loaders加载各种资源reslove resolve属性中的extensions数组用于配置程序中可以自行补全哪些文件后缀plugin 提供了丰富的组件来满足不同的需求externals 当我们想在项目中require一些其他的类库或者api 而又不想让这些类库的源码被构建到运行时文件中contextGrunt配置gruntfile.jsmodule.exports = function () {grunt.initConfig({pkg: grunt.file.readJSON(‘package.json’);});grunt.registerTask(‘default’, []);}123456grunt插件介绍contrib-jshint js语法错误勘察contrib-watch 实时监控文件变化 调用相应的任务重新执行contrib-cleancontrib-copycontrib-concatkarma 前端自动化测试化工具uglify 插件uglify: {options: {stripBanner: true,banner:},build: {src:dest}} 在initConfig之后grunt.loadNpmTasks(‘grunt-contrib-ugify’);grunt.registerTask(‘default’,‘ugify’);1234567891011121314banner: 即在生成的压缩文件第一行加一句话说明，pkg可以获得package.json的内容build: 配置了源文件和压缩文件，即规定了要压缩谁 压缩之后生成谁jshintjshint: {build: [‘Gruntfile.js’, ‘src/.js’],options: {jshintrc: ‘.jshintrc’}}123456使用watch插件watch: {build: {files: ['src/.js’, ‘src/.css’],tasks: [‘jshint’, ‘uglify’],options: {spawn: false}}}1234567gulpgulpfile.jsgulp的配置文件var gulp = require(‘gulp’)var less = require(‘gulp-less’)gulp.task(‘testLess’, function () {gulp.src=(‘src/less/index.less’).pip(less()).pip(gulp.dest(‘src/css’))});//定义默认任务，并让gulp监视文件变化自动执行gulp.task(‘default’, [‘watch’], function () {gulp.watch('sass/.scss’,[‘sass’]);});123456789101112gulp常用插件js压缩var gulp = require(‘gulp’);var rename = require(‘gulp-rename’);var uglify = require(‘gulp-uglify’);gulp.task(‘rename’, function () {gulp.src(‘src//*.js’).pipe(uglify()).pipe(rename(‘idnex.min.js’)).pipe(gulp.dest(‘build/js’);});gulp.task(‘default’, [‘rename’]);12345678910html压缩var minifyHtml = require(‘gulp-minify-html’);gulp.task(‘minify-html’, function () {gulp.src('src//.html’)//要压缩的html文件.pipe(minifyHtml())//压缩.pipe(gulp.dest(‘build’))});123456js文件合并var concat = require(‘gulp-concat’);gulp.task(‘concat’, function () {gulp.src('src/**/.js’)//要合并的文件.pipe(concat(‘index.js’))//合并匹配到的js文件并命名为index.js.pipe(gulp.dest(‘build/js’))});123456gulp-lessvar gulp = require(‘gulp’), ...

今天的知识点 (2019.09.07) —— 第144天[html] SGML（标准通用标记语言）和HTML（超文本标记语言），XML（可扩展标记语言）和HTML的之间有什么关系？[css] 说下你对background-size的理解，它有什么运用场景？[js] 什么是词法分析？请描述下js词法分析的过程？[软技能] W3C是什么？请说说你对它的理解《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...