FAQ about web standards _ experience exchange

Web Standard FAQ set 5 19. Why cannot this background color be displayed?

<! 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 Standard FAQ </li> <li> web Standard FAQ daquan </li> <li> FAQ about web standards </li> <p style = "clear: both "> </p> </ul>
[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?

<! 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 "> <! -- P {position: absolute; top: 20px; left: 20px; width: 200px; height: 200px; background: red} object {width: 500px; height: 100px ;} --> </style> <p> FAQs about web Standards web standards FAQs standard FAQ Daquan web Standard FAQs </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>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

The solution is to make FLASH transparent.
21. How to center a layer vertically in the browser

<! 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 "> <! -- P {position: absolute; top: 50%; left: 50%; margin:-100px 0 0-100px; width: 200px; height: 200px; border: 1px solid red ;} --> </style> <p> 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 container

The Code is as follows:

Reference: http://bbs.blueidea.com/thread-2666987-1-1.html

23. How to arrange the three columns horizontally

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style> p {float: left; margin: 1px; width: 200px; height: 200px; background: orange} </style> <p> </p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style> p {position: absolute; top: 50%; left: 50%; margin:-100px 0 0-300px ;}</style> <p style = "background: #404040; width: 200px; height: 200px; "> 1 </p> <p style =" background: # FD7C03; width: 200px; height: 200px; margin:-100px 0 0-100px; "> 2 </p> <p style =" background: # eee; width: 200px; height: 200px; margin:-100px 0 0 100px; "> 3 </p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

<! 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>
[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.