麻烦老师帮忙看看,非常感谢
来源:2-14 编程练习
duqinaerfa
2019-08-12 18:56:57
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*此处写代码*/ *{ margin: 0; padding: 0; } .container{ width: 1000px; height: 600px; } .top{ width: 1000px; height: 400px; background: lightblue; } .bottom{ width: 1000px; height: 200px; background: pink; } .p1{ width: 400px; height: 300px; float: left; margin: 50px 33.34px 50px 66.67px; } .p2{ width: 400px; height: 300px; float: left; margin: 50px 66.67px 50px 33.34px; } .p3{ width: 250px; height: 150px; float: left; margin: 25px 31.25px 25px 62.5px; } .p4{ width: 250px; height: 150px; float: left; margin: 25px 31.25px; } .p5{ width: 250px; height: 150px; float: left; margin: 25px 62.5px 25px 31.25px; } </style> </head> <body> <!-- 此处写代码 --> <div class="container"> <div class="top"> <div class="tl"> <img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg" class="p1"> </div> <div class="tr"> <img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg" class="p2"> </div> </div> <div class="bottom"> <div class="bl"> <img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg" class="p3"> </div> <div class="bm"> <img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg" class="p4"> </div> <div class="br"> <img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg" class="p5"> </div> </div> </div> </body> </html>
1回答
同学你好!
代码效果实现的不错,继续加油
如果帮助到了你 欢迎采纳 祝学习愉快~
相似问题