老尸 发表于 2015-1-15 23:33:07

来一发破洛洛搜集的各类CSS bug与技能 延续更新

现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。
破洛洛搜集的各类CSSbug与技能延续更新来历:破洛洛
1、容器不扩大成绩
这个是常常在我切图的时分碰到的成绩,如:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>容器不扩大成绩(www.poluoluo.com破洛洛)</title><styletype="text/css">#divGroup{border:2pxsolid#333;}#a,#b{border:2pxsolid#333;float:left;margin:5px;}</style></head><body><divid="divGroup"><divid="a">子容器a</div><divid="b">子容器b</div></div></body></html>
提醒:你能够先修正部分代码再运转。

办理举措:在divGroup内里加上overflow:hidden;zoom:1;
ps:良多人都是在内里加个扫除浮动空标签来办理,实在这个是毛病举措。太增添代码量了

2、margin双边距成绩
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>FF下怎样使一连长字段主动换行(www.poluoluo.com破洛洛)</title><styletype="text/css">body{margin:0}div{float:left;margin-left:10px;width:200px;height:200px;border:1pxsolidred}</style></head></script><body><div><ahref="#">www.poluoluo.com破洛洛www.poluoluo.com破洛洛www.poluoluo.com破洛洛www.poluoluo.com破洛洛</a></div></body></html>
提醒:你能够先修正部分代码再运转。

设置为float的div在ie下设置的margin会更加。这是一个ie6都存在的bug。
办理举措是在这个div内里加上display:inline;
ps:我一样平常很罕用margin,一样平常情形用padding来把持边距,以避免呈现别的的bug
3、关于容器的包容干系
  良多时分,特别是容器内有平行结构,比方两、三个float的div时,宽度很简单呈现成绩。在IE中,外层的宽度会被内层更宽的div挤破。必定要用Photoshop大概Firework量取像素级的精度。
