在掘金83858

在 三百六十行，行行转 IT 的现状下，很多来自各行各业的同学，都选择 Python 这门胶水语言做为踏入互联网大门的第一块敲门砖，在这些人里，又有相当大比例的同学选择了 Web 开发这个方向（包括我）。而从事 web 开发，绕不过一个知识点，就是 WSGI。 不管你是否是这些…

其实vue/react等框架的出现, 让自己做一个ui变得简单, 大部分的js逻辑都被库封装, 反而组件的代码主要都是css, 所以只要css写好了, 一个组件就完成60%以上了. 给组件增加一个"手风琴"的选项, 就是只可以同时打开一个"页". 给每次点击header标签的时…

众所周知，在CSS3中产生了诸多优秀的特性，现在就来分享一下我这段时间对于这些特性的效果实践，希望对大家有所启发。 要画一个对话框，首先来学习做一个三角形。其实非常的简单。 利用skew特性，第一个参数为x轴倾斜的角度，第二个参数为y轴倾斜的角度。 大家可以自己动手试试。 那我…

HTML5 为我们提供了 File API 相关规范。主要涉及 File 接口 和 FileReader 对象 。 本文整理了兼容性检测、文件选择、属性读取、文件读取、进度监控、大文件分片上传以及拖拽上传等开发中常见的前端文件操作。 首先，我们的 File 来自于<input>…

首先，利用::after和::before就可以画出上下两条线，所以只需要一个 dom 元素即可。 其次，对于鼠标移入的动画，要给上面两个伪元素设置:hover选择器。 最后是处理动画方向。我们以上面的线条为例，在鼠标移入的时候，是从右到左变化的。这里是通过设置transfor…

:before 和 :after伪元素指定了一个元素文档树内容之前和之后的内容。由于input标签不是可插入内容的容器。所以这里下划线无法通过伪元素来实现。需要借助其他 dom 节点。 包裹在外的父元素div应该设置成inline-block，否则宽度会满屏。 span标签实现…

这是一个纯粹利用CSS所做出来的效果，这个效果说穿了就是一个图像处理的原理，做法跟Photoshop里头的几乎一模一样，只是一个用图层和色版来制作，一个则是用CSS（把div当成图层思考就好了）。 一开始我们来玩Photoshop，会比直接写CSS来得容易理解（没有Photos…

就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascrip…

今天是520。 一句温柔的问候，一束美丽的鲜花，一段真情的告白。 但是作为一名与众不同的程序员，我们可不仅仅拥有上面的传情方法，别忘了每个人的手上可是都有其他人不具备的神奇技能，就是我们每天辛辛苦苦敲下的代码。 在这个特殊的日子，就用我们手中的魔法代码，来给你的她（他）制作出一…