<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } html{ font-size: 20px; } .clearFloat::after{ content: "."; display: block; clear: both; height: 0; visibility: hidden; } .clearFloat{ zoom: 1; } #bodyDiv{ background-color: deepskyblue; width: 48.1rem; margin: auto; } .whatHot { width: 17.5rem; height: 21rem; float: left; } .whatHot:first-child { margin-right: 0.4rem; } #leftDiv { margin-right: 0.4rem; float: left; width: 35.6rem; background-color: green; } #rightDiv { float: left; background-color: yellow; } #rightDiv div{ width: 12rem; margin-bottom: 0.4rem; } #leftDiv div,#rightDiv div { border-radius: 0.5rem; border: 0.05rem solid red; } #login { height: 7rem; } #zP { height: 4.6rem; } #window { height: 8.9rem; } #ipanNano { width: 35.5rem; height: 4.6rem; float: left; margin: 0.4rem 0; } .lucky { width: 17.5rem; height: 25rem; float: left; margin-right: 0.4rem; } .lucky:last-child { margin-right:0 } #coupns { height: 12rem; } #shop { height: 21rem; } </style> </head> <body> <div id="bodyDiv" class="clearFloat"> <div id="leftDiv" class="clearFloat"> <div class="whatHot"></div> <div class="whatHot"></div> <div id="ipanNano"></div> <div class="lucky"></div> <div class="lucky"></div> </div> <div id="rightDiv"> <div id="login"></div> <div id="zP"></div> <div id="window"></div> <div id="coupns"></div> <div id="shop"></div> </div> </div> </body> </html>
css 页面布局
最新推荐文章于 2023-10-08 15:31:09 发布