HTML5+CSS3靜態頁面項目-BusinessTheme的總結

標籤：script   問題   心態   https   貴的   img   item   str   selector   

　　因為期末考試、調整心態等等的種種原因，距離上一次的項目練習已經過了很久了，今天終於有時間繼續練習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

網頁觀看地址：http://htmlpreview.github.io/?https://github.com/omocc/PracticeItem/blob/master/7.5%E5%AE%9E%E6%88%98%E7%BB%83%E4%B9%A0-2/index.html

HTML5+CSS3靜態頁面項目-BusinessTheme的總結