Web Standard FAQ set 5

19. Why cannot the background color be displayed? <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"> <br/> <style type = "text/css"> <! -- Ul {background: red} li {float: left; width: 180px; </p> <p >}--> </style> <ul> <li> web Standard FAQ </li> <li> web Standard FAQ </li> </ul> <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

In IE, the ul with a background color is not displayed, This Is A haslayout problem, the solution is also a lot of reference: http://bbs.blueidea.com/viewthread.php? Tid = 2636904
20. How can I display layers on top of FLASH?<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"> <br/> <style type = "text/css"> <! -- Div {position: absolute; top: 20px; left: 20px; width: 200px; height: 200px; background: red} object {width: 500px; height: 100px ;} </p> <p> --> </style> web standards FAQs FAQs web standards FAQs FAQ <p> <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> <br/>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

The solution is to set transparency for FLASH. <param name = "wmode" value = "transparent"/>
21. How to center a layer vertically in the browser<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"> <br/> <style type = "text/css"> <! -- Div {position: absolute; top: 50%; left: 50%; margin:-100px 0 0-100px; width: 200px; height: 200px; border: 1px solid red ;} </p> <p> --> </style> web Standard FAQ <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

Here we use the absolute percentage position, and the method of negative value of the external patch, the negative value is its own width and height divided by two
22. The image is perpendicular to the containerCopy codeThe Code is as follows: Reference: http://bbs.blueidea.com/thread-2666987-1-1.html

23. How to arrange the three columns horizontally<Br/> <style> div {float: left; margin: 1px; width: 200px; height: 200px; background: orange} </p> </style> <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

<Br/> <style> div {position: absolute; top: 50%; left: 50%; margin:-100px 0 0 0-300px ;}</style> 123 <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

<Br/> <style> span {margin: 1px; display:-moz-inline-box; display: inline-block; width: 300px; height: 200px; background: orange ;}</p> </style> <p> <br/>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

You can use float: left or Inline to arrange the DIV horizontally. You can also absolutely locate the object.