CSS: calc()
可以在css中计算单位值，比如 a{width:calc(100% - 20px);} 切记计算符号两边要有空格 http://caniuse.com/calc ... read more
最近写的两个CSS3图标
<p>原本是老师布置的作业里的素材，强迫症犯了忍受不了图片，于是都写成CSS的了</p> .footer-button{margin:30px;display:block;height:47px;width:195px;background: #1db5de;position:relative; background: -webkit-linear-gradient(#21bfe6,#1070aa); background: -moz-linear-gradient(#21bfe6,#1070aa); background: -o-linear-gradient(#21bfe6,#1070aa); background: linear-gradient(#21bfe6,#1070aa); border-radius:10px; } .footer-button:hover{opacity: 0.9;box-shadow: 0 0 2px #333 ... read more
简单loading动画
没事闲的做了一个简单的loading动画 js就几行，却出了问题。。chrome下成功，但在Firefox下怎么改都显示不出来。。 提示window.event is not defined，在网上搜到了解决办法。原来FF跟不支持IE的JS标准，chrome却跟IE混的，太没节操了。 代码不支持IE因为这个动画是CSS3的。 DEMO:Loading Demo HTML: CSS: #loading{ display:none; width:70px; position:fixed; top:50%; left:50%; margin-left:-40px; } .blockG{ background-color:#FFFFFF; border:3px solid #8896fa; float:left; height:50px; margin-left:7px; width:10px; opacity:0. ... read more
CSS选择器
1、元素选择器 这是最基本的CSS选择器，HTML文档中的元素本身就是一个选择器： p {line-height:1.5em; margin-bottom:1em;} 2、关系选择器 E F：后代选择器，该选择器定位元素E的后代中所有元素F： ul li {margin-bottom:0.5em;} E > F：子选择器，该选择器定位元素E的直接子元素中的所有元素F，它将忽略任何进一步的嵌套： ul > li {list-style:none;} //仅限ul的直接子元素li，如果li里面还嵌套着另一个 ul 结构时，最里面的 li 将被忽略 E + F：相邻兄弟选择器，该选择器定位与元素E具有相同父元素且在标记中紧邻E的元素F： li + li {border-top:1px solid #ddd;} //定位具有相同父元素ul里除第一个li之外的所有li ... read more
chrome中自定义页面滚动条
找到chrome的本体CSS文件： WIN：用户目录\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css MAC：用户目录/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css UBUNTU：~/.config/chromium/Default/User\ StyleSheets/Custom.css 在里面添加webkit的CSS就行了，比如我用的是 ::-webkit-scrollbar { width: 8px; } /*控制宽度*/ ::-webkit-scrollbar-track-piece { background-color: #ffffff; } /*整条颜色*/ ::-webkit-scrollbar-thumb{ height: 50px; background-color: #8896FA; } /*滑块颜色， ... read more