Category Archives: HTML & CSS

图片垂直居中

Posted on 2009年06月1日 by Bell

    未知大小的图片在已知大小的容器中垂直居中,这是网站设计中经常涉及到的效果,实现的方法很多,这里介绍一种非常简单的方法.     先来看看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失效的原因与解决办法[转]

Posted on 2009年05月22日 by Bell

经常会遇到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)

Posted on 2009年05月9日 by Bell

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 →

Posted in HTML & CSS1 views | Tagged | Leave a comment

文字垂直居中

Posted on 2009年04月6日 by Bell

    “文字垂直居中”这个算是老话题,网上也有很多解决方式,我这里就介绍一种较为简单的实现方法. 具体来说应该有两种情况: 1.单行文字     这种情况比较好处理,直接设置与height相等的line-height就OK,或者使用padding. 2.多行文字在已知高度的容器里垂直居中     曾经用table布局的时候要达到这个效果非常容易,但现在就需要费点心思:     对于标准的浏览器只需添加display:table-cell; vertical-align:middle;就可以实现,目前IE8已支持这种写法,但IE6 IE7还是不不行.     针对IE6,IE7我们需要改变下结构,这里是增加了<i>和<p>两个容器,其中<i>的宽度设为0,高度设为100%,这就形成一条看不见的线,并设为内联元素使得vertical-align:middle;生效,用zoom:1;触发IE的layout,配合<p>的weight:100%和vertical-align:middle;最终实现了文字的垂直居中,看看效果:

Posted in HTML & CSS1 views | 2 Comments

ietester-v0.3.1 (IE5.5-IE8)

Posted on 2009年03月23日 by Bell

    ietester一直是我比较喜欢的软件,随着IE8的发布ietester已经更新到0.3.1,新版本IE8内核更新到RC1,并且新增了一些实用功能,如页面缩放,多屏预览,debug插件等.如果你是网页设计师而且要兼顾各浏览器的兼容问题,那么ietester一定是你需要的!

Posted in HTML & CSS, Software1 views | Tagged | Leave a comment
Pages: Prev 1 2 3 4 5 6 7 8 Next