随笔分类 -  DIV+CSS

在网上找到一个CSS hack列表，记录在这里以分析css的浏览器兼容性
摘要：另外摘抄一份目前的css浏览器兼容问题汇总，记录在这里自己好好学习一下CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 2.... 阅读全文
posted @ 2012-05-15 15:29 CobbySung 阅读(277) 评论(0) 推荐(1)
<div>设置宽度，汉字正常换行，输入字母/数字不换行的解决方案分析
摘要：我们经常需要“修复”一个老生常谈的“bug”，那就是文本的自动换行问题。在专业术语上，这种期望得到的渲染现象被称作“word wrap”，即文本处理器有能力把超出页边的整个词自动传到下一行。在现实项目中，尤其是在测试阶段，鉴于测试使用非常极端的测试用例，我们经常需要“修复”如图所示的这个问题：长单词溢出图中，极长的这个英文单词（虽然是生造的）为了保证完整的显示，无奈地超出了容器的限制，它溢出了。为了“修复”这个“问题”，使得无论东亚还是西欧文字都能被限定在容器的尺寸范围内，我们一般会加上诸如word-wrap: break-word;word-break: break-all;这样的属性，令我 阅读全文
posted @ 2012-05-14 11:08 CobbySung 阅读(2789) 评论(0) 推荐(1)
CSS疑难杂症
摘要：一、让IE6支持PNG透明一个IE6的Bug引起了大麻烦, 他不支持透明的PNG图片。你需要使用一个css滤镜*html #image-style {background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png", sizingMethod="scale");}二、移除超链接的虚线FireFox下,当你点击一个超链接时会在外围出现一个虚线轮廓. 这很容易解决, 只需要在标签样式中加入：a{outline: none;}三 阅读全文
posted @ 2012-05-13 19:23 CobbySung 阅读(338) 评论(0) 推荐(0)
CSS设置div透明度-FF3.5+ 已不支持-moz-opacity
摘要：让div 透明，兼容IE FFtransparent_class{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;}filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;在里说得很清楚了：Note: Firefox 3.5 and later do not support -moz-opacity. By now, you should be using simply opacity.现在都要改用opa 阅读全文
posted @ 2012-05-13 19:11 CobbySung 阅读(378) 评论(0) 推荐(0)
瀑布流布局浅析 转自淘宝UED
摘要：简介如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如Pinterest(貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 —瀑布流式布局。几种实现方式随着越来越多设计师爱用这种布局，我们作为前端，要尽可能满足视觉/交互设计师的需求。所以，我们 阅读全文
posted @ 2012-05-12 11:16 CobbySung 阅读(1036) 评论(0) 推荐(0)
解决IE6的PNG透明JS插件 DD_belatedPNG
摘要：IE6的PNG透明是个老问题了，最近有朋友问我有没有最好的解决这个问题的插件。虽然知道且在用DD_belatedPNG这个插件，今天抽空把这个发上来。虽然之前在博客里发过一款jquery的png插件，但是不支持背景平铺。DD_belatedPNG使用了微软的VML语言对PNG图片进行重新绘制，以达到半透明的效果，并且能支持background-position和background-repeat属性，支持伪类。是一款不错的值得推荐的插件，用法也比较简单。使用方法：123456<!--[if IE 6]><script src="DD_belatedPNG.js&qu 阅读全文
posted @ 2012-05-11 12:45 CobbySung 阅读(5336) 评论(2) 推荐(2)
CSS万能闭合代码
摘要：.clearfix:after{content:".";display:block;height:0;line-height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}/* Hide from IE Mac */.clearfix{display:block;}/* End hide from IE Mac *//* end of clearfix */例子：<div style="border:2px solid red;"> <div style= 阅读全文
posted @ 2012-05-10 15:15 CobbySung 阅读(502) 评论(0) 推荐(0)
10个CSS简写技巧让你永远受用
摘要：CSS简写就是指将多行的CSS属性声明化成一行，又称为CSS代码优化。CSS简写的最大好处就是能够显著减少CSS文件的大小，其实还有很多其他益处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候，你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。 今天，暴风彬彬整理了一些CSS简写技巧，它们其实是CSS最常用的写法，但是太多的人使用Dreamweaver这种所见即所得软件来编写CSS，使得代码过于臃肿。不过没关系，看过本文之后，你一能能掌握CSS代码优化的技巧，今后让你的每一个CSS样式表都看起来整洁而简短吧。属性值为0书写原则是如果CSS属性值为0，. 阅读全文
posted @ 2012-05-10 15:01 CobbySung 阅读(247) 评论(0) 推荐(0)
padding-bottom，margin-bottom，overflow实现高度自适应
摘要：如下图，右侧高度自适应DOM结构：<div id="main"> <div id="left"></div> <div id="right"></div></div>把left，right的背景设置为最大：padding-bottom: 5000px;margin-bottom: -5000px;在设置一个背景即可看到效果然后通过设置main的 overflow:hidden 隐藏不需要的区域<!DOCTYPE html PUBLIC "-//W3 阅读全文
posted @ 2012-05-10 13:17 CobbySung 阅读(1018) 评论(0) 推荐(0)
双飞翼布局（圣杯布局）介绍-始于淘宝UED
摘要：仔细分析各种布局的技术实现，可以发现下面三种技术被经常使用：浮动 float负边距 negative margin相对定位 relative position这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。尝试之路考虑以下DOM结构：<div id="page"> <div id="hd"></div> <div id="bd"> <div class="main"></div> <div 阅读全文
posted @ 2012-05-09 15:07 CobbySung 阅读(4103) 评论(1) 推荐(0)