1. 程式人生 > 其它 >01-佈局擴充套件-利用盒模型完成聖盃佈局(雙飛翼佈局)

01-佈局擴充套件-利用盒模型完成聖盃佈局(雙飛翼佈局)

<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; } body,html{ height:100%; } .left{ width:200px; height:80%; background:rgba(0,0,255,0.5); float:left; } .right{ width:200px; height:80%; background:rgba(255,255,0,0.5); float:right; } .center{ height:100%; background:pinkurl(./images/bg.jpg); /*用padding把center-con擠到中間*/ padding:0200px; } .center-con{ height:100%; background:#ccc; } </style> </head> <body> <divclass="left"></div> <divclass="right"></div> <divclass="center"> <divclass="center-con"></div> </div> </body> </html> 右側打賞一下 程式碼改變世界一塊二塊也是愛