在寫任何頁面之前記得問自己一個問題 — 真的確定看清楚了嗎？

要實現的頁面

mockup

乍一看挺簡單的一張頁面，但是寫完后和大神交流了下才發現，很多東西是我沒有看清楚的，更或者說一些東西只看到了其中的一部分，寫完反復感受了下大神提到的需要改進的地方，在這里簡單總結了一下。

我們想的一樣嗎

有興趣的可以試試按自己的想法劃分一下這個頁面，挺好玩的。

按功能塊劃分大的整體應該是分三部分的，依據有背景顏色、頁面功能、重復性用戶體驗等......

比如上面這張頁面，最開始有彩色背景圖片那一部分應該屬于Header部分，中間背景色是白色的應該屬于頁面的主體部分，中間浮起來的那個橫條底色是白色的，所以應該和主體部分連在一起的...

再往下看，按理說最低部的那條白色的應該是footer，但是，再觀察下就會發現上面的 Search Bo x和 Header 用的應該是同一套東西，所以從用戶體驗角度來考慮，根本不需要設計重復的 Search 框來放到頁面相對來說比較醒目的部分，所以，自然這部分屬于Footer會更合理些。

• Header
  Header部分也就是背景是街景圖片的部分，模塊包括Logo、Login部分，Search Box部分，該模塊應該用<header>標簽包起來

• Main
  Main部分也就是中間有白色背景的部分，模塊包括浮起來的Agents框、HOW IT
  WORKS模塊、WHY CHOOSE US模塊、人物介紹模塊，每個模塊應該用<section>標簽包起來

• Footer
  Footer部分也就是底部從背景是人物頭像開始到完，包括Search Box模塊、Navgation模板、Socia Link模塊，該模塊應該用<footer>標簽包起來

整體的對齊

其實在開始之前，要注意觀察下整體左右是有個邊界線的，從上到下有些部分是有一些縮進了的，其他基本都是對齊的。

還有這里，能看出來上下基本是對齊的，所以縱向所有部分應該在同一個li內的。

同樣功能的模塊是有一定對齊效果的

圖片的設置

就拿背景圖片來說吧，一般分兩種，一種比設備尺寸大的，一種比設備尺寸小的，前者一般設置background-size為contain來縮小背景圖片以完全裝入背景區，后者則可以設置為cover拉伸背景圖片以完全覆蓋背景區。

但是。通常給的圖片長和寬和你要使用的長寬是不Match的，自然就需要做一些犧牲了—裁剪圖片，但是作為一個要寫這個頁面的人，是需要考慮用戶的視覺美感的，我們需要細細品味自己所用圖片的內容和美感設計，就比如Header用的背景圖，盡量調整圖片的位置，讓被裁剪掉的圖片能保持其中的馬路會處在頁面整體的中間部分，那這就相對來說自然多了。

關于命名

經常寫的時候，總會糾結在命名的問題上，到底是下劃線好還是中劃線好呢，其實很多東西已經有人總結成規范了，只是自己不知道而已。

總體來說盡量按功能命名相對合理些，如果命名地太局限，頁面稍有改動，就需要多處改動了，所以，盡量保證擴展性和適應性盡可能地高。

同時盡量遵循三個原則—關注度分離、單一職責、DRY。

比如說有一個navgation塊，命名為.nav，它有一些元素比如item，合理的命名應該是.nav__item，item又有一些屬性比如被選中，就應該是中劃線的形式—.nav--active

詳情請閱讀 BEM — It is a known fact that the right styleguide can significantly increase development speed, debugging, and the implementation of new features in legacy code.

還有關于樣式的規范，一般應保證選擇器簡潔，保證一定的重用性等。

詳情請閱讀 OOCSS — make CSS modular and object-based

設置透明度

其實正確的做法是應該給input框的背景設置白色和半透明狀態，placeholder的顏色就是白色，原因是設置了opacity的元素，其子元素也會成半透明狀態，這就導致設置的placeholder的顏色也是半透明的，所以，應該只給 input框的背景設置白色和相應的半透明狀態才是合理的。

哪些是偽元素

連接的線

title下面的短線

像這些暗色的裝飾類的元素，內容不太突出的部分，用偽元素實現就相對來說合理些，像第一張圖那條橫線，給1和2設置偽元素::after肯定比自己寫一條線然后裁啊裁，挪啊挪簡單而且合理地多。

暗色的文本

講真，自己看到暗色的段落的時候，就直接考慮設置透明度了，但其實是不對的，更合理地做法應該是所有看到的淺色的文本或者帶有蒙板的圖片都是靠顏色來控制的，而不是設置透明度看起來像灰色。