Layout-2相關代碼:3列布局
阿新 • • 發佈:2019-04-01
文檔 width text right ati eight pre 1.0 body
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style type="text/css"> .right,.left{height:300px;width:200px;} .right{ float:right;background:#000000;} .left{ float:left;background:#009933;} .main{background:#F60; height:300px;} </style> </head> <body> <div class="logo"></div> <div class="right">RIGHT</div> <div class="left">LEFT</div> <div class="main">MAIN</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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Layout</title> <style type="text/css"> * { margin: 0; padding: 0; } body { position: relative; } .right, .left { height: 300px; width: 200px; z-index: 2; } .right { position: absolute; right: 0; top: 0; background: #000000; } .left { position: absolute; left: 0; top: 0; background: #009933; } .main { margin-right: 200px; background: #F60; height: 300px; margin-left: 200px; } </style> </head> <body> <div class="boxmain"> <div class="main">main</div> </div> <div class="left">LEFT</div> <div class="right">RIGHT</div> </body> </html>
Layout-2相關代碼:3列布局