前言 上一次深扒CSS的时候,还说CSS和H5绘制复杂图形很麻烦,看了大神的操作后,感觉茅塞顿开了,哈哈. 就算可能我暂时没有用到的机会,学习一下开发者的设计思路也是受益匪浅呀. 嗯,今天要介绍的是一个制作web图案的组件--css-doodle. 使用css-doodle可以很快的绘制一些规律性图形.动画. 使用css-doodle,只需要编辑10来行代码,就可以得到下面这些图案效果. 作者在他的codepen上放了很多实例,大家可以先去看看. css-doodle挺受欢迎的,codepen上…

每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不甚满意. 终于下定心思来改造一个可缩放的图标库.github先上:https://github.com/qieguo2016/iconoo,目前提供下载link标签引入和npm+webpack的引入方式,详见项目的readme.(喂,来个star!).上图: 关于改造,一开始的想法就是使用百分比尺寸…

前端必看的文章 1.CSS设置居中的方案总结  https://juejin.im/post/5a7a9a545188257a892998ef 2.阮一峰老师的网站 http://www.ruanyifeng.com/blog/archives.html 技术胖网站:http://jspang.com/ 3.廖雪峰老师的网站 https://www.liaoxuefeng.com/wiki/896043488029600/897013573512192 4.h5小知识     https://s…

