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

要實(shí)現(xiàn)的頁面

mockup

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

我們想的一樣嗎

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

按功能塊劃分大的整體應(yīng)該是分三部分的，依據(jù)有背景顏色、頁面功能、重復(fù)性用戶體驗(yàn)等......

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

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

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

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

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

整體的對齊

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

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

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

圖片的設(shè)置

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

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

關(guān)于命名

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

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

同時盡量遵循三個原則—關(guān)注度分離、單一職責(zé)、DRY。

比如說有一個navgation塊，命名為.nav，它有一些元素比如item，合理的命名應(yīng)該是.nav__item，item又有一些屬性比如被選中，就應(yīng)該是中劃線的形式—.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.

還有關(guān)于樣式的規(guī)范，一般應(yīng)保證選擇器簡潔，保證一定的重用性等。

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

設(shè)置透明度

其實(shí)正確的做法是應(yīng)該給input框的背景設(shè)置白色和半透明狀態(tài)，placeholder的顏色就是白色，原因是設(shè)置了opacity的元素，其子元素也會成半透明狀態(tài)，這就導(dǎo)致設(shè)置的placeholder的顏色也是半透明的，所以，應(yīng)該只給 input框的背景設(shè)置白色和相應(yīng)的半透明狀態(tài)才是合理的。

哪些是偽元素

連接的線

title下面的短線

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

暗色的文本

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