前端專案開發感悟

一、熊管家靜態專案感悟[11.24~11.27]

1、專案計劃劃分

• 首先設計通用結構，製作模板：如熊管家專案中，所有頁面共用頁尾，除主頁外的頁面共用導航欄。那麼就可以將導航欄、頁尾先寫好作為模板，並使用外部樣式表設計這些樣式。

• 其次，尋找通用模組，進行可移植的通用模組設計。模組並非是可以寫進模板裡的，因為一個模組在不同頁面中的位置可能不同。

  如熊管家專案中，有多處使用了6個小圖示，它們高度相同，只有微小不同。那麼可以進行基礎樣式設計，然後寫在一個單獨檔案中，在需要使用的時候直接copy。

  更小的部分又如在《關於我們》部分，公司簡介和團隊展示部分有高度相似的模組（除了文字不同），則在設計該頁面時，用類同時設計這一部分。

【總結】：除了通用結構，也不要忽視通用模組

2、版心佈局的意義：

假設將版心設定為1200px，margin:0 auto;

那麼當瀏覽器寬度在>1200px的範圍內減小時，由於版心左右外邊距是auto，所以此時會減小左右外邊距。則實際效果就是：中心版心區域不變，兩側通欄區域減小。

當瀏覽器寬度減小到1200px以下時，會產生水平滾動條並移除隱藏。

通過版心佈局，我們可以使得在1920px寬的螢幕上做的頁面，移動到1440px的顯示器後，只是通欄寬度改變，版心部分會正常顯示。

1920px

1440px

<1200px

【注】頁面中除了通欄外，所有內容都應該在版心中。如果內容沒有在版心中，而是在通欄中水平居中。那麼當瀏覽器寬度＜版心寬度時，頁面就會發生變形。變現為未在版心中的元素與在版心中的元素開始錯位。未在版心中的不會在瀏覽器寬度<1200px時停止移動，而是繼續顯示在頁面中心，直到它的寬度<瀏覽器寬度。

一般的模組結構為：

    <div class="wrap">
        <div class="container">
            <div class="content1"></div>
            <div class="content2"></div>
            <div class="content3"></div>
        </div>
    </div>

背景色問題：

​ 應該把wrap、container都設定上背景色，並且container不要用margin控制與上下模組的距離，用Padding控制與上下模組的距離。（因為padding有背景色而margin沒有）。

​ 這是由於一般通欄設定為100%，版心設定為1200px。但是要明確，100%是瀏覽器寬度的100%，當瀏覽器寬度減小，通欄也會減小。如果只設置通欄背景色，那麼當瀏覽器減小到1200px以下時，產生水平滾動條。向右滾動會發現沒有顏色。如果只設置版心背景色，那麼全屏時通欄沒顏色。（下例中只有一塊部分產生這種效果是因為用了多個版心，其中那一欄的版心未設定背景色）

3、超連結最好在製作的時候就做好連結，即使其他網頁並沒有做好。（否則最後連結容易錯漏）

4、選擇器問題：

應該避免巢狀多級id，如#A #B #C（300）。這樣會權重過高。當直接用#C（100）選擇的時候造成樣式無效。

遵循“低權重，高可讀”原則。

在HTML命名時：少用id，外層容器多用class。

在選擇器選擇時：少用父元素的id定位。

5、背景參考圖問題

通過將背景設為body部分的參考圖，並對頁面部分設定透明度，可以清晰的看出頁面與設計圖的差異

1. 背景參考圖設定

        body{
            background: url(./img/熊管家-新聞詳頁.png) no-repeat;
        } 
        .wrap{
            opacity: 0.6;
        }

​ ①background-position和background-size無需設定，因為預設就是左上角對齊且100%圖片大小。

​ ②對內部頁面的父元素設定透明度，如wrap是包裹了頁面中的所有元素的通欄

2. 背景參考圖與頁面的偏差

   ①Q：背景參考圖是否與頁面完全重合？

   ​ A：不一定，當瀏覽器產生下拉滾動條時，水平方向存在偏差是正常的。即水平方向在同一高度，垂直方向上有差距正常。

   ②Q：1920px寬度的顯示器，1920px寬度的設計圖，背景圖是否會完全顯示？

   ​ A：不一定，當頁面高度超過螢幕高度100%時，產生下拉滾動條，寬為15px，所以背景圖被覆蓋了15px。

   ③Q：背景圖與頁面為什麼不會完全重合？

   ​ A：當產生下拉滾動條時，瀏覽器全屏寬度為1905px，而設計圖的版心居中是在1920px時的居中，而由於左右外邊距是auto，這樣版心部分就會與設計圖的版心部分產生水平方向7.5px的偏差。

   6、命名相關問題

   1. 圖片素材命名要用英文

   2. 通用部分用

      comm-xxxxx

      其他按模組，如

      index-xxxx

      case-xxxx

   7、文字擴充套件性

   方法：

   1. 選擇性不設寬高

      如純文字性的東西一般不設高，讓頁面自己撐開。單行文字不設寬。

   2. 最大最小寬高（寫最大寬讓元素不超過，寫最小寬讓元素內文字過少時不至於太難看）

   3. 溢位隱藏

   4. 溢位省略

   測試：增加文字測試，在檢查中把文字多幾行看效果。

   後端富文字：待使用者新增的段落中，標題要給id或者class名字，不要直接用標籤名。因為在後端文字中的富文字標題可能也用了h1。

   或者說，要考慮後端富文字中的標籤樣式。