风格切换:
  • 鬼域
  • 深蓝
  • 雪色
  • 夏天

现在位置:主页 » 博客
分类: Div+css |
预览模式: 普通 | 列表

<div style="width:222px;height:58px;background:url(/common/images/logo.png)!important;background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale,src='/common/images/logo.png');">
</div>

查看更多...

Tags: png IE6

分类:Div+css | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 75
每个浏览器都有自己的默认样式,这是一段预定义的CSS,用以简单地呈现网页。在Firefox中的地址栏中输入resource://gre/res/html.css即可以看到该浏览器的默认样式。在Firebug 1.2 Alphas的styles中就可以看到默认样式对页面定义样式的影响。毫无疑问,理解和学习浏览器的默认样式能更好的理解浏览器对解析样式和呈现页面。Firefox3和Firefox2相比,默认样式仅有8处不同,但这些改变也可以让我们感觉到Firefox3在样式上的改进:
程序代码 程序代码

@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */

/* bidi */

查看更多...

分类:Div+css | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 127
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

查看更多...

Tags: DIV

分类:Div+css | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 132
例子:CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a>

pointer也是手型,这里推荐使用这种,因为这可以在多种浏览器下使用。
例子:CSS鼠标手型效果 <a href="#" style="cursor:pointer">CSS鼠标手型效果</a>

查看更多...

Tags: CSS

分类:Div+css | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 139
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

查看更多...

Tags: DIV CSS input

分类:Div+css | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 142
1.css在不同浏览器下显示效果不同
firefox和IE对某些css样式的认定有不少区别,包括:

ul和ol的默认padding值是不一样的,在Firefox中,padding-left默认值为40px左右,而IE中为0,一般设置ul{margin:0;padding:0;}就能解决大部分问题对字体大小small的定义不同,Firefox中为13px,而IE中为16px,差别挺大,也只能设置为14px了事;(暂时没有发现)并列排列的多个元素(图片或者链接)的代码中的空格和回车会造成元素之间的间隙,而在firefox中和在IE中显示是不一样的,IE显示空格(约8px)、firefox显示空格(约4px)对不规范代码的兼容情况不同,IE中漏掉的关闭符号对显示不造成影响,而firefox中就会形成错乱的布局,而在ie中用到的padding和margin的负值都会被firefox解析为0,易造成布局的混乱;(我觉得好像负值在firefox中也是有显示的)firefox对于长高尺寸的严格解析会造成与设置不匹配(超出)的图片或表格将原设置div撑大!important属性可以在除IE浏览器的其他浏览器中起作用,因此有人利用这种差别来令一个CSS兼容多种浏览器;未定义id的div,在IE中会与div属性中的其他设置有关,而在firefox中的位置会于div在文件中位置有关,紧随前一个div出现设置为float的div在ie下设置的margin会加倍的,特别是margin-left,这是ie6的一个bug。解决的方法是在这个div里面加上display:inline;如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会在FF中可以实现的div 垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行。这种方法在IE中实现不了。(已试过!有用)FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行在浮动(float)的div后加clear属性,这可以解决背景的自适应高度问题。FF中不支持文字的自动转行;如:word-wrap:break-word;word-break:break-all。(现在看到的解决办法都是通过编程实现)

查看更多...

Tags: DIV CSS FF 兼容性

分类:Div+css | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 96
自从我用了VISTA及WINDOWS 7之后就开始用IE7/8内核的浏览器,遨游2啊,360啊,等等,由于离IE6的环境比较远了,即使安装了IEtester也不能保证完全兼容,况且,我作为一个设计师,系统里还集成了大量的美术字体。

这次从“微软雅黑”说起。

前面一段时间忙着照顾小孩和换工作,生活忙乱不堪,整理作品案例也是相当的粗糙,简历更新之后,响应者也有限,感觉有些奇怪?从流量分析力发现了一个过去忽略的问题——IE6下的兼容性。

查看更多...

Tags: IE6 字体 错位 line-height

分类:Div+css | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 721
网页颜色变黑白代码
国务院决定,为表达全国各族人民对青海玉树地震遇难同胞的深切哀悼,2010年4月21日举行全国哀悼活动,全国和驻外使领馆下半旗志哀,停止公共娱乐活动。
1、为方便站点哀悼,特提供css滤镜代码,以表哀悼。以下为全站CSS代码。

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

查看更多...

Tags: CSS

分类:Div+css | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 271
垂直居中一直让我是比较苦恼的问题,css的vertical-align属性在浏览器中均无法正常工作。而在表格的布局中,表格的valign属性却一直很管用。在此,我们将尝试在不破坏浮动布局的情况下,使用相对定位来建立距对象上边高度为50%进行定位设计。
特别要看下这段代码:

#out[id]{ display:table; position:static;}
#mid[id]{ display:table-cell; vertical-align:middle; position:static;}

查看更多...

Tags: 居中 兼容 FF IE

分类:Div+css | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 268
  IE6不支持png,支持gif透明,IE6的png不透明可以用JavaScript,或css滤镜,或htc文件解决,这个以前就知道,也用过js解决过png问题,没有遇到什么麻烦,可是今天,遇到复杂的png背景,遇到了很大的麻烦,不过也学到了很多,不得不记下来。
我们要制作一个背景随时间变换的页面,页面上文字按钮等不变,所以这些文字按钮等必须背景透明,因为页面背景图片都是复杂的整图,有实色背景实在不好看。另一方面,由于页面button按钮有水晶效果和羽化效果,所以用gif肯定使图片失去原来的质感和美感。所以必须得用png背景。
我不清楚他们(同事,该页面开始不是我做的)用的是哪个是png透明的方法,但是他们的方法要使IE6下png背景透明background图片不能简写,即background:url("xx.png") no-repeat top right失效,需写成background-image:url("xx.png"); background-repeat:no-repent;...;确实,png透明了,但是但是,background-position却没有作用,一般的图,一张图,直接定义个大小,设个背景图片就ok了。但是我们遇到的情况比较特殊,所有的按钮都是在一张图上的,这个不能用background-position定位,效果是根本不能实现的。怎么该都没有用。他们是遇到了这样的问题。
我也调试了很久,确实搞不定。于是决定调整思路,不能用background-position定位,我在想,可否使用绝对定位,然后像flash一样遮罩一下,只显示那块区域。网上找方法时看到了一个标签clip,正好上星期研究了一下clip的剪裁,觉得可以用这个解决定位的问题。于是构思了一下,写了如下的代码:
<style type="text/css">

查看更多...

Tags: DIV png

分类:Div+css | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 344