在桌面建立壹個index.htm的文件和main.css的文件，當然妳也可以不用main.css的文件，但是為了方便操作，還是建壹個吧。只要把記事本另存為就可以了。
2
做好這兩個文件後我們把網頁的基礎代碼寫上去，並使index文件受到main.css的控制，我們右鍵選擇用記事本打開index文件輸入代碼，並在head裏寫上<link href="main.css" type="text/css" rel="stylesheet">使它受到main.css控制
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3
下面我們去main.css寫壹些屬性看看是不是能控制index文件。我希望整個頁面是粉色的，看上去溫馨，我在main.css裏寫上*{background:#FF66FF}看看。我們打開index文件看看是不是在瀏覽器上是不是粉色的。在瀏覽器上是粉色的，表示已經受到css樣式表的控制了。
4
下面我們進行布局壹般網頁都是3層壹級，所以我們需要div布局了在body裏面寫壹般我會先分為3層
<html>
<head>
<title></title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top1"></div>
<div id="top2"></div>
<div id="top3"></div>
</div>
</body>
</html>
5
布局好後我們需要去定義屬性了，這裏我只是簡單的定義了壹下
*{background:#FF33FF}
#top{background:#FFFF99; height:1000px; width:800px; margin-left:auto; margin-right:auto}
#top1{background:#66FFFF; height:50px; width:800px;}
#top2{background:#FF00CC; height:400px; width:800px}
#top3{background:#FF9933; height:550px; width:800px}
定義好了我們打開預覽壹下看看，圖片是不是居中和分成3塊了。當然，顏色只是為了方便看清楚，可以不寫。
6
其實做網頁就是不斷的畫框，只要知道布局和定義屬性就可以了，下面我們就整個做壹下，因為我的有壹些是壹樣的，可以用class調用，class=baidu這個只是隨便寫的，妳愛等於什麽就等於什麽
<html>
<head>
<title></title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top1">這裏都是我截圖的照片</div>
<div id="top2">
<div class="baidu"></div>
<div class="baidu"></div>
</div>
<div id="top3">
<div class="baidujingyan"></div>
<div class="baidujingyan"></div>
</div>
</div>
</body>
</html>
7
下面我們再去定義他的屬性，當然我只是簡單的定義壹下
*{background:#FF33FF}
#top{background:#FFFF99; height:1000px; width:800px; margin-left:auto; margin-right:auto}
#top1{background:#66FFFF; height:50px; width:800px; text-align:center; line-height:50px; font-size:30px}
#top2{background:#FF00CC; height:400px; width:800px}
#top3{background:#FF9933; height:550px; width:800px}
.baidu{background:#FF6666; height:380px; width:380px; float:left; margin:10px}
.baidujingyan{background:#FFCC00; height:530px; width:380px; float:left; margin:10px;}
8
因為我這個是我截圖相冊的網頁，下面我們就放照片吧，這裏我偷個懶，把照片都放在桌面了，所以不用連接照片地址了。
<html>
<head>
<title></title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top1">這裏都是我老婆的照片</div>
<div id="top2">
<div class="baidu"><img src="QQ圖片20141212090452.jpg"></div>
<div class="baidu"><img src="QQ圖片20141212090346.jpg"></div>
</div>
<div id="top3">
<div class="baidujingyan"><img src="QQ圖片20141212090224.jpg"></div>
<div class="baidujingyan"><img src="QQ圖片20141212090255.jpg"></div>
</div>
</div>
</body>
</html>
如果圖片不在同壹層目錄，就需要連接到圖片地址
9
這樣壹個網頁就做好了，如果需要制作精美的網頁，就需要不斷的進行div布局和css樣式的規定了。
10
下面我來說說網頁制作的定義，網頁的制作只要會使用div不停的布局，不停的定義他的屬性，基本靜態的網頁就是這樣做出來的