因為期末考試、調(diào)整心態(tài)等等的種種原因，距離上一次的項目練習(xí)已經(jīng)過了很久了，今天終于有時間繼續(xù)練習(xí)HTML5+CSS3的頁面架構(gòu)和設(shè)計稿還原。設(shè)計圖很長，整個頁面分為了好幾個區(qū)域，所以就不放完整的設(shè)計圖了，具體的設(shè)計文件可以在文末的Github地址中下載。第一次的總結(jié)是以我對頁面架構(gòu)的理解，按照代碼實現(xiàn)順序講解的，那這一次就按照遇到的問題總結(jié)性地記錄吧。歡迎大家看完我的作品和總結(jié)以后，提出寶貴的建議！謝謝大家！

　　經(jīng)過上一次的練手，這次的練手就更加從容了，不僅僅是為了查缺補(bǔ)漏，也是為了解決問題的同時，讓代碼可以更加簡潔。但也有一些小瑕疵，比如說頁面中每個模塊的每個標(biāo)題其實都是同樣的字號以及顏色，部分的標(biāo)題根據(jù)背景顏色有變化，本來可以在開頭先設(shè)置總體的顏色和字號，這樣遇到特殊情況的時候再進(jìn)行修改。但是因為最后犯懶，這部分的設(shè)置就在每個模塊里重復(fù)了很多遍。還有頁面的字體也是沒有導(dǎo)入的，所以顯得沒有涉及稿那么完美了。還有一點疑問是，因為是靜態(tài)頁面，所以所有的尺寸都是固定值，在頁面縮放的時候就會出現(xiàn)一些不好的現(xiàn)象，而且設(shè)置了絕對定位以后，也是不可以同時實現(xiàn)響應(yīng)式的。這樣在實際的產(chǎn)品生產(chǎn)中，應(yīng)該是大家都很不友善的？下一個作品要好好地考慮這個問題呢。最后一點是，頁面上有很多可以用到JavaScript的地方，不過現(xiàn)在學(xué)藝不精，也還沒有勇氣嘗試（？？？），所有也沒有好好設(shè)計，但能夠用CSS實現(xiàn)的，還是實現(xiàn)了。

　　下面就從我在實現(xiàn)過程中遇到的一些問題來進(jìn)行總結(jié)吧。

問題一：遇到行內(nèi)元素與塊級元素需要在同一行上顯示時，總會讓人很抓狂。

這個問題在上一次作品中也遇到了，提到幾種解決方案，針對一些問題，有的方案可以解決，而有的卻沒有什么效果。下面就根據(jù)我實現(xiàn)頁面過程中遇到的問題，再來說說我的解決方案。

方案一：神奇的vertical-align

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

在這個頁面中，紅框圈的地方是一個表單的文本輸入框，是由多個div組成，div中包括了img圖片和input輸入框。圖片和輸入框就會發(fā)生錯位的問題，我使用將圖片的樣式設(shè)置為“vertical-align：middle ；”的方法后，就可以簡單地解決這個問題。（注：在網(wǎng)上搜索解決方案的時候，有答案提到將input的樣式line-height設(shè)置為與div同高，但我嘗試后發(fā)現(xiàn)，沒能成功。后來才使用vertical-align設(shè)置成功了。）

代碼如下：

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

.textbox img {
    vertical-align: middle;
}.textbox input {
    font-size: 13px;
    width: 200px;
}

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

同樣的，下面這個是圖片+文字的組合，也是設(shè)置“vertical-align：middle； ”即可。

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

方案二：使用margin。

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

圖中的組合是圖片+多個段落文字，這個時候嘗試了vertical-align以后發(fā)現(xiàn)，還是不能正常顯示，這個時候就只能選擇使用margin的方法。將img的樣式設(shè)置為“float：left；”，使用div包裹文字，并設(shè)置左邊距即可。

代碼如下：

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

.sers img {
    float: left;
}.serstext {
    margin-left: 80px;
}

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

下面二圖也是同樣的例子：

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

方案三：是將圖片作為div的背景圖片，再修改文字的屬性即可。

這個方案就要視圖片是否適合作背景圖片的具體情況而定了。在本次項目中就沒有使用這個方法。

附加的方案四：其實不是圖片和文字的情況，而是單純的文字在div中水平居中和垂直居中。

可以使用“text-align：center；”設(shè)置水平居中以及將文字的line-height設(shè)置為與div同高以設(shè)置垂直居中。

代碼如下：

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

.copyright {
    height: 45px;
    background-color: #709dca;
    text-align: center;
}.copyright p {
    line-height: 45px;
    color: #fff;
    font-size: 13px;
}

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

如下圖效果：

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

問題二：取消元素的默認(rèn)樣式，分別為取消inline、inline-block元素的默認(rèn)邊距以及input元素的默認(rèn)樣式。

一、取消inline、inline-block元素的默認(rèn)邊距

每次按照設(shè)計稿設(shè)定a元素的邊距時，發(fā)現(xiàn)無論怎么設(shè)置都會多出一點默認(rèn)的邊距，而出現(xiàn)這個問題的原因是標(biāo)簽段之間的空格，去掉HTML中的空格即可。

方案一：去掉HTML空格。

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

<div>
     <a>
     ...</a><a>
     ...</a><a>
     ...</a></div>或：<div>
     <a>...</a     ><a>...</a>
     ><a>...</a></div>

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

方案二：添加HTML注釋。

<div>
     <a>...</a><!--
     --><a>...</a><!--
     --><a>...</a></div>

方案三：使用margin負(fù)值進(jìn)行縮進(jìn)（不推薦）

方案四：不使用閉合標(biāo)簽，僅閉合最后一個標(biāo)簽。

