css - 随笔分类 - 00fairy00

摘要：http://blog.jnecw.com/?p=524 阅读全文

posted @ 2012-12-07 15:21 00fairy00 阅读(208) 评论(0) 推荐(0)

摘要：http://fed.renren.com/wp-content/uploads/2012/11/%E4%BA%BA%E4%BA%BAFED-CSS%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83.pdf通用约定 http://docs.kissyui.com/docs/html/tutorials/styleguide/common-conventions.html html规范 http://docs.kissyui.com/docs/html/tutorials/styleguide/html-coding-style.html css规范 http:/... 阅读全文

posted @ 2012-11-28 10:57 00fairy00 阅读(214) 评论(0) 推荐(0)

【NO.67】转让IE6支持图片半透明

摘要：众所周知，透明格式的PNG24在IE6透明部分将会被灰色替代。那么，到底有什么方法可以解决这个bug？解决方法：①用PNG8格式图片替代PNG24格式的图片用fireworks导出Alpha模式的PNG8格式的图片，Alpha模式的PNG8格式图片支持半透明，在IE6下全透明以及半透明部分会显示成全透明，并且会存在锯齿。如果对用户体验影响不是很大的话，可以考虑一下用这个方法。②CSS滤镜在应用了透明PNG图片的选择器里面加上一下代码：_background: transparent;_filter: progid:DXImageTransform.Microsoft.AlphaImageL 阅读全文

posted @ 2012-08-10 14:38 00fairy00 阅读(214) 评论(0) 推荐(0)

【转】当inline-block和text-indent遇到IE6,IE7

摘要：在实际应用中，考虑到seo，很多button，icon都要用到inline-block和text-indent来处理，例如：<a href="#" class="btn">Button</a>css我习惯写成这样.btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;background-image:url(img.jpg);}在标准浏览器下是没问题的，但是在IE6和7下会触发A标签消失的bug。解决方法1：display:inline-bl 阅读全文

posted @ 2012-03-31 10:15 00fairy00 阅读(331) 评论(0) 推荐(0)

NO.64 【转】瀑布流布局浅析

摘要：转载地址：http://ued.taobao.com/blog/2011/09/14/waterfall/简介如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如Pinterest(貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 —瀑布流式布局阅读全文

posted @ 2011-09-20 10:47 00fairy00 阅读(371) 评论(0) 推荐(0)

NO.63 点击弹出遮罩层，层可以拖动，select可以挡住

摘要：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 阅读全文

posted @ 2011-08-04 13:39 00fairy00 阅读(674) 评论(0) 推荐(0)

NO.62 让带圆角的button自适应宽度

摘要：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 阅读全文

posted @ 2011-08-03 16:12 00fairy00 阅读(932) 评论(0) 推荐(0)

NO.61 CSS实现半透明效果实现及兼容性

摘要：网页半透明效果经常在一些很酷网站中用到，虽然说现在还没有被纳入W3C标准中，但对于CSSer们还是很热捧的。从网上收集并整理了一下以后备用。1. 旧的Opacity设置以下代码是Firefox和Safari旧版本所需的透明度设置:复制内容到剪贴板代码:#ceng { -khtml-opacity:0.5;-moz-opacity: 0.5; }-khtml-opacity设置是针对旧版本的Webkit渲染引擎，这种专用属性现在已经过时了，除非你还有需要兼容Safari 1.x.的用户。-moz-opacity是为了兼容Mozilla渲染引擎的早期版本，以及追溯到Netscape Navigat 阅读全文

posted @ 2011-07-13 16:49 00fairy00 阅读(9714) 评论(0) 推荐(1)

NO。59 图片嵌入文字并且居中

摘要：类似这样的效果，左右是两段文字，但是中间的图片是嵌入居中的1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2<htmlxmlns="http://www.w3.org/1999/xhtml">3<head>4<metahttp-equiv="Content-Type"content=" 阅读全文

posted @ 2011-05-12 10:14 00fairy00 阅读(428) 评论(0) 推荐(0)

NO。58 新浪微博顶部新评论提示层效果——position：fixed

摘要：这个层的效果用position：fixed实现的很好，但是就是很纠结的ie6有问题我今天试自己是这样实现的，但是ie6中滚动条滚动的时候会不停的抖动，不知道怎么是好<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><meta 阅读全文

posted @ 2011-05-11 16:43 00fairy00 阅读(434) 评论(0) 推荐(0)

NO.57 clearfix

