web标准常见问题集合5


答案：19.为什么这个背景颜色无法显示 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 
<!--  
ul { 
    background:red 
    } 
li { 
    float:left; 
    width:180px; 


    } 
--> 
</style> 
<ul> 
<li>web标准常见问题大全</li> 
<li>web标准常见问题大全</li> 
<li>web标准常见问题大全</li> 
<li>web标准常见问题大全</li> 
<li>web标准常见问题大全</li> 

<div style="clear:both"></div> 
</ul>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

IE中设置有背景色的ul并没有显示出来，这个属于haslayout问题，解决的办法也很多参考：http://bbs.blueidea.com/viewthread.php?tid=2636904 
20.怎么样才能让层显示在FLASH之上呢 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 
<!--  
div { 
    position:absolute; 
    top:20px; 
    left:20px; 
    width:200px; 
    height:200px; 
    background:red 
    } 
object { 
    width:500px; 
    height:100px; 
    } 

--> 
</style> 
<div> 
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全 
</div> 
<object type="application/x-shockwave-flash" data="http://gg.blueidea.com/2005/www/m533-104.swf"> 
<param name="movie" value="http://gg.blueidea.com/2005/www/m533-104.swf" /> 

</object>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

解决的办法是给FLASH设置透明<param name="wmode" value="transparent" />
21.怎样使一个层垂直居中于浏览器中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 
<!--  
div { 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:-100px 0 0 -100px; 
    width:200px; 
    height:200px; 
    border:1px solid red; 
    } 

--> 
</style> 
<div>web标准常见问题大全</div>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二 
22 .图片垂直与容器内 
复制代码 代码如下:

参考：http://bbs.blueidea.com/thread-2666987-1-1.html 

23.如何让三列横向排列
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<style> 
div { 
    float:left; 
    margin:1px; 
    width:200px; 
    height:200px; 
    background:orange 
    } 

</style> 
<div></div> 
<div></div> 
<div></div>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<style> 
div { 
position:absolute; 
top:50%; 
left:50%; 
margin:-100px 0 0 -300px; 
} 
</style> 


<div style="background:#404040;width:200px;height:200px;">1</div> 
<div style="background:#FD7C03;width:200px;height:200px;margin:-100px 0 0 -100px;">2</div> 
<div style="background:#eee;width:200px;height:200px;margin:-100px 0 0 100px;">3</div>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<style> 
span { 
    margin:1px; 
    display:-moz-inline-box; 
    display:inline-block; 
    width:300px; 
    height:200px; 
    background:orange; 
    } 

</style>
<span></span> 
<span></span> 
<span></span>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

横向排列DIV可以使用浮动的方式比如float:left,或者用内联方式，还可以绝对定位对象等等.
上一个：使用XHTML1.0 Strict中需要特别注意的地方
下一个：对hao123进行重构
更多图片编程知识: