因為期末考試、調整心態等等的種種原因，距離上一次的項目練習已經過了很久了，今天終於有時間繼續練習HTML5+CSS3的頁面架構和設計稿還原。設計圖很長，整個頁面分為了好幾個區域，所以就不放完整的設計圖了，具體的設計文件可以在文末的Github地址中下載。第一次的總結是以我對頁面架構的理解，按照代碼實現順序講解的，那這一次就按照遇到的問題總結性地記錄吧。歡迎大家看完我的作品和總結以后，提出寶貴的建議！謝謝大家！
經過上一次的練手，這次的練手就更加從容了，不僅僅是為了查缺補漏，也是為了解決問題的同時，讓代碼可以更加簡潔。但也有一些小瑕疵，比如說頁面中每個模塊的每個標題其實都是同樣的字號以及顏色，部分的標題根據背景顏色有變化，本來可以在開頭先設置總體的顏色和字號，這樣遇到特殊情況的時候再進行修改。但是因為最后犯懶，這部分的設置就在每個模塊里重復了很多遍。還有頁面的字體也是沒有導入的，所以顯得沒有涉及稿那么完美了。還有一點疑問是，因為是靜態頁面，所以所有的尺寸都是固定值，在頁面縮放的時候就會出現一些不好的現象，而且設置了絕對定位以后，也是不可以同時實現響應式的。這樣在實際的產品生產中，應該是大家都很不友善的？下一個作品要好好地考慮這個問題呢。最后一點是，頁面上有很多可以用到JavaScript的地方，不過現在學藝不精，也還沒有勇氣嘗試（？？？），所有也沒有好好設計，但能夠用CSS實現的，還是實現了。
問題一：遇到行內元素與塊級元素需要在同一行上顯示時，總會讓人很抓狂。
這個問題在上一次作品中也遇到了，提到幾種解決方案，針對一些問題，有的方案可以解決，而有的卻沒有什么效果。下面就根據我實現頁面過程中遇到的問題，再來說說我的解決方案。
方案一：神奇的vertical-align
在這個頁面中，紅框圈的地方是一個表單的文本輸入框，是由多個div組成，div中包括了img圖片和input輸入框。圖片和輸入框就會發生錯位的問題，我使用將圖片的樣式設置為“vertical-align：middle ；”的方法后，就可以簡單地解決這個問題。（注：在網上搜索解決方案的時候，有答案提到將input的樣式line-height設置為與div同高，但我嘗試后發現，沒能成功。后來才使用vertical-align設置成功了。）
代碼如下：
.textbox img { vertical-align: middle; } .textbox input { font-size: 13px; width: 200px; }
同樣的，下面這個是圖片+文字的組合，也是設置“vertical-align：middle； ”即可。
方案二：使用margin。
圖中的組合是圖片+多個段落文字，這個時候嘗試了vertical-align以后發現，還是不能正常顯示，這個時候就只能選擇使用margin的方法。將img的樣式設置為“float：left；”，使用div包裹文字，並設置左邊距即可。
代碼如下：
.sers img { float: left; } .serstext { margin-left: 80px; }
下面二圖也是同樣的例子：
方案三：是將圖片作為div的背景圖片，再修改文字的屬性即可。
這個方案就要視圖片是否適合作背景圖片的具體情況而定了。在本次項目中就沒有使用這個方法。
附加的方案四：其實不是圖片和文字的情況，而是單純的文字在div中水平居中和垂直居中。
可以使用“text-align：center；”設置水平居中以及將文字的line-height設置為與div同高以設置垂直居中。
代碼如下：
.copyright { height: 45px; background-color: #709dca; text-align: center; } .copyright p { line-height: 45px; color: #fff; font-size: 13px; }
如下圖效果：
問題二：取消元素的默認樣式，分別為取消inline、inline-block元素的默認邊距以及input元素的默認樣式。
一、取消inline、inline-block元素的默認邊距
每次按照設計稿設定a元素的邊距時，發現無論怎么設置都會多出一點默認的邊距，而出現這個問題的原因是標簽段之間的空格，去掉HTML中的空格即可。
方案一：去掉HTML空格。
<div> <a> ...</a><a> ...</a><a> ...</a> </div> 或： <div> <a>...</a ><a>...</a> ><a>...</a> </div>
方案二：添加HTML注釋。
<div> <a>...</a><!-- --><a>...</a><!-- --><a>...</a> </div>
方案三：使用margin負值進行縮進（不推薦）
方案四：不使用閉合標簽，僅閉合最后一個標簽。
<div> <a>... <a>... <a>...</a>
方案五：使用“font-size：0px；”
.space {
font-size：0px；
}
.space a {
font-size：12px；
}
方案六：使用letter-spacing或word-spacing。
.space {
letter-spacing：-3px；
}
.space a {
letter-spacing：0px；
}
或
.space {
word-spacing：-6px；
}
.space a {
word-spacing：0px；
}
最后很尷尬的是，不知道什么原因，上述的方法都不能夠成功。最后是將HTML代碼中a元素不留任何空格。當然，在實際生產中，代碼被壓縮后，也就沒有空格了，這時就不影響邊距的設定了。如我在項目中是這樣設置的：
<nav> <a href="#">Home</a><a href="#Service">Service</a><a href="#About">AboutUs</a><a href="#Price">PricingTable</a><a href="#How">HowItWork</a><a href="#Client">HappyClients</a><a href="#Contact">ContactUs</a> </nav>
二、取消input元素的默認樣式。
在Chrome瀏覽器中，input元素自帶有點擊后，自動顯示一個藍色的外邊框。取消這一效果只需要設定border和outline為none即可。
問題三：關於a元素的三個問題，分別為在鏈接周圍加上背景色、設置a的上邊距以及a元素的四個偽類。
一、在鏈接周圍中加上背景色
如下圖效果所示：
當時做的時候，是想着用一個設置背景顏色的button按鈕，但其實只要設置a元素的padding屬性和背景顏色即可。代碼如下：
.price_box a {
color: #fff;
font-size: 14px;
display: inline-block;
margin-top: 35px;
padding: 20px;
background-color: #ffbb42;
border-radius: 2px;
}
二、設置a元素的上邊距。
行內元素如a、span等等的元素無法設定上下邊距，這時只要設置樣式“display：inline-block；”即可。從上一例子可以看到通過設置了display，以設定margin-top。
三、設置a元素的四個偽類：a：link、a：visited、a：hover、a：active。
通過設置a元素的四個偽類，可以改變鼠標與a元素之間的操作效果，如導航欄中，鼠標經過時改變背景色等等的效果。
效果圖如下（截圖時，鼠標被隱藏了）：
代碼如下：
.head nav a:hover { color: #fff; background-color: #ffbb42; border-radius: 2px; }
問題四：調整字間距。
因為沒有使用設計中的字體，而原字體的字間距並不適合，所以需要調整字間距。
調整字間距可以使用letter-spacing或word-spacing。
問題五：hr元素的屬性設置。
圖中的橫線是使用<hr>實現的，可是原本默認的樣式卻不太適合，因此改變了hr元素的長度和顏色。但修改顏色的時候要注意，一般用color改變文本顏色，而線條等的元素則使用background-color來修改，並且需要設定一個線條的高度才能顯示顏色，同時hr還有一個默認的boder屬性，所以還要設置為none。代碼如下：
hr { width: 330px; height: 1px; border: none; background-color: #e2e9f0; }
問題六：只選擇為單數序列的元素。
在文本或區塊中常常有不同列或行的元素需要有不同的設定，因此就需要使用CSS選擇器，而nth-child（n）就可以根據n的值選擇元素來應用樣式。
如下圖所示：
可以看到紅框中的兩個input框的寬度是不一樣的，這個時候就可以使用nth-child來設定不同的寬度，代碼如下：
.contact .textbox:nth-child(1) { width: 305px; } .contact .textbox:nth-child(2) { width: 385px; }
詳細的解釋可以查看：http://www.w3school.com.cn/cssref/selector_nth-child.asp
在練習中出現的問題大概就是這些，常常以為看過了書，就能一定能運用起來。實際上卻不是這樣的，在面對問題的時候，很大概率上是不能反應過來，常常是搜索了方法以后，才會意識到，啊，原來可以這樣子做，原來還有這種方法，原來因為某個知識點的原因等等，還是需要通過實踐才能知道自己的能力到了多少，才能積累更多解決問題的經驗。做到了第二個（實際上是第三個）項目，知道了自己還有很長的路要走，很多的知識要學習，很多的操作要練習。以前做項目的時候，常常添加一個樣式就要刷新一下，看看效果。現在已經可以先寫好想到的樣式，再來解決問題，效率提高了不少，大概都是因為練習多了，經驗豐富了，也就知道了不會出錯的常規操作，信心也增加了呢！
但還是能夠在實踐中發現很多的不足，應該更有大局觀一些，通用的樣式應該提前想好、設定好，減少代碼的冗余。應該多使用代碼解決而不是靠圖片，提高用戶的下載效率。應該要開始使用JavaScript來做動態效果，可是因為沒信心、拖延症，腳步一直停滯不前。應該要解決拖延症，簡單的頁面一天就能完成，提高工作的效率……以前常看書不實踐，現在都在實踐卻不看書，不好不好。
所以，近期目標是要開始練習JavaScript的小項目，開始認真學習jQuery，要快馬加鞭地加油了！
所有文件地址：https://github.com/omocc/PracticeItem/tree/master/7.5%E5%AE%9E%E6%88%98%E7%BB%83%E4%B9%A0-2