文章目錄
- 前言
- 一、準備環境
- 二、創建站點（創建一個文件夾）
- 三、將站點部署到編寫器中
- 四、VScode實用小設置
- 五、案例展示
前言
首先了解前端三件套：HTML、CSS、JS
HTML：超文本標記語言、框架層、描述數據的；
CSS：層疊樣式表、表現層，美化修飾數據的；
JS：動作層、實現交互、加工處理數據的。
一、準備環境
1、下載一個編寫器:
vscode，常見的還有hbuilder、sumlim；
2、安裝一個解釋執行器：
任何瀏覽器都可以，但推薦使用firefox火狐瀏覽器，因為它可以在做CSS時一邊做一邊立即就可以看到效果。
可以下載一個騰訊電腦管家，在里面尋找你需要的應用軟件，非常方便！
二、創建站點（創建一個文件夾）
1、在任意磁盤位置創建一個文件夾，這里以在桌面創建為例：
2、在里面再創建兩個文件夾，用于放圖片或視頻等的素材：
三、將站點部署到編寫器中
1、打開vscode，點擊文件—>打開文件夾…選中剛才創建好的文件夾
2、創建css、html文件
3、打出一個感嘆號！或者doc敲回車，自動搭建好框架
4、將html文件與css文件連接起來
我們可以打開瀏覽器檢查是否連接上：
找到我們創建的站點—>右鍵打開—>在瀏覽器中右鍵點擊查看源代碼—>點擊show.css，如果連接成功會自動跳轉，反之會顯示找不到文件。
四、VScode實用小設置
1、關于字體：
文件—>首選項—>設置—>文本編輯器—>字體；
如果希望按住鼠標滾軸和ctrl進行調節：找到
點擊settings.json進去再最后一句加上:
"editor.mouseWheelZoom": true
2、主題顏色：
依然是在設置里面，有個工作臺—>外觀—>color theme；
3、軟件的漢化：
點擊擴展—>搜索chinese—>選擇簡體中文下載。
五、案例展示
1、在HTML中編寫結構層：
思想：寫盒子、搭框架。
例如下面這樣一個案例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的前端頁面</title><link rel="stylesheet" href="show.css">
</head>
<body><div class="top">1</div><div class="middle"><div class="left">3</div><div class="right">4</div></div><div class="bottom">5</div>
</body>
</html>
2、在CSS中編寫表現層：
我們可以在vscode中寫代碼，但是更推薦在火狐瀏覽器的樣式編輯器中寫，因為可以看到即使效果
點擊這里，找到樣式編輯器。
每次更改切記保存！
*{margin:0;padding:0;
}
body{background: aliceblue;
}
.top{width: 900px;height:100px;border:solid 3px cadetblue;margin-top:20px;margin-left:auto;margin-right:auto;background:lightcyan;
}
.middle{width: 900px;height:450px;border:solid 3px lightsteelblue;margin-top:20px;margin-left:auto;margin-right:auto;background:lightgoldenrodyellow;
}
.left{width: 400px;height:400px;border:solid 3px lightsteelblue;margin-top:20px;margin-left:20px;margin-right:20px;background:lightgrey;float:left;
}
.right{width: 400px;height:400px;border:solid 3px lightsteelblue;margin-top:20px;margin-left:20px;margin-right:20px;background:lightgrey;float:right;
}
.bottom{width: 900px;height:100px;border:solid 3px yellow;margin:20px auto;background:pink;
}
說明幾點：
1、關于居中可以用margin:20px auto;（上下邊距20，水平居中）去代替
margin-top:20px;
margin-left:auto;
margin-right:auto;
2、margin：外邊距；padding：內邊距。
3、float：每個盒子獨占一行，如果希望放在同一行就需要浮動一下。
)