對於網頁製做的進一步理解

時間 2020-04-26

標籤對於網頁製做進一步理解欄目 HTML 简体版

原文原文鏈接

本週主要製做了一個校園官網首頁，以及初步瞭解了bootstrap，並嘗試在網頁製做中運用它，不得不說第一次用html還有css寫這麼長的東西確實很痛苦，可是總要有實踐才能把本身學到的東西融會起來。css

網頁製做過程

此次的製做主要是照着校園官網去模仿，不須要本身設計（不敢想象本身設計會出現什麼鬼東西），仔細觀察再結合html的相關知識點能夠發現，由<div>標籤構成的頁面代碼是一塊一塊的排列在網站的頁面的，咱們在製做的過程當中爲了便於劃分能夠將他們按行和列逐層展開，因此首先得步驟就是將官網首頁拆分，拆分思路以下：html
- 網站的首頁大多數是分塊的，正如如下的大衆點評首頁截圖
  前端
- 該頁面拆分的結果是總體上分爲三行，即：c++
```
1. 最上面的功能欄
2. 第二層背景爲白色的搜索欄
3. 第三層各個站點的導航欄
```
- 下一步是對每一個行進行列的劃分，這是爲了便於在操做的時候理清思路，就拿第一行來講，能夠將文字的總體做爲一列，在這一列上設置css屬性讓它居中而且設置寬度。
- 觀察圖片，文字這一列分爲兩部分，左邊是定位座標，右邊是一些下拉菜單，爲了便於理解，再在這一列中設置一行，而後將這一行分爲兩部分（兩列），一部分靠右，一部分靠左，這樣總體的框架就出來了
按照上述思路設計好框架以後，開始對框架進行修繕咱們能夠設置一個css類來標出每一個框架的邊界bootstrap
```
.border{
    border:3px;
    solid:yellow;
}
```
在想要進行操做的框框上面加上設置的邊框類就能夠這樣就能夠直觀的進行操做了，操做框架的同時也要在其中寫上相應的內容框架
寫好框架與內容以後就是最激動人心的渲染了，渲染就是給框架還有內容的標籤加上一系列的css屬性還有js屬性，須要什麼樣的功能就要去查找相應的語言用法，推薦採用外部引入的方法來進行css和js的使用，這個渲染的過程會異常的漫長...

在本身的製做過程當中的一些小理解：函數

1.盒子模型的操做方法必定要靈活，要在腦子當中對盒子有一個清晰的概念熟悉從內到外的各個部分content、padding、border、margin，當設置四個方向的長度的時候，按照上右下左，的順序進行調整,同時也能夠利用具體的方向屬性進行調整，還能夠運用長度的正負進行調整，調整位置要有耐心
2.區分好邊框的背景顏色以及文字的背景顏色，說白了仍是盒子模型的問題
3.關於css文件中的各種的命名，當一個網頁特別長的時候，各類複雜的css就開始變得亂花漸欲迷人眼，推薦你們採用英文命名，分等級命名，這樣便於對於總體結構的把握與理解。網上有相應的命名規範，但願深刻研究的小夥伴能夠去搜。
4.在渲染的過程當中會出現不少小的誤差，有可能文件和本身寫的代碼有十分大的出入，這個時候須要多看控制檯，控制檯的做用十分重要。
5.製做的過程很繁瑣也很複雜，須要你們有耐心而且細心，在製做以前多思考，不要懶得動腦子，不要懶得動腦子，不要懶得動腦子！！
6.注意勞逸結合。

入門bootstarp

bootstrap：一個前端開發的框架，是目前很歡迎的框架，經過使用它可讓開發變得簡潔
框架：就是作到一半的css+js文件，咱們能夠引用它來完成一些特效操做，從而調高開發的效率與質量
使用方式能夠類比於c++裏面的函數庫，咱們使用以前要先引用庫，即在<head>標籤裏面插入以下代碼

推薦把bootstrap下載到本地，這樣檢查的時候會比較快學習

'    
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"'

引用完庫以後就要開始引用庫裏面的內容了，bootstrap能夠實現不少的功能，在此再也不贅述，推薦你們在學習的時候邊看邊作，這是一個實際操做型很強的東西（若是隻看不作，眼：我看懂了；大腦：還能夠；手：你倆行你倆來）
有了html還有css的基礎，bootstrap就是一個不斷應用深刻理解的過程，切記熟能生巧，少說多練

本週總結

這一週感受過的太快了，主要的事情就是在理解運用html，這一個階段最大的感覺就是須要多動腦、多思考，當把一個知識點理解的時候運用起來就好用多了，接下來的兩週我會主要鍛鍊bootstrap，我會把他的每一個小知識點總結下來，但願能再也不生疏。網站

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。