<div><a>...<a>...<a>...</a>

方案五：使用“font-size：0px；”

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

.space {
     font-size：0px；
}
.space a {
     font-size：12px；
}

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

方案六：使用letter-spacing或word-spacing。

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

.space {
     letter-spacing：-3px；
}
.space a {
     letter-spacing：0px；
}
或
.space {
     word-spacing：-6px；
}
.space a {
     word-spacing：0px；
}

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

最后很尷尬的是，不知道什么原因，上述的方法都不能夠成功。最后是將HTML代碼中a元素不留任何空格。當(dāng)然，在實際生產(chǎn)中，代碼被壓縮后，也就沒有空格了，這時就不影響邊距的設(shè)定了。如我在項目中是這樣設(shè)置的：

<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元素的默認(rèn)樣式。

在Chrome瀏覽器中，input元素自帶有點擊后，自動顯示一個藍(lán)色的外邊框。取消這一效果只需要設(shè)定border和outline為none即可。

問題三：關(guān)于a元素的三個問題，分別為在鏈接周圍加上背景色、設(shè)置a的上邊距以及a元素的四個偽類。

一、在鏈接周圍中加上背景色

如下圖效果所示：

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

當(dāng)時做的時候，是想著用一個設(shè)置背景顏色的button按鈕，但其實只要設(shè)置a元素的padding屬性和背景顏色即可。代碼如下：

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

.price_box a {
    color: #fff;
    font-size: 14px;
    display: inline-block;
    margin-top: 35px;
    padding: 20px;
    background-color: #ffbb42;
    border-radius: 2px;
}

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

二、設(shè)置a元素的上邊距。

行內(nèi)元素如a、span等等的元素?zé)o法設(shè)定上下邊距，這時只要設(shè)置樣式“display：inline-block；”即可。從上一例子可以看到通過設(shè)置了display，以設(shè)定margin-top。

三、設(shè)置a元素的四個偽類：a：link、a：visited、a：hover、a：active。

通過設(shè)置a元素的四個偽類，可以改變鼠標(biāo)與a元素之間的操作效果，如導(dǎo)航欄中，鼠標(biāo)經(jīng)過時改變背景色等等的效果。

效果圖如下（截圖時，鼠標(biāo)被隱藏了）：

 Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

代碼如下：

.head nav a:hover {
    color: #fff;   
    background-color: #ffbb42;
    border-radius: 2px;
}

問題四：調(diào)整字間距。

因為沒有使用設(shè)計中的字體，而原字體的字間距并不適合，所以需要調(diào)整字間距。

調(diào)整字間距可以使用letter-spacing或word-spacing。

問題五：hr元素的屬性設(shè)置。

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

圖中的橫線是使用<hr>實現(xiàn)的，可是原本默認(rèn)的樣式卻不太適合，因此改變了hr元素的長度和顏色。但修改顏色的時候要注意，一般用color改變文本顏色，而線條等的元素則使用background-color來修改，并且需要設(shè)定一個線條的高度才能顯示顏色，同時hr還有一個默認(rèn)的boder屬性，所以還要設(shè)置為none。代碼如下：

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

hr {
    width: 330px;
    height: 1px;
    border: none;
    background-color: #e2e9f0;
}

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

問題六：只選擇為單數(shù)序列的元素。

在文本或區(qū)塊中常常有不同列或行的元素需要有不同的設(shè)定，因此就需要使用CSS選擇器，而nth-child（n）就可以根據(jù)n的值選擇元素來應(yīng)用樣式。

如下圖所示：

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

可以看到紅框中的兩個input框的寬度是不一樣的，這個時候就可以使用nth-child來設(shè)定不同的寬度，代碼如下：

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

.contact .textbox:nth-child(1) {
    width: 305px;
}.contact .textbox:nth-child(2) {
    width: 385px;
}

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

詳細(xì)的解釋可以查看：http://www.w3school.com.cn/cssref/selector_nth-child.asp

　　在練習(xí)中出現(xiàn)的問題大概就是這些，常常以為看過了書，就能一定能運用起來。實際上卻不是這樣的，在面對問題的時候，很大概率上是不能反應(yīng)過來，常常是搜索了方法以后，才會意識到，啊，原來可以這樣子做，原來還有這種方法，原來因為某個知識點的原因等等，還是需要通過實踐才能知道自己的能力到了多少，才能積累更多解決問題的經(jīng)驗。做到了第二個（實際上是第三個）項目，知道了自己還有很長的路要走，很多的知識要學(xué)習(xí)，很多的操作要練習(xí)。以前做項目的時候，常常添加一個樣式就要刷新一下，看看效果?，F(xiàn)在已經(jīng)可以先寫好想到的樣式，再來解決問題，效率提高了不少，大概都是因為練習(xí)多了，經(jīng)驗豐富了，也就知道了不會出錯的常規(guī)操作，信心也增加了呢！

　　但還是能夠在實踐中發(fā)現(xiàn)很多的不足，應(yīng)該更有大局觀一些，通用的樣式應(yīng)該提前想好、設(shè)定好，減少代碼的冗余。應(yīng)該多使用代碼解決而不是靠圖片，提高用戶的下載效率。應(yīng)該要開始使用JavaScript來做動態(tài)效果，可是因為沒信心、拖延癥，腳步一直停滯不前。應(yīng)該要解決拖延癥，簡單的頁面一天就能完成，提高工作的效率……以前?？磿粚嵺`，現(xiàn)在都在實踐卻不看書，不好不好。

　　所以，近期目標(biāo)是要開始練習(xí)JavaScript的小項目，開始認(rèn)真學(xué)習(xí)jQuery，要快馬加鞭地加油了！

http://www.cnblogs.com/omoc/p/7144231.html