07 2011 档案
摘要：前一段时间曾经遇到过内层margin-top bug的问题，当时没有找到具体原因，只能用父层的padding-top属性来解决。代码如下：<div>上部层</div><div> <!--父层--><div style="margin-top:200px;">子层</div></div>理想中的效果是父层和上部层贴边显示，子层距离父层顶部有200px的距离，在ie中正常，但是在ff中却出现问题，子层和父层贴边了，而父层和上部层却间隔了200px。百思不得其解，求助google，得到如下的一句：
阅读全文
摘要：今天遇见一个bug，在ie下，input设置一个背景图片如下图：如果输入的文字长度小于文本框长度，则正常如果里面输入的文字长度大于文本框的长度，则出现这种现象那个小放大镜移出去了不知道这个问题在不改变页面结构的前提下使用css能否解决。。。
阅读全文
摘要：今天闲着蛋疼 随便修几个三角形<div class="top"></div><div class="left"></div><div class="right"></div><div class="down"></div><style type="text/css">.top,.left,.right,.down{ width:0; height:0; line-height:0;/*解决
阅读全文
摘要：<style type="text/css"><!--.div1{ width:200px;}.div1 span{ white-space:nowrap; text-overflow:ellipsis; *text-overflow:ellipsis; /* for ie6 ie7 */ overflow:hidden; width:168px; display:block; float:left;}html>body .div1:after{/* for FF chrome ie8+*/ content: "..."; mar
阅读全文
摘要：/*打开网页源代码，若你想实现网页以垂直百叶窗的方式打开，可以在源代码的〈head〉与〈/head〉之间加入如下语句*/〈meta http-equiv="Page-Enter" content="RevealTrans (Duration=3, Transition=8)"〉/***************“Duration”的值为网页动态过渡的时间，单位为秒，一般设为3~5秒即可。“Transition”不同的值对应不同的过渡方式，共有24种方式可供选择： 0 盒状收缩 1 盒状放射2 圆形收缩3 圆形放射4 由下往上5 由上往下6 从左至右7 从右
阅读全文
摘要：之前的做法是：input,select,textarea{outline:0;}现在可以这么写：：focus{outline:0}
阅读全文
摘要：<html><head><title>Text Up side down</title><style type="text/css">.txtUpsideDown{ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE6,IE7 */ ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; /* IE8 */ -moz-t
阅读全文
摘要：每次点击超链接的时候会有一个虚线框 挺烦人的 所以搞个让他消失代码首先是FF只需要加上一个属性就可以了 outline：none； 这样在ff里边就不显示了再次就是IEie里边就没有css属性可控制了， 那怎们办那 其实可以在html控件上加一个属性 hidefocus=“true”；好了 你可以测试下<a hideFocus="true" style= "outline:none;" alt= "ooxx" href= "#" >ooxx</a>
阅读全文
摘要：/***************************{CSS Reset}*****************************/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, cen
阅读全文
摘要：.clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden;}.clearfix { zoom: 1;}
阅读全文
摘要：<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>三列自适应等高且中列宽度自适应</title><style type="text/css">a { color:#333; text-decoration:none;}.wrap { overflow:hidden;}.left { width:240p
阅读全文
摘要：<!doctype html><html><head><title>纯CSS实现“三角形箭头”布局的代码</title><meta http-equiv="Content-Type" content="text/html; charset=gbk"/></head><body><div style="padding: 40px; background:#fff;"> <div style="position: r
阅读全文
摘要：<div id="container">离世界末日还有 <span id="downtime" style="color:red"></span></div><script>function downTime(){var timeout = window.setTimeout(downTime, 100);var endTime=new Date("12-21-2011 0:0:0");//改成你的计时日期var today=new Date();var
阅读全文
摘要：http://css3please.com/
阅读全文
摘要：http://www.cascader.co/
阅读全文
摘要：CurvyCorners是一个为HTML元素创建漂亮的圆角的免费JavaScript库，它的最大优势是可以在Safari/Chrome/Firefox中使用原生的CSS3属性(通过-webkit-border-radius和-moz-border-radius私有属性分别支持)而在IE和Opera中使用JavaScript实现圆角。CurvyCorners的下载地址是http://www.curvycorners.net/，使用方法如下：js代码：<script type="text/JavaScript" src="curvycorners.src.js&
阅读全文
摘要：<style type="text/css"> .wrap{position:relative;} .btns{zoom:1;} .btns *{outline:0;zoom:1;background:#f2f2f2;} .btns button::-moz-focus-inner{border-color:transparent!important;} </style>
阅读全文
摘要：String.prototype.trim = function(){ return this.replace(/(^s*)|(s*$)/g, "");}
阅读全文
摘要：function hasClass(ele,cls) { var result = ele && ele.className && (ele.className.search(new RegExp('(\\s|^)'+cls+'(\\s|$)')) != -1); return !!result; } function addClass(ele,cls) { if (!hasClass(ele,cls) && ele && ele.className) ele.className += "
阅读全文
摘要：p{ letter-spacing:1px; word-spacing:2px; line-height:1.7em; text-indent:2em; text-align:justify;}
阅读全文
posted @ 2011-07-13 14:09
拉登不开心
浙公网安备 33010602011771号