html代码为： <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>souhu.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/> <meta http-equiv="description" content="this is my page"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="./souhu.css"/> </head> <body> <div class="top"> <div class="login">login</div> <div class="weibo">微博推荐</div> </div> <!-- logo部分 --> <div class="logo"><img src="img/1.jpg"/></div> <!-- 导航栏 --> <div class="navi">导航</div> <!-- 广告部分 --> <div class="ad"> <div class="student">招生</div> <div class="add2">广告2</div> <div class="add3">广告3</div> <div class="add4"> <table height="100%" align="center" valign="middle"> <tr><td><img src="img/4.jpg"/></td></tr></table> </div> </div> </body> </html> css代码为： @CHARSET "UTF-8"; body { width: 953px; height: 800px; margin: 0 auto; /*background-color: pink;使用border会占像素，所以使用背景色看范围*/ border: 1px solid red; } .top { height: 30px; width: 953px; background-color: pink; } .login { width: 540px; height: 30px; background-color: blue; float: left; } .weibo { width: 270px; height: 30px; background-color: grey; float: right; } /*logo部分*/ .logo { width: 139px; height: 67px; background-color: yellow; margin-top: 5px; float: left; } .logo img { width: 139px; height: 67px; } /*导航*/ .navi { width: 810px; height: 67px; float: left; margin-left: 4px; background-color: green; margin-top: 5px; } /*广告*/ .ad { width: 953px; height: 212px; border: 1px solid silver; float: left;/*不加浮动的话会认为是粘连在一起的*/ margin-top: 5px; } /*招生广告*/ .student { width:121px; height: 197px; margin: 5px 0 0 4px; float: left; background-color: silver; } /*广告2*/ .add2 { width: 450px; height: 197px; margin: 5px 0 0 18px; float: left; background-color: green; } /*房地产广告*/ .add3{ height: 197px; width: 140px; float: left; margin: 5px 0 0 15px; background-color: green; } /*图片广告*/ .add4 { height: 212px; width: 180px; float: right; border-left: 1px solid silver; } 效果图为： 相关文章： 2021-05-24 2022-12-23 2022-12-23 2021-06-10 2021-05-17 2021-04-07 2021-09-10 2021-11-26