經過上一次的練手，這次的練手就更加從容了，不僅僅是為了查缺補漏，也是為了解決問題的同時，讓代碼可以更加簡潔。但也有一些小瑕疵，比如說頁面中每個模塊的每個標題其實都是同樣的字號以及顏色，部分的標題根據背景顏色有變化，本來可以在開頭先設置總體的顏色和字號，這樣遇到特殊情況的時候再進行修改。但是因為最后犯懶，這部分的設置就在每個模塊里重復了很多遍。還有頁面的字體也是沒有導入的，所以顯得沒有涉及稿那么完美了。還有一點疑問是，因為是靜態頁面，所以所有的尺寸都是固定值，在頁面縮放的時候就會出現一些不好的現象，而且設置了絕對定位以后，也是不可以同時實現響應式的。這樣在實際的產品生產中，應該是大家都很不友善的？下一個作品要好好地考慮這個問題呢。最后一點是，頁面上有很多可以用到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;}

詳細的解釋可以查看：

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

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

所以，近期目標是要開始練習JavaScript的小項目，開始認真學習jQuery，要快馬加鞭地加油了！

所有文件地址：

網頁觀看地址：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+CSS3BusinessTheme項目的總結的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。