加载CDN文件时，可以省掉HTTP标识现在很流行的CDN即从专门的服务器加载一些通用的JS和CSS文件，出于安全考虑有的CDN服务器使用HTTPS方式连接，而有的是传统的HTTP，其实我们在使用时可以忽略掉这个，将它从URL中省去。 <script src="//domain.com/path/to/script.js"></script> 这一点在之前一篇译文博客《jQuery编程最佳实践》中也有提到。 利用script标签保存任意信息将script标签设置为type='text'然后可以在里面保存任意信息，之后可以在JavaScript代码中很方便地获取。 <script type="text" id="template"> <h1>This won't display</h1></script>
var text = document.getElementById('template').innerHTMLCSS篇关于CSS的恶作剧相信你看完以下代码后能够预料到会出现什么效果。 *{ cursor: none!important;}
简单的文字模糊效果以下两行简单的CSS3代码可达到将文字模糊化处理的目的，出来的效果有点像使用PS的滤镜，so cool! p { color: transparent; text-shadow: #111 0 0 5px;}
垂直居中有好多次博主都有这样的需求，垂直居中显示某个DIV，我们知道CSS中天然有水平居中的样式text-align:center。唯独这个垂直居中无解。 当然你可以将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现，但此种实现往往会因为display：table而破坏整体布局，那还不如直接用table标签了呢。 下面这个样式利用了translate来巧妙实现了垂直居中样式，需IE9+。 .center-vertical { position: relative; top: 50%; transform: translateY(-50%);}相比而言，水平居中要简单得多，像上面提到的text-align:center，经常用到的技巧还有margin:0 auto。但对于margin大法也只在子元素宽度小于容器宽度时管用，当子元素宽度大于容器宽度时此法失效。 如法炮制，利用left和transform同样可实现水平居中，不过意义不大，毕竟text-align和margin差不多满足需求了。 .center-horizontal { position: relative; left: 50%; transform: translateX(-50%); }
多重边框利用重复指定box-shadow来达到多个边框的效果 /*CSS Border with Box-Shadow Example*/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, 0, 0, 0.2); height: 200px; margin: 50px auto; width: 400px}
实时编辑CSS通过设置style标签的display:block样式可以让页面的style标签显示出来，并且加上contentEditable属性后可以让样式成为可编辑状态，更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。 <!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>
创建长宽比固定的元素通过设置父级窗口的padding-bottom可以达到让容器保持一定的长度比的目的，这在响应式页面设计中比较有用，能够保持元素不变形。 <div style="width: 100%; position: relative; padding-bottom: 20%;"> <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;"> this content will have a constant aspect ratio that varies based on the width. </div></div> |
