搜索
分类
- HTML & CSS (50)
- Javascript (13)
- jQuery (14)
- Photoshop (4)
- Software (18)
- Talk about interest (11)
- UE (7)
- WebApp (3)
- Wordpress (11)
-
近期文章
文章
标签云
HTML5相关
在线工具
功能
-
Category Archives: HTML & CSS
纯CSS跨浏览器的多列等高(2)
昨天转了篇多列等高的文章:Equal Height Columns with Cross-Browser CSS and No Hacks(译:纯 CSS 无 Hack 跨浏览器的多列等高),虽然介绍的方法实现起来比较复杂,但Matthew James Taylor的创新思维还是值得学习,借助作者的思路,自己写了个比较简化的例子. 先来看看实例:(兼容IE6-8,FF,OPERA等主流的浏览器)
[翻译]纯 CSS 无 Hack 跨浏览器的多列等高
原文：Equal Height Columns with Cross-Browser CSS and No Hacks 作者：Matthew James Taylor 翻译：ytzong 纯 CSS 打造多列等高并不像想象中那么容易。本文着重讲述多列布局出现的问题，之后提供一个在所有浏览器都正常工作的简单解决方案。这个方法 100% 无 CSS hack，无图片，无 javascript，甚至可以用在最严格编码的网站上。 多列等高的问题
图片垂直居中
未知大小的图片在已知大小的容器中垂直居中,这是网站设计中经常涉及到的效果,实现的方法很多,这里介绍一种非常简单的方法. 先来看看demo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>iinterest-图片垂直居中</title> <style type="text/css"> *{ margin:0; padding:0;} .imgbox{ width:400px; height:400px; margin:30px; border:1px solid #ddd; text-align:center; line-height:400px;} .imgbox img{ vertical-align:middle;} *html .imgbox{ … Continue reading
Posted in HTML & CSS1 views
Leave a comment
Firefox margin-top失效的原因与解决办法[转]
经常会遇到Firefox下 margin-top这失效的问题,但一直都是用变通的方式去解决,今天在网上查了查,有所收获,转帖备忘. 在这个说明中，“collapsing margins”（折叠margin）的意思是：2个或以上盒模型之间（关系可以是相邻或嵌套）相邻的margin属性（这之间不能有非空内容、padding区域、border边框或使用清除分离方法）结合表示为一个单独的margin。 在css2.1中，水平的margin不会被折叠。 垂直margin可能在一些盒模型中被折叠： 1、在常规文档流中，2个或以上的块级盒模型相邻的垂直margin会被折叠。 最终的margin值计算方法如下： a、全部都为正值，取最大者； b、不全是正值，则都取绝对值，然后用正值减去最大值； c、没有正值，则都取绝对值，然后用0减去最大值。 注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。 2、相邻的和模型中，如果其中的一个是浮动的（floated），垂直margin不会被折叠，甚至一个浮动的盒模型和它的子元素之间也是这样。 3、设置了overflow属性的元素和它的子元素之间的margin不会被折叠（overflow取值为visible除外）。
Posted in HTML & CSS1 views
Leave a comment
Hack:区分IE6/IE7/IE8/FF的一些常用的方法(1)
CSS Hack法:写在样式表文件或HTML文档中,运用浏览器的HACK来达到解析不同样式表的目的~注意书写的顺序. .selector{ color:#ff0000; /* 所有浏览器 */ color:#ff66009; /* 所有IE浏览器 */ +color:#0044dd; /* IE7 */ _color:#000; /* IE6 */ } 看看演示: < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>iinterest-hack</title> <style … Continue reading
