先展示一下我的头像吧. 作为一个前端ER,我的头像当然不能是绘画工具画出来的.没错,这个玩意是由HTML+CSS代码实现的,过年的某一天晚上无聊花了一个小时敲出来的.来看看它原本的样子: 为什么会变成第一张图的样子呢.那个呆萌的线条猫其实是IE的杰作. 下面贴出源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3绘制机器猫头像</titl…
纯CSS代码加上 制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS.代码,来做一个动画版的哆啦A梦. 效果图: 下面代码同学可以查看一下,每个线条及椭圆都是纯CSS代码生成. 首先分析结构 根据原图,将哆啦A梦分为几个结构,然后再分解其他部位. 画出各部分的形状和颜色,然后使用绝对定位(absolute)和相对定位(relative)改变其位置. 各种带弧度形状,使用border-radius属性实现. 倾斜角度,使用transform属性实现.…
首先,说明,此处只是告诫各位参与CSS3.0学习使用或者将要使用或者学习CSS3.0的朋友,不要完全信任网络资源,依靠网络资源,我们需要利用网络资源的方便和可取的部分,结合自己的理解,学好,理解好! 当然,个人不敢妄加评论网络牛人,只是秉着一份真诚的心,抱着学习的态度看待问题,大牛们,你们怎么看! 之前浏览器之家有报道过日本牛人编写的一个浏览器对CSS3支持的哆啦A梦演示.在该演示中,IE全灭,甚至可以说是惨不忍睹.Chrome支持得相当完美. 实际上,不管Firefox也好,IE也好,浏览器都…
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可以查看一下,每个线条及椭圆都是纯CSS代码生成. 首先分析结构 根据原图,将哆啦A梦分为几个结构,然后再分解其他部位. 画出各部分的形状和颜色,然后使用绝对定位(absolute)和相对定位(relative)改变其位置. 各种带弧度形状,使用border-radius属性实现. 倾斜角度,使用transfo…
话说某年某月某日,后台系统需要重构,当时公司还没有专业前端,由我负责前台页面框架搭建,做过后台系统的都知道,传统的管理系统大部分都是列表界面和编辑界面.列表界面又由表格和搜索框组成, 对于全部都是输入框的搜索条件开发起来很简单,用户体验上却差很多.开始了漫漫寻找寻插件之路,最终无果.一言不合决定参考互联网风格的筛选条件自己动手仿造一款插件. 最终filterMore诞生了,源代码已开源至GitHub:https://github.com/CrazyJson/filterMore 阅读目录 插件介…
DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对网页开发布局方式的统称,但是DIV+CSS3作为网页的基础开发这句话其实并不严谨,因为而div只是HTML的一个比较重要的元素而已,而标准的叫法应是HTML+CSS,我们要比较的其实是html+css3和html5+css3在布局开发到底有什么不同! 以前的我们用html+css主要大部分是做PC端网页的基础部分开发,绝大部分业务逻辑和代码量在服务器端,前端只收到服务器端动态生成的HT…
Emmet的HTML语法(敲代码的快捷方式)   版权声明:本文为网上转载.   所有操作按下“tab”键即可瞬间完成 元素 1.在编辑器中输入元素名称,即可自动补全生成 HTML 标签,即使不是标准的 HTML 标签. 2.输入:! 或者 html:5 或者 html:4s 或者 html:4t 将自动补全html基本结构 嵌套操作 1.使用“>”生成子元素 // 输入 div>ul>li // 按下TAB键 <div> <ul> <li></…
积极主动敲代码,使用JUnit学习Java 早起看到周筠老师在知乎的回答软件专业成绩很好但是实际能力很差怎么办?,很有感触. 从读大学算起,我敲过不下100本程序设计图书的代码,我的学习经验带来我的程序设计教学方法是:程序设计入门,最有效的方法要积极主动敲代码.这也就是为什么我要求同学们把教材上的代码动手敲一遍的原因. 引用一下徐宥的例子: 记得<The TeXbook>上有一个程序,Knuth让大家自己照着敲入计算机,然后还很幽默地说,实验证明,只有很少的人会按照他说的敲入这个程序,而这部分…
div+css3实现漂亮的多彩标签云,鼠标移动会有动画 点击运行效果 <style> .dict { margin: 20px 0;clear:both ;text-align:left;font-size:12px;} .dict a { line-height: 24px; height: 24px; display: inline-block; background: #fff; padding: 3px 11px; margin: 10px 5px 0 0; border-radius…
Alcatraz 是一款 Xcode的插件管理工具,可以用来管理XCode的 插件.模版以及颜色配置的工具. 关于Alcatraz的安装,这里有一篇不错的博文,请参考安装:http://www.cnblogs.com/wendingding/p/4964661.html 最近有一款插件叫ActivatePowerMode,堪称装逼神器啊,敲代码的时候,炫彩的火花尾巴效果简直屌炸天~,详情可以看XActivatePowerMode在github中的介绍https://github.com/qfis…