在寫任何頁(yè)面之前記得問(wèn)自己一個(gè)問(wèn)題 — 真的確定看清楚了嗎？

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

mockup

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

我們想的一樣嗎

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

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

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

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

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

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

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

整體的對(duì)齊

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

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

同樣功能的模塊是有一定對(duì)齊效果的

圖片的設(shè)置

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

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

關(guān)于命名

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

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

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

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

詳情請(qǐng)閱讀 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)保證選擇器簡(jiǎn)潔，保證一定的重用性等。

詳情請(qǐng)閱讀 OOCSS — make CSS modular and object-based

設(shè)置透明度

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

哪些是偽元素

連接的線

title下面的短線

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

暗色的文本

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