網頁搭建過程當中的進一步理解

本週在繼續完善大衆點評，遇到了幾處知識性問題，特此記錄

關於背景

1. 背景的做用就是把圖片設置爲本身想要的狀態
2. 背景圖能夠重複設置
3. 設置背景須要的屬性background-…
4. 當設置多個背景的時候：用background-image引用了多個圖片，在後面的相應屬性操做也能夠用先後來區分

   background-image:url1,url2,...,urlN;
   background-repeat : repeat1,repeat2,...,repeatN;
   backround-position : position1,position2,...,positionN;
   background-size : size1,size2,...,sizeN;
   background-attachment : attachment1,attachment2,...,attachmentN;
   background-clip : clip1,clip2,...,clipN;
   background-origin : origin1,origin2,...,originN;
   background-color : color;

代碼中的就是相互對應的例子

1. 背景的位置，依靠background-origin屬性來定位背景圖片，屬性有三個屬性值content-box, padding-box,和 border-box，對應的關係以下：
2. 
3. 可是筆者感受背景屬性的使用仍是不太靈活，由於筆者沒有發現背景的圖片能像盒子模型那樣調整的靈活，因此當出現一些圖片的時候，仍是推薦使用<img>標籤

關於全局屬性的理解

1. 當初在看html的時候沒有好好理解這個概念，本週從新認識到了
2. 能夠給元素設置屬性，不一樣的屬性有私有的屬性值
3. 有一些屬性能夠給大多數的元素設置，這些屬性就叫作全局屬性
4. 全局屬性方便了咱們對於html的總體把握，以及一些細節的運用
5. 常見的全局屬性：id、class、style…

關於data-*的理解

1. data是一種全局屬性
2. 在寫大衆點評的時候遇到了一個奇怪的東西
3. 
4. 這段代碼裏有文字，data-click-title一類，乍一看容易理解成這是一個點擊以後就會出現的操做，可是查閱資料以後並不是如此
5. 這段代碼相似於咱們在c++中理解的變量，js中的，data也能夠理解成爲js中的var，咱們須要在這一段元素當中標記一些東西的時候，就能夠把這些東西存儲到這個data-*-..變量中
6. 爲何會有這樣的格式呢？
7. 就像咱們設置class類同樣，便於記憶
8. data屬性有他特有的命名方式
9. data-* 屬性由如下兩部分組成：

   a.屬性名不要包含大寫字母，在 data- 後必須至少有一個字符。

   b.該屬性能夠是任何字符串

注意： 自定義屬性前綴 "data-" 會被客戶端忽略。

1. data-* 屬性用於存儲私有頁面後應用的自定義數據。
2. data-* 屬性能夠在全部的 HTML 元素中嵌入數據。

關於bootstrap

1. 一行一定分紅12列，只不過看本身是否須要的不一樣引用多少
2. 當相加多餘12列的時候，自動換行
3. xs、md、sm等是根據頁面的寬度不一樣來分級發揮做用的

改進導航欄

1. 導航欄出現了問題，就是排列的問題（上圖是完美版）
2. 碰見問題：每一小塊沒法徹底展開、每一行沒法列排列整齊
3. 我採用了兩種方式：
4. p標籤裏套a標籤，直接對a標籤進行操做，可是效果很差，行處理到位，可是列沒法對齊
5. 操做li標籤，列寬沒法設置，不成樣子
6. 問題本質：是關於display屬性的問題，inline屬性沒法進行不少的操做，須要把它修改成block就能夠進行正常操做了，關於具體的思路以及知識點，上一篇博客寫過這裏只是一個具體的使用案例

關於layoutit

1. 一個神器，經過拖動模塊實現排版、css的效果
2. 好用是真的
3. 不利於新手掌握概念，利於快速搭建板塊
4. 下載生成的代碼的時候，有一些庫是系統生成的，使用的時候要帶下來

其餘

1. 練習網頁的過程前期很煩躁，可是越日後期越順手，寫的也越天然
2. 代碼寫的越多，越能體會命名以及註釋的重要性，之後必定養成註釋的好習慣
3. 文件分類，命名引用的都要遵照規範，有規矩纔有條理，纔有效率
4. 多思考、多探索
5. border屬性要想表示出正常的想要的效果，必需要寫邊的格式，不然即便設置了border的寬度與顏色，也沒法顯示。