网页布局
上一节
下一节
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>无标题文档</title> | |
| <style type="text/css"> | |
| .father{ | |
| width:600px; | |
| } | |
| .son1{ | |
| height:100px; | |
| background-color:orange; | |
| } | |
| .son2{ | |
| width:200px; | |
| height:330px; | |
| background-color:#F0F; | |
| float:left; | |
| } | |
| .son3{ | |
| width:400px; | |
| height:330px; | |
| background-color:#FFC; | |
| float:left; | |
| } | |
| .son4{ | |
| height:80px; | |
| background-color:red; | |
| clear:left; | |
| } | |
| .son21{ | |
| height:100px; | |
| margin-bottom:10px; | |
| background-color:yellow; | |
| } | |
| .son31{ | |
| width:180px; | |
| height:330px; | |
| background-color:green; | |
| float:left; | |
| margin-left:20px;} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="father"> | |
| <div class="son1"></div> | |
| <div class="son2"> | |
| <div class="son21"></div> | |
| <div class="son21"></div> | |
| <div class="son21"></div> | |
| </div> | |
| <div class="son3"> | |
| <div class="son31"></div> | |
| <div class="son31"></div> | |
| </div> | |
| <div class="son4"></div> | |
| </div> | |
| </body> | |
| </html> |
