仿极客学院的首页布局。
一、代码实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型的应用</title> <link href="css.css" type="text/css" rel="stylesheet"> </head> <body> <div class="top"> <div class="top_content"> </div> </div> <div class="body"> <div class="image"></div> <div class="content"><div class="no"></div></div> <div class="foot"> <div class="foot1"></div> <div class="foot2"></div> </div> </div> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
* { margin: 0px; padding: 0px; } .top { width: 100%; height: 50px; background-color: black; margin: 0px auto; } .top_content { width: 75%; height: 50px; margin: 0px auto; background-color: darkkhaki; } .body { margin: 10px auto; width: 75%; height: 1500px; background-color: antiquewhite; } .image { width: 100%; height: 400px; background-color: aqua; } .content { margin: 10px auto; width: 100%; height: 1000px; background-color: darkgrey; } .no{ width: 100%; height: 50px; background-color: chartreuse; } .foot{ width: 100%; height: 400px; background-color: darkmagenta; } .foot1{ width: 100%; height: 330px; background-color: lime; } .foot2{ width: 100%; height: 70px; background-color: black; } |
就是一个个div来暂时布局的设计…
实现效果:
二、总结
简单布局分块。