jquery的日期插件有好几款,H5中的input也可以自带日期选择.但为什么要再写一个,有两个理由,一个是引用的文件太大,而有时候只需要很简单的功能,二个是想加一些自定义的效果不好改. 我写的这个功能比较简单,可以换月,有预约效果,可以设定预约日期范围,压缩后1.4kb,先上个图,再慢慢解释: js代码: $.fn.datebox = function (options) { var config = { $valueEle: $("#outputTime"), $prev: $(&…

关于开发者的技术水平到底该如何定义,到底一个人的技术水平应该定位在高.中.低的标准是什么呢?很多人觉得这是一个仁者见仁的问题,有人觉得根据公司的那个员工等级判断.答案是肯定不是,从纯开发技术的角度来分析.很多人觉得自己一门语言精通了就去学其他语言了,美其名曰集大成者,这样的工作十几年却是初级水平的技术人员也不少. 下面我来讲讲我的认知,C#这门技术到底学到什么程度可以进入到什么级别. 我常说C#的入门技术是委托.事件.消息.只有当你可以纯熟运用这三个技能的时候,才刚刚入门,此时C#的大门才算正式…

Python3 与 C# 面向对象之-继承与多态   文章汇总:https://www.cnblogs.com/dotnetcrazy/p/9160514.html 目录: 2.继承 ¶ 2.1.单继承 ¶ 2.2.多继承 ¶ 2.3.C#继承 ¶ 2.4C#接口的多实现 ¶ 3 多态 ¶ 3.1.Python ¶ 3.2.C#虚方法实现多态 ¶ 3.3.C#抽象类实现多态 ¶ 3.4.C#接口实现多态 ¶ 正文: 代码裤子:https://github.com/lotapp/BaseCode…

目录 p18 事件绑定1 p19 事件绑定2 btn p20+ view 相关,wxss,less,css 零基础玩转微信小程序[黑马程序员] https://www.bilibili.com/video/av73342655 p18 事件绑定1 p19 事件绑定2 btn p20+ view 相关,wxss,less,css…

我常说C#的入门技术是委托.事件.消息.只有当你可以纯熟运用这三个技能的时候,才刚刚入门,此时C#的大门才算正式为你打开.很多人在学了一些语法编写一些项目后就觉得C#精通了,其实你们还没入门呢(对日开发的居多) 下面上一个图片,大家来看看自己的定位,当然是纯技术角度,其实,有些时候一个软件架构,用初级软件工程师也是可以架构的. 1,        comom language runtime :初级人员无视他,中级人员起码要知道他,高级人员多数要会使用其中一些应用比如security,架构师要理…

  在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像的设置在后续介绍到各种图绘制时介绍). 这里所说的文本是指在使用matplotlib作图过程中通过代码的方式往图中添加的各种文字,包括figure标题.axes标题.坐标轴标签.坐标轴刻度标签.注释.普通文本等.轴设置指的是对与坐标轴相关的的元素的设置,例如显示范围.刻度.刻度标签等. In [1]…

原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人用纯CSS绘制三角形后自己的一些思路的整理,文中会介绍几种小图标的效果. 用css中的border绘制鸡蛋形状: 是的你没看错,这里是要做绘制一个类似于鸡蛋的效果. 思路:我们先用div绘制一个正方形,然后利用设置border-radius: 50%;,这样…

在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人用纯CSS绘制三角形后自己的一些思路的整理,文中会介绍几种小图标的效果. 用css中的border绘制鸡蛋形状: 是的你没看错,这里是要做绘制一个类似于鸡蛋的效果. 思路:我们先用div绘制一个正方形,然后利用设置border-radius: 50%;,这样我们就可以得到一个圆形的效果,代码如下: html代…

前言  继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通过伪元素更好地实现更多的可能! 初识伪元素  说起伪元素我第一想到的莫过于::before和::after这两个了,它俩其实就是在其附属的选择器命中的元素上插入第一个子节点和追加最后一个子节点.那这时我不禁地想问:"直接添加两个class为.before和.after不是一样的吗?"  其…

本文转自  http://blog.csdn.net/xuyonghong1122/article/details/51986472 在使用CSS的时候,总会有这个想法 这个属性值老是重复写好烦 这个属性值我在前面那个CSS文件中写过,好想直接拿过来用 CSS能不能像其他程序性语言一样用一个变量来代替需要重复利用的内容呢 鉴于以上的想法并非我一人会想到,只要是做过前端的肯定都会思考过这个问题,无奈CSS基本可以说没有语法可依循,于是有了LESS框架 什么是CSS? 作为一门标记性语言,CSS 的…

点击上方"前端自习课"关注,学习起来~ CSS3的3D起步 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果.旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就包括X轴,Y轴,Z轴旋转.平移同理. 当然用理论来说明,估计你还不明白.下面是3个gif: 沿着X轴旋转 沿着Y轴旋转 沿着Z轴旋转 旋转应该没问题了,那理解平移起来就比较容易了,就是在…

在无序列表ul>li中,无线列表的标志是出现在各列表前面的圆点.在有序列表ol>li中,前面默认带有数字,如何修改列表前面的项目符号,只需要通过list-style调整就好,常见的符号有(/*内容注释部分*/)list-style-type:circle;/*空心圆*/list-style:none;/*去除标志*/list-style:square;/*方块*/list-style:upper-roman;/*罗马数字*/list-style:lower-alpha;/*list-style…

原文链接:How Css Modules Work 原文作者是Preact的作者 这是一篇关于如何使用Css Modules的快速介绍,使用到的工具是Webpack吊炸的css-loader 首先,我们明确一下本文的目标.我们想要和我们的组件一起使用css,因为在某种程度上他们已经耦合在一起了.我今天会用less,但是用单纯的css,或者Scss等等也是一样的. 文件结构 components/ foo/ index.js style.less 样式 首先,我们来写点less 12345678…

这是在对一个博客模板进行移动端适配时遇到的一个场景.html结构如下: 要解决的问题是如何在不修改任何html代码的情况下,仅仅通过css实现下面的效果: 1)改变它们的显示顺序,.MainCell显示在前,.LeftCell显示在后(与html结构中的顺序相反). 2)让它们分行显示. .MainCell与.LeftCell是表格的单元格,它们默认是以列的方式排列在一行显示,如果解决了第1个问题,那就是.MainCell在左,.LeftCell在右:让它们分行方式显示就是.MainCell显示…

一,什么是CSS? Cascading Style Sheets层叠样式表           层叠:就是层层覆盖叠加,如果有多种样式对同一html标签进行修饰,样式有冲突的部分应用优先级高,不冲突的部分共同作用 样式表:就是css属性样式的集合   CSS的作用           1. 对html页面进行美化和修饰 2. 将html的内容和样式进行了分离,让文档看起来更清晰 3. 提高代码复用性   ​ 1. CSS的选择器(三种) 一,基本选择器(三种) 1.ID选择器          …

转载请说明出处,小编博客地址:http://blog.csdn.net/u012116457 最近本来想去写一个类似论坛的页面,论坛首页一般都需要一个表格去显示数据,自己简单的写了一下,先上一张图 css代码: /*基本信息*/ body{ margin:0px; /*外边距*/ text-align:left; /*文字居中对齐*/ font-family: 'trebuchet MS', 'Lucida sans', Arial; font-size: 14px; background:#E…

支持chrome FireFox 和 IE10+,(IE9也能显示,IE9以下不支持) <style type="text/css"> body{position:relative;} #login{position:relative;width:500px;margin:0 auto;box-shadow:2px 0px 10px rgba(0,0,0,0.5);border-radius:16px;} .login-bg{position:absolute;width:…

1.BEM引入背景 因为项目的业务逻辑发生重大变化,所以原来大半年的开发周期里做的事情基本上变成无用功.但是公司的项目上线时间依旧没有改变.剩下的时间只有区区的两个月,要做的功能是有社区+电商+核心业务的网站,着实是非常的紧张. 所以为了在有限的时间里面能够完成,甚至于保质保量的完成项目的开发.正所谓非常时期,非常方法.我们必须要高效的完成设计稿到页面输出的这个过程,这时候SASS和一些模板引擎(我们使用的jade)配合自动化构建工具(gulp)就展示出了他们和传统html配合css所不同的强力…

哎哎 1.鼠标移进网页里,不见了= = *{ cursor: none!important; } 2.简单的文字模糊效果 *{ color: transparent; text-shadow: #111 0 0 5px; } 3.多重边框 .div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0,…

项目需求 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=""> 要求制作上图所看到的的效果,能达到灵活可配的效果. 我想初步想法是用div+css来制作. --------------------------------------------------------…

首先Monyer还是有必要提一句:这是一篇低中等难度的文章.如果你是高手或被认为是高手,那么请pass掉这篇文章:如果你是新手,甚至不知道什么是css(譬如百度模版)等,那么请pass掉这篇文章.谢谢合作! 在网上有告诉你CSS是什么.HTML是什么.JS是什么.XML是什么之类的文章,并且多如牛毛.但是他们一般都没有具体告诉你,它们之中的任意一个或几个结合起来用会是什么或什么效果(请注意:我所指的是它们具体说是以一种什么样的方式结合,并不一定是结合的新产物新名词).所以出于这种目的,Monye…

CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. <style> #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 80%; height: 100px; overflow: scroll; border: 1px solid #ccc; } </style> <div id="overflowTest"&g…

边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来定义边框的样式 border-style的值 代码演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc…

CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法. 1.static 定位 HTML 元素的默认值,即没有定位,遵循正常的文档流对象. 静态定位的元素不会受到 top, bottom, left, right影响.…

1.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘. 元素通过指定宽度,并将两边的空外边距平均分配: .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 注意: 如果没有设置 width 属性(或者设置 100%),居中对齐将不起作用. 2.文本居中对齐 如果仅仅是为了文本在元素内居中对齐,可以使用…

一.CSS 伪元素 CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.class:pseudo-element {property:value;} 1.:first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式. 在下面的例子中,浏览器会根据 "first-line" 伪元素中的样式对…

在之前的这篇文章 -- 一行 CSS 代码的魅力 中,我们介绍了一种使用一行 CSS 代码就能够生成的一种美妙(也许奇怪更合适)的背景. 本文,将继续介绍背景的一些有意思的知识,利用一些极小的单位,只需要短短几行代码,就能够产生出美妙而又有意思的背景效果~ 数量级对背景图形的影响 本文的主角主要是: 多重径向渐变(repeating-radial-gradient) 多重角向渐变(repeating-conic-gradient) 什么是数量级对背景图形呢?我们来看这样一种有意思的现象: 我们使…