08 2011 档案

刚刚用CSS写了一个按钮，感觉不错，拿出来显摆一下(附截图)...
摘要：a{ display: inline-block; position: relative; width: 100px; border-width:15px 0; border-style:solid; color: #fff; text-decoration: none; } a:lin... 阅读全文
posted @ 2011-08-24 21:45 拉登不开心 阅读(693) 评论(1) 推荐(0)
刚刚用CSS写了一个按钮，感觉不错，拿出来显摆一下...
摘要：a{ display: inline-block; position: relative; width: 100px; border-width:15px 0; border-style:solid; color: #fff; text-decoration: none;}a:link, a:visited{ border-top-color: #333; border-bottom-color: #222;}a:hover, a:active{ border-top-color: #222; border-bottom-col... 阅读全文
posted @ 2011-08-22 00:05 拉登不开心 阅读(604) 评论(3) 推荐(0)
制作 Facebook 风格的网页按钮（无需图片）
摘要：<!-- Created by Barrett at RRPowered.com --><!-- File name facebook.html --><html><head><title>FaceBook style buttons</title><link rel="stylesheet" type="text/css" href="facebook.css"></link></head><body><h1 阅读全文
posted @ 2011-08-20 16:16 拉登不开心 阅读(375) 评论(0) 推荐(0)
css hack
摘要：.sofish { padding:10px; padding:9px\9; /* all ie */ padding:8px\0; /* ie8-9 目前应用于IE8的单独hack，情况比较少 */ *padding:5px; /* ie6-7 */ +padding:7px; /* ie7 */ _padding:6px; /* ie6 */}/* webkit and opera */@media all and (min-width: 0px){ .sofish{padding:11px;} }/* webkit */@media screen and (-webkit-min-dev 阅读全文
posted @ 2011-08-11 17:21 拉登不开心 阅读(175) 评论(0) 推荐(0)
给你一个惊喜！
摘要：把下面这段代码复制到你的页面上，会有一个惊喜！<style> html { filter: fliph; /* for ie */ } body { transform: rotateY(180deg); /* css3 */ -moz-transform:skew(0deg, 180deg) scale(-1, 1); /* for ff */ -webkit-transform: rotateY(180deg); /* for chrome and safari */ -o-transform:skew(0deg, 180deg) scale(-1, 1); /* for op 阅读全文
posted @ 2011-08-11 16:44 拉登不开心 阅读(227) 评论(0) 推荐(0)
元素在IE6/7下换行的问题
摘要：这是一个奇怪的问题。最后一个li元素在IE6、IE7下换行了，其他的浏览器都是没有问题的。下面是此问题的截图及代码：主要css代码及demo：.wrap{width:960px; margin:0 auto;}.wrap ul{background-color:#FF0000; padding-left:200px; color:#FFFFFF;}.wrap ul li{float:left; padding:6px 30px;}开始以为是因为“溢出”产生的换行，就用firebug查看并计算了一下盒模型：最外层的.wrap 实际宽度是960pxul的内容宽度是760px(960-200)6个l 阅读全文
posted @ 2011-08-11 12:58 拉登不开心 阅读(268) 评论(0) 推荐(0)
Javascript陷阱
摘要：1.浮点运算这可能是挫败一些对javascript不熟悉并准备执行一些数学运算的人的主要原因. alert(0.02 / 0.1); //0.19999999999999998 alert(1.14 * 100); //113.99999999999999 ;) Math.round()就能在这里派上用场.2.加号操作符的重载"+"加号运算符即能做算术运算,又能够做字符串的连接.如果正确的使用它是很便利的.让我们看一看.var msg, one="1"; msg = 2 + "1"; // msg = "21" m 阅读全文
posted @ 2011-08-10 22:32 拉登不开心 阅读(279) 评论(0) 推荐(0)
今天发现一个区分IE和其他浏览器的一个新方法
摘要：以数字开头命名的id或者class，只有IE能识别，形如： #0page、.1header。以下环线开头命名的id或者class，唯有IE不能识别，形如： #_page、._header。 阅读全文
posted @ 2011-08-10 21:37 拉登不开心 阅读(200) 评论(0) 推荐(0)
跨浏览器的圆角
摘要：View Code <html><head><title>跨浏览器的圆角</title><style type="text/css">.test { width:560px; height:400px; background-color: #eee; padding:10px 8px 6px; border: 2px solid #C0C0C0; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius: 10px;}</style& 阅读全文
posted @ 2011-08-10 16:29 拉登不开心 阅读(248) 评论(4) 推荐(0)
CSS 实现图像预加载
摘要：#preloadedImages { width: 0px; height: 0px; display: inline; background-image: url(path/to/image1.png); background-image: url(path/to/image2.png); background-image: url(path/to/image3.png); background-image: url(path/to/image4.png); background-image: url();} 阅读全文
posted @ 2011-08-08 15:13 拉登不开心 阅读(253) 评论(0) 推荐(0)
5种要掌握的CSS3技术
摘要：View Code <!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <link href="style.css" rel="stylesheet" type="text/css" /> <title>An Introduction to CSS3; A Nettuts Tutori 阅读全文
posted @ 2011-08-08 14:53 拉登不开心 阅读(275) 评论(0) 推荐(0)
换行word-wrap与word-break兼容IE和FF
摘要：word-wrap是控制换行的。使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。word-break是控制是否断词的。normal是默认情况，英文单词不被拆开。break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）兼容 IE 和 FF 的换行 CSS 推荐样式最好的方式是word-wrap:break-word; overflow:h 阅读全文
posted @ 2011-08-08 14:36 拉登不开心 阅读(494) 评论(0) 推荐(1)
ASCII码对照表
摘要：ASCII码键盘ASCII 码键盘ASCII 码键盘ASCII 码键盘27ESC32SPACE33!34"35#36$37%38&39'40(41)42*43+44'45-46.47/48049150251352453554655756857958:59;60<61=62>63?64@65A66B67C68D69E70F71G72H73I74J75K76L77M78N79O80P81Q82R83S84T85U86V87W88X89Y90Z91[92\93]94^95_96`97a98b99c100d101e102f103g104h105i106j1 阅读全文
posted @ 2011-08-06 19:39 拉登不开心 阅读(217) 评论(0) 推荐(0)
SmartSprites 学习笔记
摘要：SmartSprites 可以让你很容易的使用 css sprites, 并且容易维护,你可以在 css 文件中插入一些标记和指令, 来指示某些图片是否放入 css sprites 图片里,SmartSprites 会解析你的css 文件去自动生成合成图, 并且生成需要的样式. 如果图片有修改，只需执行一下命令，新的sprite就又生成了。这样就可以大大的提高开发效率，维护起来也比较方便。快速引导：1.下载并且安装 jdk1.5 以上版本。2.下载SmartSprites http://csssprites.org/download.html?v0.2.6并解压到任意目录下。3.修改smart 阅读全文
posted @ 2011-08-04 19:41 拉登不开心 阅读(571) 评论(0) 推荐(0)
用HTML判断IE版本
摘要：View Code <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![endif]--><!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]--><!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]--><!--[if gt IE 5.0]> IE5.0以上版本都可以识别 <![endif]--><!--[if 阅读全文
posted @ 2011-08-02 19:10 拉登不开心 阅读(254) 评论(0) 推荐(0)
用JS判别浏览器种类以及IE版本的几种方法
摘要：var isIE=!!window.ActiveXObject;var isIE6=isIE&&!window.XMLHttpRequest;var isIE8=isIE&&!!document.documentMode;var isIE7=isIE&&!isIE6&&!isIE8;if (isIE){ if (isIE6){ alert("ie6"); }else if (isIE8){ alert("ie8"); }else if (isIE7){ alert("ie7&quo 阅读全文
posted @ 2011-08-02 18:59 拉登不开心 阅读(311) 评论(0) 推荐(0)