在进行div+css布局的练习,出了点问题不明白为什么,还请高手指点一二!

html-css08

在进行div+css布局的练习,出了点问题不明白为什么,还请高手指点一二!,第1张

你写的CSS样式没问题,是你太粗心了,这个里面多了一个空格

<style type =" text/css">改成 <style type ="text/css">;这样就可以了

div和CSS最好多学习方式就是多练习,在练习中掌握经验、技巧,很多很多的知识,需要自己实践后体会,书里是不会讲到的。

然后你说的兼容问题,不止你老火,所有做网页的,刚开始,都被这个折磨过。(祈祷ie8以下的ie浏览器全部绝迹)熟练掌握运用下面说的方法,就OK了。

解决兼容问题靠经验积累,靠CSS hack!你去百度搜索下CSS hack,百度百科介绍的很详细。

CSS hack简单讲,就是针对不同浏览器写不同css,比如说ie6的hack,意思就是这段css写法,只有在ie6会执行,其他浏览不会执行,这样就能针对不同浏览器写不同的css,达到兼容。

附上一些CSS hack给你参考

#test{

color:red/* 所有浏览器都支持 */

color:red !important/* Firefox、IE7支持 */

_color:red/* IE6支持 */

*color:red/* IE6、IE7支持 */

*+color:red/* IE7支持 */

color:red\9/* IE6、IE7、IE8支持 */

color:red\0/* IE8支持 */

}

body:nth-of-type(1) p{color:red} /* Chrome、Safari支持 */

*+html .list1 li{line-height:18px} //IE7hack

/* Firefox 1 - 2 */

body:empty #firefox12

{display: block}

/* Firefox */

@-moz-document url-prefix()

{#firefox { display: block}}

/* Webkit-Safari-Chrome */

@media screen and (-webkit-min-device-pixel-ratio:0){

color:red

}

/* Opera */

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)

{head~body #opera { display: block}}