4、关于高度的成绩
  假如是静态地增加内容,高度最好不要界说。扫瞄器能够主动伸缩,但是假如是静态的内容,高度最好定好。(仿佛偶然候不会主动往下撑开,不晓得详细怎样回事
5、最狠的手腕C!important;
  假如其实没有举措办理一些细节成绩,能够用这个办法.FF关于”!important”会主动优先剖析,但是IE则会疏忽.以下
<LIclass=hl-firstline>.tabd1{
[*]background:url(/res/images/up/tab1.gif)no-repeat0px0px!important;/*StyleforFF*/
[*]background:url(/res/images/up/tab1.gif)no-repeat1px0px;/*StyleforIE*/}

  值得注重的是,必定要将xxxx!important这句安排在另外一句之上。
6、IE6躲猫猫bug
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>躲猫猫bug(www.poluoluo.com破洛洛)</title><styletype="text/css">#holder{background-color:pink;/***引发bug的主要要素,一种注释就是:那些消散的笔墨躲到了背景以后***//***width:100%;对最年夜的容器设置宽度,绝对宽度和相对宽度都能够,便可修改bug***/}#holdera:hover{background-color:deeppink;/***为了加强视觉效果罢了,能够往失落。***/}#floater{float:right;/***引发bug的主要要素***/width:135px;height:310px;/***引发bug的主要要素,高度必定要年夜于那些笔墨的高度***/border:1pxsolidgreen;}.clear{clear:both;/***引发bug的主要要素***/}#footer{/***为了加强视觉效果罢了,能够往失落。***/height:50px;border-top:1pxsolidblue;}</style></head><body><divid="holder"><divid="floater">躲猫猫bug<br//><ahref="#"title="">这个示例是为了演示IE6的“躲猫猫bug”,假如你用IE6扫瞄器扫瞄这个页面的时分,就会发明你看不到这些字了rz~。<br//>IE7已修改了这个bug,以是你用IE7扫瞄这个页面的时分,就可以看到这些笔墨啦。<br//>躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫b躲猫猫b躲猫猫bugug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫b躲猫猫bug躲猫猫bug躲猫猫bugug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug<ulstyle="list-style-type:disc"><li><atitle="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a></li><li><atitle="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a></li><li><atitle="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a></li><li><atitle="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a></li><li><atitle="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a></li><li><atitle="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a></li></ul></div><!--end:ghostHolder--><divclass="clear"></div><divid="footer"></div></div><!--end:holder--></body></html>
提醒:你能够先修正部分代码再运转。

<P>上面办法的恣意一种便可没落bug:
1.明白的指定最表面div容器(#holder)的宽度(绝对宽度和相对宽带都能够)。
2.往失落最表面div容器(#holder)的背景色彩(大概背景图片)
3.减少浮动div容器(#floater)的高度到必定水平
4.不浮动div容器(#floater)
5.不利用<divclass="clear"><div>

手艺
7、ie6下空标签高度成绩
一个空div假如高度设置为0到19px,IE6下高度默许一直19PX。
比方:
.c{background-color:#f00;height:0px;/*给定任何小于20px的高度*/}
<divclass="c"></div>

运转:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>ie6下line-heightbug(www.poluoluo.com破洛洛)</title><style>.c{background-color:#f00;height:0px;/*给定任何小于20px的高度*/}</style></head><body><divclass="c"></div></body></html>
提醒:你能够先修正部分代码再运转。

<P>假如不让它默许为19PX。而是0PX的话
办理办法有3种:
1.css内里加上overflow:hidden;
2.div内里加上正文,<divclass="c"><!CC></div>

3.css内里加上line-height:0;然后div内里加上#nbsp;,
<divclass="c"></div>(#换成&)

注重:ie6下给div设置的高度小于ie6的line-height值时,ie6会将这个div的高度定为line-height的值.
8、往失落图片热门链接或超链接的虚线框
<ahref="#"onFocus=this.blur()>hemin</a>

9、按钮按下时平面感效果:
a:hover{position:relative;top:1px;left:1px}/*牢记必定如果绝对定位*/

10、整站变灰代码(加到款式表中):
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

11、中英文下划线对齐体例(使用图片的align=”absmiddle”):
<imgsrc="img.gif"align="absmiddle">中英文并排:<ahref="/">中文gollum</a>

12、设为首页代码:
<spanonclick="varstrHref=window.location.href;this.style.behavior=’url(#default#homepage)’;this.setHomePage(’http://www.poluoluo.com破洛洛’);"style="cursor:pointer">设为首页</span>

13、到场保藏代码:
<LIclass=hl-firstline><script>
[*]functionaddfavorite()
[*]{
[*]if(document.all)
[*]{
[*]window.external.addFavorite(‘http://www.poluoluo.com‘,‘破洛洛‘);
[*]}
[*]elseif(window.sidebar)
[*]{
[*]window.sidebar.addPanel(‘破洛洛‘,‘http://www.poluoluo.com‘,"");
[*]}
[*]}
[*]</script>
[*]<ahref="#">把破洛洛到场保藏</a>

14、经由过程界说em完成小三角效果:
<LIclass=hl-firstline>*{
[*]font-size:14px;/*必需通配字体巨细*/
[*]}
[*]em{
[*]display:block;
[*]font:0/0"宋体";/*经自己探索,只要在宋体下才最为尺度*/
[*]border:7pxsolid;/*border值越年夜,三角形越年夜*/
[*]border-color:#fff#fff#fff#444;/*经由过程改动色彩值,可发生分歧效果,本人实行*/
[*]margin-top:5px
[*]}

15、IE6下当层上下于10px时,会呈现高度在界说值上加10px的效果,最复杂的办法就是在该层款式中到场:
font-size:0;

16、空div在IE(FF中没有)是有默许高度的,能够用界说:
div{width:100%;background:#9c0;ling-height:0}

17、描边笔墨效果:
<LIclass=hl-firstline><divstyle="position:relative;width:200px;height:25px;line-height:25px;text-align:center;font-size:14px;color:#fff;background:#9c0;">
[*]这是描边笔墨<spanstyle="position:absolute;left:-1px;top:-1px;color:#444;width:200px;height:25px;display:block">这是描边笔墨</span>
[*]</div>

18、input鼠标经由时改动色彩:
input{star:expression(onmou搜索引擎优化ver=function(){this.style.backgroundColor=”#FF0000″},onmou搜索引擎优化ut=function(){this.style.backgroundColor=”#FFFFFF”})}

19、图片在容器里垂直居中显现:
img{margin-top:expression((150Cthis.height)/2);}//150是容器高

20、超链接会见事后hover款式就不呈现的成绩:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>超链接会见事后hover款式就不呈现的成绩(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--a:link{color:red}a:hover{color:blue}a:visited{color:green}a:active{color:orange}--></style></head><body><ahref="#">www.poluoluo.com破洛洛--www.poluoluo.com破洛洛</a></body></html>
提醒:你能够先修正部分代码再运转。

ps:被点击会见过的超链接款式不在具有hover和active了,良多人应当都碰到过这个成绩,办理办法是改动CSS属性的分列按次:L-V-H-A
21、FF下怎样使一连长字段主动换行:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>FF下怎样使一连长字段主动换行(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--div{width:300px;word-wrap:break-word;border:1pxsolidred;}--></style></head><scripttype="text/javascript">/*<!]>*/</script><body><divid="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></body></html>
提醒:你能够先修正部分代码再运转。

ps:尽人皆知IE中间接利用word-wrap:break-word就能够了,这里FF中我们利用JS拔出的办法来办理
22、IE6下为何图片下方有清闲发生:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>IE6下为何图片下方有清闲发生(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--div{border:1pxsolidred;background:orange;}img{width:276px;height:110px;}--></style></head></script><body><div><imgsrc="http://www.poluoluo.com/jzxy/UploadFiles_333/200911/20091118142231288.gif"alt="google"/></div></body></html>
提醒:你能够先修正部分代码再运转。

ps:办理这个BUG的办法也有良多,能够是改动html的排版,大概设置img为display:block
大概设置vertical-align属性为vertical-align:top|bottom|middle|text-bottom
都能够办理.
23、IE6下这两个层两头怎样有间隙:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>IE6下这两个层两头怎样有间隙(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--.left{float:left;width:100px;height:100px;background:red}.right{width:100px;height:100px;background:orange}--></style></head></script><body><divclass="left">aaaaaa</div><divclass="right">aaaaaa</div></body></html>
提醒:你能够先修正部分代码再运转。

ps:这个IE的3PXBUG也是常常呈现的,办理的举措是给.right也一样浮动float:left大概绝对IE6界说.leftmargin-right:-3px;
24、list-style-image没法正确定位的成绩:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>ist-style-image没法正确定位的成绩(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--li{list-style:url("http://www.poluoluo.com/jzxy/UploadFiles_333/200911/20091118142231311.gif");}lia{position:relative;top:-5px;font:12px/25px宋体;}--></style></head></script><body><ul><li><ahref="#">web尺度罕见成绩年夜全</a></li><li><ahref="#">web尺度罕见成绩年夜全</a></li><li><ahref="#">web尺度罕见成绩年夜全</a></li><li><ahref="#">web尺度罕见成绩年夜全</a></li><li><ahref="#">web尺度罕见成绩年夜全</a></li></ul></body></html>
提醒:你能够先修正部分代码再运转。

ps:这个list-style-image的定位成绩也是常常有人问的,办理的举措通常为用li的背景摹拟,这里接纳绝对定位的办法也能够办理
25、怎样对齐文本与文本输出筐:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>怎样对齐文本与文本输出筐(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--input{width:200px;height:30px;border:1pxsolidred;}--></style></head></script><body><inputtype="text"/>aaaaaaaaaaaaaaaaaa</body></html>
提醒:你能够先修正部分代码再运转。

ps:碰到此种成绩,设置文本框的vertical-align:middle就能够了
26、为何web尺度中IE没法设置转动条色彩了:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>为何web尺度中IE没法设置转动条色彩了(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--body{scrollbar-face-color:#f6f6f6;scrollbar-highlight-color:#fff;scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-color:#eeeeee;scrollbar-arrow-color:#000;scrollbar-track-color:#fff;scrollbar-darkshadow-color:#fff;}--></style></head></script><body><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></body></html>
提醒:你能够先修正部分代码再运转。

ps:办理举措是将body换成html
27、怎样才干让层显现在FLASH之上呢:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>怎样才干让层显现在FLASH之上呢(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--div{position:absolute;top:20px;left:20px;width:200px;height:200px;background:red}object{width:500px;height:100px;}--></style></head></script><body><div>www.poluoluo.com破洛洛</div><objecttype="application/x-shockwave-flash"data="http://gg.blueidea.com/2005/www/m533-104.swf"><paramname="movie"value="http://gg.blueidea.com/2005/www/m533-104.swf"/></object></body></html>
提醒:你能够先修正部分代码再运转。

ps:办理的举措是给FLASH设置通明
<paramname="wmode"value="transparent"/>

28、如何使一个层垂直居中于扫瞄器中:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>如何使一个层垂直居中于扫瞄器中(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--div{position:absolute;top:50%;left:50%;margin:-100px00-100px;width:200px;height:200px;border:1pxsolidred;}--></style></head></script><body><div>www.poluoluo.com破洛洛</div></body></html>
提醒:你能够先修正部分代码再运转。

ps:这里我们利用百分比相对定位,与外补钉负值的办法,负值的巨细为其本身宽度高度除以二
29、纵贯到屏幕底部的背景致:
在垂直偏向是举行把持是CSS所不克不及的。假如你想让导航栏和内容栏一样纵贯到页面底部,用表格是很便利的,但假如只用如许的CSS:
#navigation{background:blue;width:150px}

较短的导航条是不会纵贯究竟部的,半路内容停止时它就停止了。该怎样办呢?
不幸的是,只能接纳棍骗的手腕了,给这较短的一栏加上个背景图,宽度和栏宽一样,并让它的色彩和设定的背景致一样。
body{background:url(blue-image.gif)00repeat-y}

此时不克不及用em做单元,由于那样的话,一旦读者改动了字体巨细,这个把戏就会露馅,只能利用px。
30、CSS通明属性:
.transparent_class{
filter:alpha(opacity=50);/*;这个是为IE6设的,可取值在0-100,别的三个0到1.*/
-moz-opacity:0.5;/*这个是为了撑持一些老版本的Mozilla扫瞄器。*/
-khtml-opacity:0.5;/*这个为了撑持一些老版本的Safari扫瞄器。*/
opacity:0.5;/*opacity:0.5;这是最主要的,由于它是CSS尺度.该属性撑持Firefox,Safari和Opera.*/
}

31、CSS字体属性简写划定规矩
一样平常用CSS设定字体属性是如许做的:
<LIclass=hl-firstline>font-weight:bold;
[*]font-style:italic;
[*]font-varient:small-caps;
[*]font-size:1em;
[*]line-height:1.5em;
[*]font-family:verdana,sans-serif;

但也能够把它们全体写到一行上往:
font:bolditalicsmall-caps1em/1.5emverdana,sans-serif;

真不错!只要一点要提示的:这类简写办法只要在同时指定font-size和font-family属性时才起感化。并且,假如你没有设定font-weight,font-style,和font-varient,他们会利用缺省值,这点要记上。
32、修改IE6反复笔墨bug:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>修改IE6反复笔墨bug(www.poluoluo.com破洛洛)</title><styletype="text/css">*{margin:0;padding:0;}body{font:12pxVerdana,Geneva,sans-serif;padding:10px;}.box-model{width:300px;}.box-modeldiv{float:left;width:150px;}</style></head><body><divclass="box-model"><divclass="box-model-01">反复笔墨:</div><divclass="box-model-02clearfix">必要你我是一只鱼</div></div></body>
提醒:你能够先修正部分代码再运转。

办理办法:
#往失落正文
#确保一切的元素利用”display:inline;”
#在最初一个元素上利用一个”margin-right:-3px;”
#为浮动元素的最初一个条目利用一个前提正文,好比:
<!C>Putyourcommentaryinhere…<!C>

#在容器的最初元素利用一个空的div(它也有需要设置宽度为90%或相似宽度。)
原文:www.positioniseverything.net
33、IE6下:hover生效成绩办理计划:
a:hover{zoom:1}/*增添zoom,display,padding等等属性也可*/

34、IE6,7生效的margin-left/rightbug:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>IE6,7生效的margin-left/right</title><style>.wrap{background:#eee;border:1pxsolid#ccc;}.cont{border-bottom:2pxsolid#aaa;margin:0100px;height:30px;}</style></head><body><divclass="wrap"><divclass="cont">www.poluoluo.com破洛洛</div></div></body></html>
提醒:你能够先修正部分代码再运转。

办理举措:在wrap加zoom:1;
转:http://www.cssass.com/blog/index.php/2009/350.html/comment-page-1#comment-128
35、单行或多行一直笔墨垂直居中:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>多行笔墨垂直居中(www.poluoluo.com破洛洛)</title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><style>*{padding:0;margin:0;}.a{display:table-cell;/*ff*/text-align:center;width:400px;height:200px;line-height:200px;font-size:175px;/*IE6,7*/border:4pxsolid#beceeb;color:#069;vertical-align:middle;}.b{display:inline-block;font-size:12px;vertical-align:middle;text-align:center;line-height:10px;width:100px;}</style></head><body><divclass="a"><spanclass="b">heminwww.poluoluo.com破洛洛</span></div></body></html>
提醒:你能够先修正部分代码再运转。

36、进进网页到场渐显切换效果:
<metahttp-equiv="Page-Enter"content="blendTrans(Duration=1)"/>
<metahttp-equiv="Page-Exit"content="blendTrans(Duration=1)"/>
<ahref="http://www.poluoluo.com破洛洛">hemin</a>

37、IE6下英笔墨体跟中笔墨体不克不及对齐:
办理举措:中英文都一致利用“宋体”。

Table布局灵活性不大,你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。

不帅 发表于 2015-1-17 23:12:53

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet)的家喻户晓。

谁可相欹 发表于 2015-1-24 12:42:07

在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。

仓酷云 发表于 2015-2-1 16:06:04

以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

分手快乐 发表于 2015-2-7 09:03:03

可以使用 CSS 检查工具进行设计。

小妖女 发表于 2015-2-21 17:50:03

Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

变相怪杰 发表于 2015-3-6 21:37:12

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

若天明 发表于 2015-3-13 22:09:48

直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

飘灵儿 发表于 2015-3-20 21:18:59

是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
页: [1]
查看完整版本: 来一发破洛洛搜集的各类CSS bug与技能 延续更新