<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>页面作业</title> <style> #left,#left2,#left3,#left4{ float: left;/*并集选择器*/ text-align: center; font-size: 50px; text-shadow: 2px 2px white; } #left411,#left412{ float: left; } #left{ width: 20%; height: 300px; background-color: #42668f; line-height: 300px; } #left2{ width: 20%; height: 300px; background-color: #f2ad0a; } #left21{ width: 100%; height: 50%; background-color: #cccccc; line-height: 150px; } #left22{ width: 100%; height: 50%; background-color: yellow; line-height: 150px; } #left3{ width: 15%; height: 300px; background-color: #4d2e83; line-height: 300px; } #left4{ width: 45%; height: 300px; background-color: #19242C; } #left41{ width: 100%; height: 50%; background-color: aquamarine; line-height: 150px; } #left411{ width: 50%; height: 100%; background-color: #ff7300; } #left412{ width: 50%; height: 100%; background-color: #585858; } #left42{ width: 100%; height: 50%; background-color: blueviolet; line-height: 150px; } .clearfix:after{ content:""; display: table; clear: both; /*after是伪类,清楚浮动的时候, 在每一个有浮动的父类中加上clearfix这个类*/ } </style> </head> <body> <div class="clearfix"> <div id="left">1</div> <div id="left2"> <div id="left21">2上</div> <div id="left22">2下</div> </div> <div id="left3">3</div> <div id="left4"> <div id="left41" class="clearfix"> <div id="left411">4上左</div> <div id="left412">4上右</div> </div> <div id="left42">4下</div> </div> </div> <div style="width: 1000px;height: 200px;background-color: #cccccc"> 测试是否清除了浮动的div</div> </body> </html>
html5第七课时,页面作业
最新推荐文章于 2024-06-26 09:35:57 发布