先布局，在填充
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>网页开发先布局在填充</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> *{ margin: 0px; padding: 0px; text-align: center; } .header{ background-color: yellow; height: 100px; width: 100%; font-size: 80px; font-family: "楷体"; } .main{ width: 80%; margin: 0 auto 0 auto; height: 200px; } .left{ width: 20%; background-color: blue; float: left; height: 200px; font-size: 60px; color: yellow; } .right{ width: 80%; height: 200px; background-color: green; float: right; font-size: 60px; color: blue; } .ad{ height: 480px; width: 100%; margin: auto 0 0 auto; } .ad1{ width: 10%; height: 550px; margin: 0 auto auto auto; background-color: blue; float: left; font-size: 60px; } .main1{ width: 80%; height: 480px; margin: 0 auto 0 auto; background-color: yellow; text-align: center; font-size: 60px; float: left; } .ad2{ width: 10%; height: 550px; margin: 0 auto auto auto; background-color: blue; font-size: 60px; float: left; } .foot{ background-color: gray; width: 80%; margin: 0 auto 0 auto; height: 200px; text-align: center; font-size: 60px; } </style> </head> <body> <div> <div class="header"> 头部信息 </div> <div class="main"> <div class="right">LOGO</div> <div class="left">页面导航</div> </div> <div class="ad"> <div class="ad1"> 广告投放 </div> <div class="main1"> 页面主要内容 </div> <div class="ad2"> 广告投放 </div> </div> <div class="foot"> 页面版权信息 </div> </div> </body> </html>
页面最终如图：
