css
白鼠闹东京
这个作者很懒,什么都没留下…
展开
-
另类方法解决IE6不支持fixed
本来想做一个对联广告,奈何网上的js方案都很晃眼。如果IE6的fixed可以生效的话,就不必要那么麻烦了。这里的广告只需要使用css即可。/*防止在IE6中抖动*/html{ _background:#fff url(about:blank) no-repeat fixed 0 0;}/*这个就是对联的div了*/#leftCouplet { position:fixe原创 2013-01-22 10:45:48 · 519 阅读 · 0 评论 -
RGBA与半透明背景
概念所谓RGBA颜色,就是RGB三原色加ALPHA。在给背景添加颜色的同时,提供透明度特性。 使用方法background:rgba(90,90, 54, 0.5);支持情况Firefox 3.0.5支持Safari支持Google Chrome支持IE原创 2014-12-22 11:06:41 · 8426 阅读 · 1 评论 -
纯代码无图片Tips实现过程
前些日子,用百度的时候发现了一个tips效果,感觉不错,就手残的按了F12,看了一下实现过程,刚开始的时候发现很神奇,即没使用图片,也没使用“◇”符号,当然也没有css3的元素。先看下效果:查看并不停的尝试,终于知道怎么实现的了首先是最重要的实现部分:.arrows { position:absolute; display:block; width:0; height原创 2015-04-13 13:32:19 · 996 阅读 · 0 评论 -
表示颜色的英语单词(图)
LightPink 浅粉红 这是LightPink颜色████Pink 粉红 这是Pink颜色████Crimson 猩红 这是Crimson颜色████LavenderBlush 脸红的淡紫色 这是LavenderBlush颜色████PaleVioletRed 苍白的紫罗兰红色 这是PaleVioletRed颜色████HotPink 热情的粉红 这是HotPink颜色████DeepPink转载 2015-04-26 16:33:54 · 10893 阅读 · 1 评论 -
margin-top导致子标签绑架父标签问题
现象:当两个空的块级元素嵌套时,如果内部的块设置有margin-top属性,而且父元素没有下边解决方法所述的特征,那么内部块的margin-top属性会绑架父元素(即将margin-top传递凌驾给了父元素)。就好比一个小兵,看到上级有漏洞,就假传圣旨,利用漏洞扩张自己的权利。只要设置父元素的border(栅栏)或者padding(隔离墙),就能管住这个调皮的下属。 #pa转载 2015-04-27 13:47:06 · 628 阅读 · 0 评论 -
抽奖项目总结
js快速开发包,首次应用于项目,大大的提高了开发效率,从此再也不怕弹层和分页一类的事情了,很多东西都简单化了,还是要利用空闲时间完善。本次开发中location.href把我折腾死了,在利用location来实现reload的时候还是有很多东西需要注意的,比如”#”,在链接中被认为是锚点去跳转的,也就是实际上并没有跳转。在使用js与as交互时,还是有很多东西需要注意的。swfobject的作用,除原创 2015-06-01 09:52:25 · 1121 阅读 · 0 评论 -
IE中使用滤镜实现透明度,影响到absolute的负值
在父标签中使用滤镜filter:progid:DXImageTransform.Microsoft.gradient后,absolute的top,left,right,bottom的负值会被剪裁。原创 2015-06-02 09:01:17 · 410 阅读 · 0 评论 -
CSS单行省略号
css.eli {width:300px;height:30px;line-height:30px;overflow:hidden;text-overflow:ellipsis}html<div class="eli"><nobr>发生的发生大发生发生大发生的范德萨范德萨发大水发生的发的所发生的的飞洒发生的发送到飞洒地方第三方水电费是的发送到发顺丰</nobr></div>记得以前实现没这么简单的,原创 2015-06-23 13:39:10 · 505 阅读 · 0 评论 -
应用before/after伪类时如何CSS命名以及针对ie6/ie7浏览器兼容
一、诉说前言 before/after伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪类应用相当的普及以及兴盛,不过貌似我们这边前端er们普遍缺乏使用这两个伪类的意识,要使用顶多也就是跟风的“清除浮动”应用。 我想,这可能受兼容性思维影响——IE6/7浏览器并不支持,还是等什么时候转载 2015-06-24 14:55:17 · 3654 阅读 · 0 评论 -
IE6中margin-bottom为负值时失效
为什么要用负值就不多说了,反正重复的使用原创 2014-08-26 14:10:12 · 1377 阅读 · 0 评论 -
a标签position为absolute时,IE无法点击(a position:absolute bug ie)
为什么要把a标签搞为absolute呢?很多时候为了覆盖在其他html标签上,实现一些点击,比如一个flash广告,要想在整个flash上加一个链接,单击整块flash链接到某个网页。 用一个绝对定位的a标签覆盖在flash上:转载 2014-07-10 14:38:22 · 915 阅读 · 0 评论 -
打造IE6的position:fixed整理篇
fixed真的是一个很好的属性。特别是做弹层的时候。可惜的是“国内主流浏览器”IE6大大不支持。一般的我们都会通过CSS中的表达式来解决这个问题。.fixed { position:absolute; left:expression(eval(document.documentElement.scrollLeft)); top:expression(eval(document.doc原创 2014-04-30 15:57:06 · 936 阅读 · 0 评论 -
IE6/7之<div>标签嵌套img元素垂直加4px , li 中包含浮动元素, IE下有间距
img在IE6和IE7中导致父层DIV高度多了4px* {margin:0px;padding:0px;}#banner{border:1px solid #000000;} 以上这段程序在IE6和IE7中div#banner的实际offsetHeight值为128,在IE8、Firefox和Opera中div#banner的实际高度为132转载 2013-03-11 12:50:23 · 2678 阅读 · 0 评论 -
关于 IE6 中绝对定位(position:absolute)中的left和bottom属性失效
解决方法是:触发layout。1:设置宽度或高度(使用left和bottom),来触发layout2:设置zoom:1,来触发layout原创 2013-03-29 10:20:01 · 1499 阅读 · 0 评论 -
解决:margin-top导致内容在IE6中下沉
父标签中加入:position:relative原创 2013-03-21 13:12:02 · 735 阅读 · 0 评论 -
CSS大美集(关于细节)
细节1………………………………………………………………………………一、当文字与图片在一行,需要将文字与图片底对齐,需要这样写:记住密码二、当文字与图片在一行,需要将文字与图片居中对齐,需要这样写:记住密码三、更改IE“查看源代码”菜单打开的编辑器打开注册表编辑器,在开始-运行中输入regedit找到以下位置: HKEY_LOCAL_MACHINE转载 2013-04-15 14:45:02 · 681 阅读 · 0 评论 -
float后导致IE6中左右的border消失-解决方案
为容器定义一个背景颜色把容器的高度设置成100%原创 2013-05-31 18:35:43 · 635 阅读 · 0 评论 -
a标签中正确的使用text-indent
关于a标签中正确的使用text-indent,注意表明overflow:hidden;否则虚线框会让你很难堪的。。原创 2013-06-28 15:19:47 · 1379 阅读 · 0 评论 -
当inline-block遇到text-indent,IE67生气了
恩!!我们都知道,IE67本身是不支持inline-block的。而是通过zoom来触发元素的layout。然后显示inline属性。平时一直这样用着不存在任何问题。但如果要使用text-indent时,IE67真的生气了。IE67不是真正的inline-block,所以将text-indent传递给了它爹(父元素)。造成了怪异模式。木有办法,只能放弃text-indent,你懂得。这个时原创 2013-08-06 12:59:55 · 557 阅读 · 0 评论 -
关于Html无宽度居中
body{font-size: 12px;background: ;} ul{margin: 0;padding: 0;list-style: none; clear:both; position: relative;float:left; left: 50% } li{float: left;display: inline;position: relative转载 2013-08-06 13:53:37 · 733 阅读 · 0 评论 -
jQuery修改css before中的content值及scale的妙用
原始的CSS.c:before {display:block;font-size:12px;content:" ";-webkit-transform:scale(.7);}jQuery修改值$("head").append('<style>.c:before {content:"hello world"}</style>');-webkit-transform:scale(.7) 真是个好东西啊,原创 2016-06-28 22:10:33 · 7907 阅读 · 0 评论