随笔分类 - HTML5/CSS
摘要：音乐分享： Broken Back - 《Halcyon Birds》 ———————————————————————————————————————————————————————————————————————————— 因为项目正在开发就不截图了 上代码： _stylus-base.styl
阅读全文
摘要：专题截图： 项目截图： 目录说明: dest/ 发布代码文件夹； src/ 预编译代码文件夹; node_modules node 插件; gulpfile.js gulp的配置文件; package.json npm 配置文件; src/待编译文件夹: c/ css文件目录; i/ img文件目录
阅读全文
摘要：github : https://github.com/uustoboy/base_mixins ( 有坑慎用 ) 项目截图: _base_mixins.scss 混合宏的引入文件; _setting_mixins.scss 设置默认参数文件; _template_mixins.scss 模板混合宏
阅读全文
摘要：资料： w3c : http://www.w3school.com.cn/html5/html_5_app_cache.asp quzishen : http://blog.csdn.net/quzishen/article/details/7319703 manifest文件： 1 CACHE M
阅读全文
摘要：demo截图: demo链接 代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>地图定位</title> 6 <style> 7 *,body,html{ margin:0;padd
阅读全文
摘要：参考资料： bootstrap：http://www.bootcss.com/ 汤姆大叔的博客： 《深入理解Bootstrap》http://item.jd.com/11462962.html 截图： 屏幕大于970px： 屏幕小于970px大于750px： ` 小于780px： 页面代码： 1 <
阅读全文
摘要：clip : http://www.w3school.com.cn/cssref/pr_pos_clip.asp 姜糖水 : http://www.cnphp6.com/archives/60496 Demo截图: Demo:Demo 上代码： 1 <!DOCTYPE html> 2 <html l
阅读全文
摘要：less less-base.less文件展示： 应用 index.less: 1 //引入底层库; 2 @import (reference) "less-base.less"; 3 4 //默认初始化; 5 .base(@content:1000); 6 7 /*方法*/ 8 .f12{ 9 .
阅读全文
摘要：less中文官网：http://lesscss.cn/ 、 http://www.bootcss.com/p/lesscss/ Busy 视频教程：http://www.imooc.com/learn/102 、 http://www.imooc.com/learn/61 ^_^肥仔John 入门文
阅读全文
摘要：参考资料： WEB骇客 : http://www.webhek.com/css-flip/ Demo : Demo (谷歌浏览器观看，没做兼容) Demo截图： 代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UT
阅读全文
摘要：Demo : Demo Demo截图： 代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ margin:0;paddi
阅读全文
摘要：参考资料： 张鑫旭 : http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B%BD%E4%B8%8E%E6%8B%96%E6%94%BE%E7%AE%80%E4%BB%8B/ ^_^肥仔John ： h
阅读全文
摘要：参考资料： 张鑫旭 ： http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ Demo : Demo (建议移动端看,因为用了Zepto.js) Demo截图： De
阅读全文
摘要：截图： Demo:Demo 上代码：. 有问题Demo : Demo 有问题的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0;
阅读全文
摘要：参考文章： w3c : http://www.w3.org/html/ig/zh/wiki/HTML5/history 张鑫旭 : http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate
阅读全文
摘要：参考资料： 奇舞团: http://www.75team.com/archives/851 DEMO：demo 截图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3钟表</title> <
阅读全文
摘要：Storage的解释 http://www.w3school.com.cn/html5/html_5_webstorage.asp 简单的理解就是： Storage 有两种： 1、localStorage 永久性存储客户端、除非你删除、修改否则不会消失，存储的体积为5M （《HTML5程序设计》讲其
阅读全文
摘要：Materliu 在慕课的视频: http://www.imooc.com/learn/364 、 http://www.imooc.com/wiki/371 sass入门:http://www.w3cplus.com/sassguide/ 个人先看了 《Sass与Compass实战》（Materl
阅读全文
摘要：个人觉得 web-font 分为两种： 第一种就是真正文本字体，客户端没有安装的字体通过远程加载字体来实现特殊字体提高用户体验； icodon.com : http://icodon.com/google-web-font.html（ 从 google 加载字体） iconfont ： http:/
阅读全文
摘要：之前一个前端群里 大牛 做了一个自适应的HMLT5播放器 最近根据其思路做了一个相对单一移动端的demo，demo用的图片和歌曲json的数据设计 都是群里大牛做的，在这谢谢~； 同时借鉴的几篇文章： 慕课网 ： http://www.imooc.com/view/299 （这个我也没看完....）
阅读全文
浙公网安备 33010602011771号