Category Archives: HTML & CSS

边缘标签:sup

Posted on 2010年01月12日 by Bell

<sup>是用来定义上标文本的标签,平常很少用到,基本上属于边缘标签.不过今天在项目中遇到,在调试过程中发现这小子比较难伺候,这里模拟了个简单的代码环境: < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>temp</title> <style type="text/css" media="all"> * { margin:0; padding:0; font:12px/1.5 Arial, Helvetica, sans-serif;} body{ background:url(images/grid.png) no-repeat;} .sup-tm{ width:300px; margin:20px; border:1px solid #ff6600; line-height:20px; … Continue reading →

Posted in HTML & CSS1,570 views | Tagged | 2 Comments

[转] 深入CSS行高

Posted on 2009年11月23日 by Bell

Line Height (中文版) View more documents from bigCat Mao. 转自 http://webteam.tencent.com/?p=1503 翻译自 Russ Weakley 的Line Height

Posted in HTML & CSS1,017 views | Leave a comment

IE6下实现png图片半透明的常用方法

Posted on 2009年11月13日 by Bell

IE6是个”神奇”的浏览器,其原因想必做前端的同行们都深有体会,:)作为我个人而言,最反感的就是IE6不支持除A以外的hover伪类,再一个就是它不支持png图片的alpha透明度.当然此类问题已有众多的解决方案,这里只是总结下自己常用的IE6下实现png半透明的方法以及适用环境. 1.使用滤镜,适用于单一png背景图片的快速部署;弊端:消耗资源比较多,方法比较繁琐. < !DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ie6下png透明-iinterest</title> <style type="text/css"> *{margin:0; padding:0;} .box{ width:958px; height:512px; background:url(http://image215.poco.cn/mypoco/myphoto/20091114/16/51737245200911141635177073974043057_000.jpg) no-repeat; } .png-bg{width:341px; height:258px; margin:60px auto 0; background:url(http://www.iinterest.net/wp-content/uploads/2009/11/windows.png) no-repeat; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://www.iinterest.net/wp-content/uploads/2009/11/windows.png’); _background-image:none; } </style> </head> <body> <div class="box"> <div … Continue reading →

Posted in HTML & CSS2,001 views | Tagged , | 3 Comments

用CSS打造图片以及文字的阴影效果

Posted on 2009年11月6日 by Bell

阴影效果是在设计中比较常见的,它可以增强页面的立体感,给用户带来更高的视觉体验,常规的制作方式是用图片来完成,而这里就介绍几种CSS方法来实现阴影效果. 简单的图片阴影 先来看看效果: < !DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS阴影</title> <style type="text/css"> *{ margin:0; padding:0;} .box-shadow{ float:left; margin:30px; background:#f4f4f4;} .box-shadow img{ display:block; position:relative; top:-5px; left:-5px; padding:5px; border:1px solid #d7d7d7; background:#fff;} </style> </head> <body> <div class="box-shadow"><a href="#"><img src="http://www.google.cn/images/nav_logo7.png"/></a></div> … Continue reading →

Posted in HTML & CSS1 views | 2 Comments

针对IE8的HACK

Posted on 2009年11月3日 by Bell

前段时间费了好大的劲才弄了个伪IE8 hack(关于IE8的HACK)…最近发现原来IE8是存在私有hack的,真悲剧… background:#ff6600\0; /*IE8 hack*/ 测试: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS阴影</title> <style type="text/css"> div{ width:100px; height:100px; background:#f1f1f1; background:#ff6600\0;} </style> </head> <body> <div>这个盒子的背景在IE8下是橙色的</div> </body> </html> 提示：你可以先修改部分代码再运行。

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