單個頁面：?
1.拿到設計圖把需要的圖片從設計圖中摳出來。?
2.對比設計圖寫整個的頁面結構（只寫html），并且順便給需要做樣式的html元素，指定class名字。?
3.對比結構，寫css。先確定布局（比如說，頭部要固定啊，中間內容部分要居中啊什么的），再確定單個元素的樣式。?
4.添加交互效果。
注意：在css中，要在開始（body）指定基本的字體樣式，比如：
來源：?https://blog.csdn.net/nikita1995/article/details/52936110
```
@font-face {
? ?font-family: 'icomoon';
? ?src: url('../font/icomoon.eot');
? ?src: url('../font/icomoon.eot?#iefix') format('embedded-opentype'),
? ?url('../font/icomoon.ttf') format('truetype'),
? ?url('../font/icomoon.woff') format('woff'),
? ?url('../font/icomoon.svg#icomoon') format('svg');
? ?font-weight: normal;
? ?font-style: normal;
}
```
這里添加了一種叫icmoon的自定義字體。
```
body {
? ?font: 14px/162% Helvetica, Arial, 'icomoon', sans-serif;
? ?color: #555;
}
```
這里，指定字體為：Helvetica, Arial, ‘icomoon’, sans-serif;?
字的顏色為：#555?
字的大小為：14px?
行間距為 :162%
整個應用：?
1.按照設計圖，做出頁面?
2.確定頁面間的邏輯關系（點擊哪個鏈接，跳到哪個頁面。點擊哪個按鈕，獲取什么內容）?
3.寫服務代碼（見下面例子）?
4.把整個應用放到服務器上，運行服務代碼?
5.訪問 ：http://服務器的ip:端口號 ,就能返回對應的頁面（如果將域名解析到對應的ip地址，可直接訪問域名）
對于第3步（以node為例）：?
你訪問首頁：http:www.chirsen.com;就會發送一個http的請求，請求送到這個地址對應的ip，?
有這個ip的服務器上正好有個程序在運行（你寫的服務器代碼）。
服務器程序做的事兒：?
a.解析請求(程序通過這一步，搞清楚，你的請求地址是什么，你帶的參數是什么等等這些問題)?
b.解析完了之后，就根據不同的請求地址，跳到不同的處理程序中（我們管這個叫路由）?
c.在程序中，做處理（數據庫的增刪改查啊什么的）?
d.把得到的結果返回給瀏覽器（請求從哪兒來的，返回到哪兒去），這個結果，可能是一個頁面，也可能是一個數據
例子：
```
//nodejs簡易網站搭建程序
?
? ? ? ?var http = require("http"),
? ? ? ? ? ?url ?= require("url"),
? ? ? ? ? ?path = require("path"),
? ? ? ? ? ?fs ? = require("fs"); //這些就是一些引用，不用知道
?
? ? ? ?http.createServer(function (req, res) { //req就是瀏覽器發過來的請求
?
? ? ? ? ? ?//對req（請求）進行地址解析（比如說：你在瀏覽器輸入：http:xxx.xxx.xx/aa, 這里就會拿到 /aa）
? ? ? ? ? ?var filepath = url.parse(req.url).pathname;
?
? ? ? ? ? ?//下面，我們根據這個filepath的不同，進入不同的處理程序
?
? ? ? ? ? ?switchfilepath){
? ? ? ? ? ? ? ?case "aa":
? ? ? ? ? ? ? ? ? ?//一個處理函數,得到要返回的數據
? ? ? ? ? ? ? ? ? ?var result = serverFunctionA();
?
? ? ? ? ? ? ? ? ? ?//返回的數據的頭部信息
? ? ? ? ? ? ? ? ? ?res.writeHead(200, {"Content-Type": "text/html"});
?
? ? ? ? ? ? ? ? ? ?//把數據寫進返回
? ? ? ? ? ? ? ? ? ?res.write(result);
?
? ? ? ? ? ? ? ? ? ?//關閉,發送 返回
? ? ? ? ? ? ? ? ? ?res.end()
?
? ? ? ? ? ? ? ? ? ?break;
? ? ? ? ? ? ? ?case "bb":
? ? ? ? ? ? ? ? ? ?//又是一個處理函數
? ? ? ? ? ? ? ? ? ?serverFunctionB();
? ? ? ? ? ? ? ? ? ?res.writeHead(200, {"Content-Type": "text/javascript"});
? ? ? ? ? ? ? ? ? ?break;
? ? ? ? ? } ? ?
?
? ? ? ? ? ?//一個處理函數
? ? ? ? ? ?function serverFuntionA(){
? ? ? ? ? ? ? ?//進行一些處理，比如說讀取一個文件"aa.html",然后把這個文件返回
? ? ? ? ? ? ? ?var data = fs.readFileSync("./aa.html");
?
? ? ? ? ? ? ? ?return data;
? ? ? ? ? }
?
?
? ? ? }).listen(8080, "192.168.95.1"); //監聽該ip對應的服務器上的端口
```
對于第四步：只需要在你的服務器中，運行你寫的代碼就行了
