齐博CMS利用HTML和CSS美化小能力

(某些环境下可以替代iframe)

<style>
.gb { overflow:auto; white-space:normal; height:100px; padding:3px;}
</style>
<div class="gb"></div>

  个中高度height和overflow是必需配置的!在IE下有的时候程度转动条会出来,可是事实上,程度转动条不没有实际的用途,貌似这个是IE的BUG,办理要领:

overflow-x: hidden

加上这个,把程度转动条埋没掉!

用css来实现三角形<style>
.t{
width:50px;
border-style:solid;
border-color:#a6a2f7 #fff;
border-width:50 50px 0px 50px;
</style>
<span class="t"></span>
用vml来画圆角<html xmlns:v>
<head>
<style>
v\:* {behavior: url(#default#VML);}
#lone {
width:200;
height:70px;
}
</style>
</head>
<body>
<v:RoundRect id="lone" strokecolor="#000" strokeweight="4px" arcsize="0.8" fillcolor="#ff0000">
<!--arcsize 弧度值 fillcolor 圆的填充色 strokecolor 圆的边框色 strokeweight 边框巨细-->
</body>
</html>

  IE下,当利用了FLOAT之后。用margin-left和margin-right会酿成用双倍的数值。例子:

margin-left:10px;

  实际的结果是20PX。办理的要领:1)用display:inline。2)用clear:float。要领1适应的范畴较量广一些。要领2的话,只适合那些可以排除浮动的元素。不能排除的,不能用。

  在mozilla firefox和IE中的BOX模子表明纷歧致导致相差2px办理要领:

div{margin:30px!important;margin:28px;}

  留意这两个margin的顺序必然不能写反,据阿捷的说法!important这个属性IE不能识别,但此外欣赏器可以识别。所以在IE下其实表明成这样:

div{maring:30px;margin:28px}

  反复界说的话凭据最后一个来执行,所以不行以只写margin:XXpx!important;。IE5和IE6的BOX表明纷歧致IE5下

div{width:300px;margin:0 10px 0 10px;}

  div的宽度会被表明为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他欣赏器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计较的。这时我们可以做如下修改:

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

  这个/**/是IE5和firefox都支持但IE6不支持。ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先界说。

ul{margin:0;padding:0;}

div+css机关用了float之后配景不能延伸的办理方案

<div style="clear: both; font-size: 0;"></div>

  原因:配景的自适应高度并不担任float的高度,配景会担任float底线地址容器中的位置高度,所以配景必然会找到最后一个标签去测定,这样我们在如上的标签,这个标签中什么也不放。也就是一个没有高度的空容器,这样它就可以把背影拉下来了。

  用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明结果

filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5; /* 支持CSS3的欣赏器(FF 1.5也支持)*/

  IE利用私有属性filter:alpha(opacity),Moz Family利用私有属性-moz-opacity,而尺度的属性是opacity(CSS 3, Moz Family部门支持CSS3)。后头的数值是透明度,利用百分比可能小数。

  未知巨细的图片在一个已知巨细容器中的程度和垂直居中。这个程度和垂直居中的例子能正常事情在IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape,为IE和非IE别离写了二套简朴的样式。

IE利用inline-blocks,非IE利用table-cell and vertical-align。

CSS

/* for non-IE browsers */
div.holder {width:750px; height:300px; background:#f8f8f8;
border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
}<!--[if IE]>
<style type="text/css">
/* vertical align for IE */
#edge {width:0; height:100%; display:inline-block; vertical-align:middle;}
#container {text-align:center; width:100%; display:inline-block; vertical-align:middle;}
</style>
<![endif]-->xhtml
<div class="holder"><span id="edge"></span> <span id="container"><img src=http://down.chinaz.com/"graphics/homework.jpg" alt="" /></span>
</div>

  在IE内里元素浮动之后.本来的边距(margin)会更加,可是FF等就不会。办理要领:在浮动的元素的代码中插手:display: inline;,可使浮动被忽略,IE中不至于发生双倍间隔.

首页下沉的结果:

.post-body:first-letter {font-size:2.5em; float:left; padding:0 2px 0 0; line-height:1em; font-family:"楷体_GB2312"; font-weight:bold; color:#b00;}半透明的结果:
<div style="width:100px;height:100px;background-color:#f00;filter:alpha(opacity=50); /* IE */ ; -moz-opacity:0.5; /* Moz + FF */ ; opacity: 0.5; /* 支持CSS3的欣赏器(FF 1.5也支持)*/">
我在任何欣赏器里都是半透明的
</div>

去掉点击链接时呈现的虚线框

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/10635.html