摘要：关于清除浮动的方法，我最开始喜欢加个空的div然后加上央视clear：both;这样后来我用伪类:after进行后续空制的高度为零的伪类层清除页码代码如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp 阅读全文

posted @ 2011-05-05 14:56 00fairy00 阅读(649) 评论(0) 推荐(1)

NO.56 【转】Efficient, maintainable CSS

摘要：http://www.slideshare.net/maxdesign/efficient-maintainable-css-presentation中文翻译：http://isd.tencent.com/?p=1605 阅读全文

posted @ 2011-05-05 11:14 00fairy00 阅读(272) 评论(0) 推荐(0)

NO.55 网页中压缩的问题

摘要：以前写页面的时候，我从来没有关心过我写出来的html的大小的问题，我切的图片的大小问题，我之前觉得只要能做到和设计一样切出来页面来，能兼容浏览器就ok这几天发现自己在这方面还是很多需要注意的首先，换了新工作现在还在熟悉阶段，试着切了个页面切完后，我的html页面的大小居然有50多k，但是别人的是我的一半。。。经过指点，发现了我切文件的问题：1.我切页面的时候喜欢用很多标签并且习惯的给每个标签都加上一个class，不说很多我写了class但是并没有定义样式，就很多是没有必要写那么多class的，比如一个容器中是不同的元素的话，不用每个都加个class的，直接用外容器的class和标签来定义cla 阅读全文

posted @ 2011-04-14 10:25 00fairy00 阅读(287) 评论(0) 推荐(1)

NO.53 关于z-index

摘要：首先概括一下自己的最近感觉自己好久没有好好的工作了，一直动荡着现在终于又可以安定下来工作和学习啦！~又换了一份新工作，是自己比较感兴趣的公司，是适合自己的职位，公司的氛围神马的也很好，希望自己能够在里面好好的发展下去！~~现在在公司属于BA部，发现自己要学习的东西还有很多很多噢！~好了，再来写这个z-index最近做页面的时候。发现了个问题，就是关于z-index的以前呢我只晓得z-index就是用来设置层叠顺序的但是我自己忽略了很重要的一点就是他适用于定位元素（position 属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为阅读全文

posted @ 2011-04-10 19:24 00fairy00 阅读(255) 评论(0) 推荐(0)

NO.52 不确定高度的图片在div内垂直居中

摘要：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 阅读全文

posted @ 2011-03-07 17:31 00fairy00 阅读(624) 评论(0) 推荐(0)

NO.47 【转】纯CSS选项卡

摘要：实质就是一个切换卡，关键是如何让鼠标从按钮移到面板上时，面板不会消失。用到div:hover与CSS3圆角。<div class="main_console"><div class="main_column"><div class="column_title">AAAAA</div><div class="main_panel_wraper"><div class="main_panel">AAAA的面板</div></div></div><div class="main_colu 阅读全文

posted @ 2011-02-17 17:00 00fairy00 阅读(321) 评论(0) 推荐(0)

NO.46 【转】RMB符号的几种显示方式。

摘要：传统的方式:1 ，直接使用 ” ￥ ”2，使用 ” & #65509 ;”淘宝新的方式：使用 font-family:Arial; + & yen ; 符号。代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 阅读全文

posted @ 2011-01-24 15:28 00fairy00 阅读(410) 评论(0) 推荐(0)

NO.45 文字超出显示省略号后面小图标紧跟文字后面【2】

摘要：今天看到一个用css就可以实现这个效果的方法代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"htmlxmlns="http://www.w3.org/1999/xhtml"headmetahttp-equiv= 阅读全文

posted @ 2011-01-17 17:34 00fairy00 阅读(706) 评论(0) 推荐(0)

NO.28 滚动条滚动层固定位置不变

摘要：当页面有滚动条时候，如果在顶部有一个层，我们希望那个层始终都在那个位置不随滚动条滚动可以用以下方法实现代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transit... 阅读全文

posted @ 2010-01-11 16:18 00fairy00 阅读(759) 评论(0) 推荐(0)

NO.24 关于左侧div固定宽度，右侧自适应时footer不能在最底部的问题

摘要：当用position:absolute;来完成左边div固定宽度，右边div百分百自适应的时候，如果左边div的高度比右边div的高，就会出现footer被挤上来这是因为position:absolute;是不占位的，所以footer是贴着右边div的下边的，如下图：我用了2种方法来解决此问题：1.用js来控制首先用js获取左边div的高度，然后设定content为此高度，footer就自觉的下... 阅读全文

posted @ 2009-12-23 10:31 00fairy00 阅读(1878) 评论(0) 推荐(0)

随笔分类 - css