HTML5+CSS3BusinessTheme專案的總結

　　因為期末考、調整心態等等的種種原因，距離上一次的專案練習已經過了很久了，今天終於有時間繼續練習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><a>...</a>
</div><p><span style="font-family: " microsoft yahei font-size: color:>方案五：使用“font-size：0px；”</span></p><div class="cnblogs_code"><pre class="brush:php;toolbar:false">.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>Home</a><a>Service</a><a>AboutUs</a><a>PricingTable</a><a>HowItWork</a><a>HappyClients</a><a>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元素的长度和颜色。但修改颜色的时候要注意，一般用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