随笔分类 - css
摘要:今天,群里有人问道font-size 2 3 4 5 JS Bin 6 7 8 Font Size 16px 9 Font Size 15px 10 Font Size 14px 11 Font Size 13px 12 Font Size 12px 13 ...
阅读全文
摘要:1.为什么不能创建1px的容器?这个真没关注过,面试的一道题。回来一查,原因是ie6有默认的行高,网上说是用overflow:hidden|zoom:0.08|line-height:1px,经过测试发现就是overflow:hidden是好用的2.为什么连接点击过后hover不起作用了?这个是因为顺序错了,没有按照LoVe HAte顺序写3.怎么样让input[type=file]兼容各浏览器?之前专门写过一篇blog是讲他的实现问题的,突然问起来理论不知道该怎么解释。现在归纳一下:因为各浏览器对它的渲染不同,所以采用一种统一的假象,就是让真的input[type=file]透明,也就是..
阅读全文
摘要:今天遇到一个有阴影的背景图,而且这个图里面的内容还是不定高的,也就是纵向可以根据内容的多少自由伸缩。以前做是通过一个空标签放图,也 用过三张图拼的,所以这次就想可不可以只用一张图就搞定呢。为此,做了一个demo,看代码: 第一种方法:这是常用的布局思路,top middle bottom 1 <div class="test_top"></div> 2 <div class="test_center"> 3 <div><label for="">look me</lab
阅读全文
摘要:以前也遇到过,每次遇到每次犯怵,可是总是没有当回事,好好总结一下,今天看了为之哥的文章,特别总结一下。 radio和checkbox最让人头疼的就是他们跟后面的文本怎么能够居中显示呢?而且还兼容各浏览器?一个方法就是用vertical-align调整,一个就是用float解决。 在处理前有点很重要的就是重置radio和checkbox样式,原因就是不同浏览器解析不一样,有些默认margin,有些是默认padding,还有ie6,7连margin和padding即使设置为0后,所占的空间还是比较大,所以还是有必须重置下,一下就能解决很多麻烦 1 <form id="demo1&q
阅读全文
摘要:一样看了新浪,但是结果就不一样,我就没有那个嗅觉去做一下,去看看它是如何实现的,什么时候才能成为本能思考呢?下面这是转载的:http://www.daqianduan.com/css-a-line/,补充一下:因为下面都没有html结构,还有他的效果我也没有能看到(点击查看实例展示没有看到效果),所以我 自己根据理解补了一下,如果要是有什么不对的话,还请大家指正。单个标签实现分隔线:<div class="demo_line_01"></div>1 .demo_line_01{2 padding: 0 20px 0;3 margin: 20px 0;
阅读全文
摘要:我们常常用text-indent的负值隐藏文本,他也一直很好用,但是今天当他与float偶遇,他把持不住啦,直接不起作用啦,为啥不知道,反正用了一个font-size:0;line-height:0;overflow:hidden就好啦。这个从ie6-9,再到ff都ok
阅读全文
摘要:css2.0对权重描述的并不是很清楚,但是在CSS2.1里W3C已经对CSS的权重有了明确的规定。Media type and element matchImportance and origin in ascending order of importance (confusingly):user agent style sheetsuser normal style sheetsauthor normal style sheetsauthor important style sheetsuser important style sheetsSpecificitySource order .
阅读全文
摘要:今天问了一个问题:border是算在width里面还是外面,我说是里面,然后他又接着引申了一下问题:如果border很大,而且元素有背景色,那背景色是在border里还是外面?又问,如果元素有背景图,那背景图平铺的话,会在border里面还是外面?接着问,如果背景图不平铺的话,会在border里面还是外面?我让这一连串的问题问晕了,然后就挨个试验,试验是检验真理保证嘛! 试验结果发现好神奇,如果有背景色的话,背景色会在border外面消失;如果有背景图平铺的话,背景图会在border外面消失;如果有背景图不平铺的话,背景图会在border里面就消失。而且,还发现background-col..
阅读全文
摘要:昨天切页面的时候遇到了传说中的经典————ie6经典bug弹出框盖不住select。以前只是有所耳闻,但是未曾谋面,昨天有幸见到真面目!! 我昨天试过网上的很多方法,有的说是用iframe把select包住,有的说是把iframe放在弹出层的下面,有的说是把iframe放在弹出层的里面,这些我都试过啦,但是有的效果是实现啦,但是很勉强,因为iframe是盖住select啦,而select也消失的没了。这个让我很郁闷,不知道为什么。。。。今天早上来啦,头脑清醒的解决啦。我就把原来的width:100%,height:100%换成弹出层的具体宽高数值,就好啦,盖住select的同时,select.
阅读全文
摘要:这个跟上一篇是同一类,但是有点不同,那个是边框+小气泡三角,这个是渐变背景+小气泡三角,而且我还换了一个实现手法。 1 .down_tip{position:relative;width:300px;height:50px; 2 background: #f9d835; /* Old browsers */ 3 /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 4 background: url(data:image/svg+xml;base64,PD94bWwgdm...
阅读全文
摘要:以前遇到textarea上面有小三角气泡,总是把小三角气泡单独切下来,然后再绝对定位上去。今天,切页面我就换了一个方法,用纯css上! 其实原理很简单:就是让两个小三角叠起来,上面的小三角往一侧错一下位,就刚好露出下面小三角的边,为此上下三角的颜色是不同的,而且需要上面的小三角盖住下面的三角。所以,上面的小三角为白色,下面的小三角是你想要的边框颜色。也就是border-color不同。为了能达到这个效果,要求两个小三角要一样大小,也就是border-width要一样。 下面直接上代码:1 /*右侧气泡 兼容firefox chrome safari ie6,7,8,9*/2 .right_..
阅读全文
摘要:以前我切页面时,遇到页面上需要关闭操作的小叉,一般都是用图片上的,没有犹豫过。今天切的时候又学了一招,不再用图片,不用css拼,而是直接打上去! 要想打上去需要输入法切换到全角模式,然后打出上学时做数学运算的乘号‘×’,看到了吧这个就是你的关闭按钮咯。然后因为他比较细,所以呢,我们把他的font-weight:bold加粗一下就完全ok啦。呵呵,试试吧!
阅读全文
摘要:昨天接到一个页面:做邮件静态页面,我觉得很简单啊,几分钟的事。可是,一问主管才知道,并不是如我所想的那么容易。因为邮件系统为了防止接受垃圾邮件,会自动过滤掉很多内容。所以要避免你的邮件不被过滤成垃圾邮件,就必须要抛弃现有的div+css手法,回到html4.0的table时代,这意味着很多样式属性不能使用。一时间搞的我不知所措啦,好在有好多人帮我。好啦,不扯了,直奔主题。以下内容是通过本人上网查找资料和大家帮忙后整理出来的经验小总结:1.放弃div+css布局,全部改用table套table布局2.放弃页面内部样式以及外部样式,也就是head部分的style和link,全面改为行内样式,而且.
阅读全文

浙公网安备 33010602011771号