下面为代码部分,所用到的知识不多,不过才现在刚开始,以后要学的东西还有很多,大家继续加油!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float练习</title> <style> .all{ width: 620px; text-align: center; border:1px solid black; overflow: hidden; } .all .head{ border:1px solid red; width: 122px; height: 120px; float: left; } .clear{ clear: both;height: 0px;overflow: hidden; } .all .six{ float: left; width: 404px; height: 182px; border:1px solid black; } .all .seven{ width: 212px; height: 222px; float: right; border:1px solid black; } .all .ba{ width: 257px; height: 187px; float: left; border:1px solid black; } .all .jiu{ width: 145px; height: 187px; float: left; border:1px solid black; } .all .d10{ width: 212px; height: 246px; float: right; border:1px solid black; } .all .d11{ width: 404px; height: 97px; float: left; border:1px solid black; } .all .d12{ float: left; width: 618px; height: 72px; border:1px solid black; } </style> </head> <body> <div class="all"> <div class="head">1</div> <div class="head">2</div> <div class="head">3</div> <div class="head">4</div> <div class="head">5</div> <div class="clear"></div> <div class="six">6</div> <div class="seven">7</div> <div class="ba">8</div> <div class="jiu">9</div> <div class="d10">10</div> <div class="d11">11</div> <div class="d12">12footer</div> </div> </body> </html>