随笔分类 -  CSS

CSS3 Animation
摘要：谁来支持它?4.04.05.010.012.0Hello World!Hello World!把鼠标移到Hello World上上例中的关键代码：View Code @-webkit-keyframes resize { 0% { padding: 0; } 50% { padding: 0 20px; background-color:rgba(255,0,0,0.2); } 100% { padding: 0 100px; background-color:rgba(255,0,0,0.9); }}@-moz-keyframes resize { ... 阅读全文
posted @ 2012-11-05 21:42 moonreplace 阅读(541) 评论(0) 推荐(0)
IE6下a标签absolute定位后，不能点击的问题
摘要：问题描述：在下面的图中，我想把这个"立即购买“是用”a"标签block后，加上absolut，在现代浏览器下没有问题，在IE6,7下问题来了，不能点击。尝试：1. 加上z-index,把它设置的很高（无用）。2. 把a标签内加入内容（无用）解决方案：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta h 阅读全文
posted @ 2012-10-28 19:59 moonreplace 阅读(596) 评论(0) 推荐(0)
CSS3--transition
摘要：它可以用来做什么？CSS transitions可以让一个css属性值在一个给定的时间内平滑的改变，而不再是和以前一样，当我们设置一个css属性值时，它会立即表现出来结果，如color: red, 当我们设置完这个属性，如果是应用在span上，那么span内的文字立即会变成红色。而我们如果用到transition,那么这个值就会在一定时间内，假设以前是黑色，就会由黑色逐渐变成红色，而不再是立即变成红色。谁支持它？如何用它？transition: <property><duration><animation type><delay>webkit:- 阅读全文
posted @ 2012-10-19 16:51 moonreplace 阅读(330) 评论(0) 推荐(0)
jsbin.com一个非常好的在线调试JS,CSS工具网站
摘要：如果我就想调试一个JS功能，就想实验一个css函数，就想做一个小例子，我不用从<!DOCTYPE>开始写吧，如果你以前这么做了那是你不知道有这个网站：初识：我想这个够清晰明了的了吧，你可以在html中输入你想要的html代码，如果你想调试css, js可以在相应的框中输入你想要的东西。惊艳：我想要用到某个库怎么办，我还需要去下，然后把它们放到本地吗？或者是去找google CDN, jquery cdn....点击Add Libiray有你想要的吗？贤惠：如果我想要把我写的这段代码分享出去怎么办你还在等什么，试一下呗? 阅读全文
posted @ 2012-09-05 16:50 moonreplace 阅读(694) 评论(0) 推荐(0)
如何让浏览器来辨识你的CSS
摘要：问题描述：当我们提到做浏览器兼容时（主要是IE和现代浏览器），可能你的脑海中首先想到的是用hack来兼容各个浏览器，但是请注意尽量不要用行内的hack,如果你用了，不知道你有没有想到过，当你的css有几千行时，而你为了找寻一个IE6 bug时，你会多么的痛苦，所以要合理使用hack.解决方案：1. 利用IE提供给我们的条件判断语句来区分IE和其他的浏览器,以及他自身的各个版本，请看如下代码：<link rel="stylesheet" href="all.css" /><!--[if gt IE 7]> IE7以上版本可识别 &l 阅读全文
posted @ 2012-09-05 16:20 moonreplace 阅读(653) 评论(0) 推荐(0)
解决IE6中背景图片不缓存的问题
摘要：问题描述:我们发现在IE6下当鼠标mouseover一个元素时，会发现抖一下，即突然消失又突然出现，而在别的browser下是好的。那我们首先应该想当的是检查当前元素是不是应用了背景图片，如果用到了，那么就应该考虑如下：很有可能是因为IE6不缓存背景图片所导致的bug.例如: button{background:url(buy.jpg);}解决方案：我们可以在页面中加入如下script来解决这个问题:document.execCommand("BackgroundImageCache",false,true);如上代码告诉浏览器，如果本地存在背景图片的时候，就不要麻烦服务器 阅读全文
posted @ 2012-09-05 14:47 moonreplace 阅读(364) 评论(0) 推荐(0)
用Float还是Inline-Block
摘要：如何让块元素能够像行元素一样的显示，我相信这是前端人员经常碰到的问题，如我们的流模式布局，就是以此为基础，Float我们首先应该搞清楚一件事，那就是对于浮动元素来讲，为什么会有浮动这种方式。最初的概念是为了text-wrapping。创意的来源是让一个block元素例如一张图片，把它设为居左或者是居右，同时让文字环绕它。尽管我们把float非常多的用在别处，尽管它是一种非常有效的方式来显示整个document的所有element.但是这也是一种对原先动机的扩展应用。不过对于这些扩展应用，我们应当采取一些预防措施，来确保我们的页面将会显示正常的显示。主要的显示问题是，当我们浮动一个元素时，它的父 阅读全文
posted @ 2012-07-20 18:09 moonreplace 阅读(696) 评论(0) 推荐(0)