2014年12月17日
英文单词断行问题：CSS中word-break、word-wrap以及hyphens的兼容性和区别
摘要： CSS中一提到单词断行，最先映入脑海的肯定是word-break和word-wrap这两条属性。但对于这两条属性到底有什么区别，兼容性如何，我一直都概念模糊。今天抽空把它们以及CSS3中新加入的断行属性之间的区别和作用理理清楚，做一下笔记。在英文段落中有时会碰到一些很长的单词，这些单词的长度超出容器... 阅读全文
posted @ 2014-12-17 15:59 zhishaofei3 阅读(2896) 评论(0) 推荐(0)
关于Apple设备私有的apple-touch-icon属性详解
摘要： 以前我们用过favicon在浏览器给网站进行身份标识，用法如下：[html]view plaincopy现今移动设备越来越多，苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏... 阅读全文
posted @ 2014-12-17 15:16 zhishaofei3 阅读(490) 评论(0) 推荐(0)
CSS3的REM设置字体大小
摘要： 在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是，仍然有不同的利弊，使各种技术都不太理想，... 阅读全文
posted @ 2014-12-17 14:37 zhishaofei3 阅读(103) 评论(0) 推荐(0)
2014年12月12日
js函数在线手册
摘要： http://www.hi-docs.com/Javascript.html 阅读全文
posted @ 2014-12-12 23:55 zhishaofei3 阅读(372) 评论(0) 推荐(0)
Chrome 控制台新玩法-console显示图片以及为文字加样式
摘要： 有兴趣的同学可以文章最后的代码复制贴到控制台玩玩。Go for Code在正常模式下，一般只能向console 控制台输出简单的文字信息。但为了把信息输出得更优雅更便于阅读，除了cosole.log()方法外还可以调用 cosole.warn() 来输出警告信息，在控制台中出来的效果如下：在输出信息... 阅读全文
posted @ 2014-12-12 23:47 zhishaofei3 阅读(373) 评论(0) 推荐(0)
HTML5 <details> 标签
摘要： HTML5 中新增的标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。用法一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jQuery手风琴插件差不多。其大致写法如下：1234567891011121314Google Nexus 6商品详情... 阅读全文
posted @ 2014-12-12 23:45 zhishaofei3 阅读(1484) 评论(0) 推荐(0)
CSS 魔法系列：纯 CSS 绘制三角形（各种角度）
摘要： Triangle Up1234567#triangle-up {width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-bottom:100pxsolidred;} Tri... 阅读全文
posted @ 2014-12-12 22:55 zhishaofei3 阅读(170) 评论(0) 推荐(0)
CSS与HTML5响应式图片
摘要： 随着Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的Retina屏幕显示依然清晰，曾经一度困扰着网页开发者，好在CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢？什么是响应式图片？响应式图片是指：用户代理根据输出设备的分辨率不同加载... 阅读全文
posted @ 2014-12-12 14:07 zhishaofei3 阅读(648) 评论(0) 推荐(0)
webkit内核浏览器的CSS写法
摘要： -webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明-webkit-user-select: none; 设置为无法选择文本-webkit-touch-callout: none; 长按时不触发系统的菜单, 可用在图片上加... 阅读全文
posted @ 2014-12-12 14:03 zhishaofei3 阅读(229) 评论(0) 推荐(0)
2014年12月11日
CSS中zoom和scale的区别
摘要： zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。运行 第一个测试中只设置了scale，... 阅读全文
posted @ 2014-12-11 09:52 zhishaofei3 阅读(313) 评论(0) 推荐(0)