web前端佈局小練習
阿新 • • 發佈:2019-02-07
參考於 https://blog.csdn.net/liushaozhuanyong/article/details/57407175
以下為自己寫的程式碼(與原著者有所不同,或許是黑科技吧):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } /*居中 * margin: 0 auto;*/ #all { width: 970px; height: 593px; margin: 0 auto; } #top-left { width: 277px; height: 103px; background-color: red; } #top-right { margin-top: -103px; width: 679px; height: 103px; float: right; } #top-right1 { margin-left: 542px; width: 137px; height: 49px; background-color: green; } #top-right2 { margin-top: 8px; width: 679px; height: 46px; background-color: green; } #center { margin-top: 10px; } #center-left { float: left; width: 310px; height: 435px; background-color: yellow; } #lanse1 { float: left; width: 450px; height: 240px; background-color: skyblue; margin-left: 10px; } #lanse2 { float: left; width: 450px; height: 110px; background-color: skyblue; margin-top: 10px; margin-left: 10px; } #lanse3 { float: left; width: 450px; height: 30px; background-color: skyblue; margin-top: 10px; margin-left: 10px; } #zise { float: left; width: 190px; height: 400px; background-color: purple; margin-top: -360px; margin-left: 10px; } #lvse { width: 650px; height: 25px; background-color: green; float: left; margin-left: 10px; margin-top: 10px; } #bottom { width: 975px; height: 35px; background-color: #0000FF; margin-top: 10px; float: left; } </style> </head> <body> <div id="all"> <div id="top"> <div id="top-left"></div> <div id="top-right"> <div id="top-right1"></div> <div id="top-right2"></div> </div> </div> <div id="center"> <div id="center-left"></div> <div id="center-right"> <div id="lanse"> <div id="lanse1"></div> <div id="lanse2"></div> <div id="lanse3"></div> </div> <div id="zise"></div> <div id="lvse"></div> </div> </div> <div id="bottom"></div> </div> </body> </html>