html 布局
制定浮动之后，需要把height width最好定下，以免出现奇怪的现象
父元素高度没有设置，就是0px
其子元素如果浮动。再高也不会撑开父元素的高度，
注意会把紧挨着的下面元素向上被 浮动的子元素覆盖。
如果父div不设置高度和浮动,2个子div设置浮动,其实1个或者2个子div都设置高度,父div不会受影响,其高度还是0.
如果父div设置浮动,但是没设置高度会受子div的高度影响,父div高度会和子div中高度最高的div一样高度.
如果父div设置浮动,但是也设置了高度,那么父div不受子div高度的影响,父div还是原来设置的高度.
用记事本 文件保存编码和charset编码不一样。浏览器按照charset解释。注意乱码！
id用数字取名字。显示不了要表示的效果，浏览器不读取渲染效果。
不声明docutype直接后果是：不同浏览器可能渲染的效果不同。低版本IE渲染，会有问题！得不到预期的效果！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> #container{ margin:0 auto; width:1004px; background:gray; } #header{ height:120px; background:orange; } #main{ height:600px; background:green; } #lefts{ float:left; height:600px; width:700px; background:pink; } #ls{ float:left; height:290px; width:340px; margin:5px 5px 5px 5px; background:#0066CC; } #rights{ float:right; height:600px; width:304px; background:purple; } #rs{ height:296px; width:300px; margin:2px 2px 4px 2px; background:#ACD6FF; } #footer{ height:120px; background:blue; color:#FFFFFF; } </style> </head> <body> <div id="container"> <div id="header">HEADER</div> <div id="main"> <div id="lefts"> <div id="ls">1</div> <div id="ls">2</div> <div id="ls">3</div> <div id="ls">4</div> </div> <div id="rights"> <div id="rs">5</div> <div id="rs">6</div> </div> </div> <div id="footer">FOOTER</div> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> #container{ margin:0 auto; width:1004px; background:gray; } #header{ height:120px; background:orange; } #main{ height:600px; background:green; } #lefts{ float:left; height:600px; width:700px; background:pink; } #ls1{ float:left; height:290px; width:340px; margin:5px 5px 5px 5px; background:#0066CC; } #ls2{ float:left; height:290px; width:340px; margin:5px 5px 5px 5px; background:#00AEAE; } #ls3{ float:left; height:290px; width:340px; margin:5px 5px 5px 5px; background:#02C874; clear:both; } #ls4{ float:left; height:290px; width:340px; margin:5px 5px 5px 5px; background:#00BB00; } #rights{ float:right; height:600px; width:304px; background:purple; } #rs1{ height:296px; width:300px; margin:2px 2px 4px 2px; background:#ACD6FF; } #rs2{ height:296px; width:300px; margin:2px 2px 2px 2px; background:#CAFFFF; } #footer{ height:120px; background:blue; color:#FFFFFF; } </style> </head> <body> <div id="container"> <div id="header">HEADER</div> <div id="main"> <div id="lefts"> <div id="ls1">1</div> <div id="ls2">2</div> <div id="ls3">3</div> <div id="ls4">4</div> </div> <div id="rights"> <div id="rs1">5</div> <div id="rs2">6</div> </div> </div> <div id="footer">FOOTER</div> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> #container{ margin: 0 auto; width:1024px; } #header{ margin-top: 2px; background: blue; height:120px; } #main{ margin-top:2px; margin-bottom:2px; height:600px; } #lefts{ width:800px; height:600px; background: pink; float:left; } #lefts div{ width:390px; height:290px; background: black; float:left; margin: 5px; } #rights{ width:224px; height:600px; background: yellow; float:right; } #rights .tow{ width:220px; height:296px; background: red; margin: 2px; } #footer{ height:120px; background: orange; } </style> </head> <body> <div id="container"> <div id="header"></div> <div id="main"> <div id="lefts"> <div class="four"></div> <div class="four"></div> <div class="four"></div> <div class="four"></div> </div> <div id="rights"> <div class="tow"></div> <div class="tow"></div> </div> </div> <div id="footer"></div> </div> </body> </html>
