網頁製作基本步驟
阿新 • • 發佈：2018-11-05
先佈局，在填充
<!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>
頁面最終如圖：
