站長資訊網
之前的文章《一步步教你使用CSS制作一個簡單美觀的導航欄（代碼詳解）》中，給大家介紹了怎樣使用CSS制作簡單美觀的導航欄。下面本篇文章給大家介紹如何用html制作簡單的面頁布局，我們一起看看怎么做。
互聯網多數的網頁都是由html編寫的，html配合css布局做成一個簡單的漂亮網頁。
代碼示例
<!DOCTYPE html> <html> <head> <title>css網頁布局 </title> <meta charset="utf-8"> <style> * { box-sizing: border-box; } body { margin: 0; } .header { background-color: #f1f1f1; } .topnav { overflow: hidden; background-color: #f61137; } .topnav a { float: left; color: #0017f9; padding: 10px 100px; text-decoration: none; } .topnav a:hover { background-color:#7efe51; </style> </head> <body> <div class="responsive"> <div class="img"> <a target="_blank" href="//static.runoob.com/images/demo/demo1.jpg"> <img src="//static.runoob.com/images/demo/demo1.jpg" alt="#" width="800" height="100"> </a> </div> </div> <div class="topnav"> <a href="#">圖片</a> <a href="#">視頻</a> <a href="#">關于</a> </div> <div class="responsive"> <div class="img"> <a target="_blank" href="//static.runoob.com/images/demo/demo4.jpg"> <img src="//static.runoob.com/images/demo/demo4.jpg" alt="#" width="800" height="500"> </a> </div> </div> </body> </html>
代碼效果圖如下：
代碼步驟：
1、開始HTML 源碼，<html>標簽語言有【開始標簽】和【結束標簽】，中間為標簽的內容，先我們輸入頭和尾。
<html> </html>
2、一個簡單的 HTML 文檔，<head>帶有最基本的必需的元素。在中間加入標題<title>標簽，在title標題中加入網頁標題名：css面頁布局，可以不寫。
<html> <head> <title>css網頁布局 </title> </head> </html>
3、網頁布局<style> 標簽用于為 HTML 文檔定義樣式信息，創建高級的布局非常耗時，使用模板是一個快速的話，搜索引擎可以找到很多免費的網站模板。
<html> <head> <title>css網頁布局 </title> </head> <style>...網頁布局... </style> </html>
4、<body>元素包含文檔的所有內容，比如：文本、超鏈接、圖像、表格和列表等。
<html> <head> <title>css網頁布局</title> </head> <body> <p>body 元素的內容會顯示在瀏覽器中。</p> <p>title 元素的內容會顯示在瀏覽器的標題欄中。</p> </body> </html>
推薦學習：Html視頻教程
