Category Archives: HTML & CSS

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 | 1 Comment

IETester让IE系浏览器共存

Posted on 2009年03月23日 by Bell

[2011.6.17]     IETester一直是我比较喜欢的软件,它能让各版本的IE浏览器共存，虽然对js脚本的支持不够好，但对前端而言还算一个调试兼容性的利器。 IETeste 官方网站

Posted in HTML & CSS, Software1 views | Tagged | Leave a comment

jQuery打造个性有序列表

Posted on 2009年02月11日 by Bell

当遇到有序列表的时候我们一般会用到ol+li这样的标签,因为除了符合语义外其默认样式就有序号标识,这样就免去了我们手动添加的麻烦,但由于浏览器兼容性问题(尤其是IE…)使它的实用性大打折扣,所以要实现有序列表更多的时候是用程序来解决,但通过jQuery我们完全可以在不改变现有结构的情况下打造一个个性化的有序列表. 先来看Demo 实现起来也很简单,看看第一个例子,首先是载入javascript代码 <script type=“text/javascript” src=“js/jquery-1.3.js”></script> <script type=“text/javascript”> $(document).ready(function(){ $(“#step li”).each(function (i) { i = i+1; $(this).addClass(“item”+i); }); </script>

Posted in HTML & CSS, jQuery1 views | 4 Comments

5个CSS3实用特性

Posted on 2009年01月5日 by Bell

虽然CSS3还没有普及,但其具有的新特新却是每个设计师梦寐以求的,下面我们就来看看5个非常实用的CSS3特性: 1.圆角矩形 目前我们想制作圆角矩形只能通过图片的方式来实现,但在CSS3中只需要一二句代码就OK了: .round{ -moz-border-radius:10px; -webkit-border-radius:10px; } border-radius:10px;就是圆角的半径为10px,数值越大,弧度越大. 从代码就很明显的看出IE不支持这个…-moz 对应火狐,-webkit 对应safari和chrome.

Posted in HTML & CSS1 views | Tagged , | Leave a comment
Pages: Prev 1 2 3 4 5 6 7 8 9 10 11 Next