網站icon圖標
引入方式：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
ico圖片製作方式：
1，準備一張400*400的圖片。
2，登陸http://www.bitbug.net/網站進行圖片格式轉換即可。
css Reset
參考資料：構架CSS基礎樣式庫
什麼是css reset
HTML標籤在瀏覽器中都有默認的樣式，不同的瀏覽器的默認樣式之間存在差別。例如ul默認帶有縮進樣式，在IE下，它的縮進是由margin實現的，而在Firefox下卻是由padding實現的。開發時瀏覽器的默認樣式可能會給我們帶來瀏覽器兼容性問題，影響開發效率。現在很流行的解決方式是一開始就將瀏覽器的默認樣式全部覆蓋掉，這就是css reset……原文
總結：css初始化與爲跨瀏覽器兼容做準備。
下載normalize.css。地址：http://necolas.github.io/normalize.css/
Normalize.css 是一個可定製的 CSS 文件，使瀏覽器呈現的所有元素，更一致和符合現代標準;是在現代瀏覽器環境下對於CSS reset的替代。 它正是針對只需要統一的元素樣式。該項目依賴於研究瀏覽器默認元素風格之間的差異，精確定位需要重置的樣式。 這是一個現代的，HTML5-ready 的 CSS 重置樣式集。著名的bootstrap就使用了它。
詳解
根據網站需要，重置與封裝normalize.css
簡單案例：
在引入normalize.css引入base.css內容如下
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{
margin: 0;
padding: 0;
}
注：
margin，padding的初始化，儘量不要使用“*”，範圍大，優化差，速度慢。
.clearfix:after{
/*清除浮動*/
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom:1;
}
img {
/* display: block; */
vertical-align: top; /* 解決圖片底測有空白縫隙的問題 */
}
.w { /* 版心的公共類 */
width: 1190px;
margin: 0 auto;
}
.fl { /* 浮動的公共類 */
float: left;
}
.fr {
float: right;
}
a {
text-decoration: none;
color: #999;
font-size: 12px;
}
a:hover {
color: #f10215;
}
i{
font-style: normal;
}
input,button {
border: 0;
outline: none; /* 取消輪廓邊框 */
}
ul,li{
list-style: none;
}
ul{
margin: 0px;
padding: 0px;
}
body {
background-color: #f6f6f6;
}
.f10{
color: #f10215!important;
}
網站logo製作
網站logo的渲染與製作必須遵循相應格式，這樣能更好的照顧到seo搜索引擎的優化，方便整個網站的後期建設。
以某東網站爲例：
<div class="logo">
<h1><a href="" title="某東網 ">
某東
<!-- 搜索引擎優化，雖然logo是圖片，但是這個字不能刪，css做隱藏處理 -->
</a></h1>
</div>
.logo{
box-shadow: 0 -12px 10px rgba(0,0,0,.2);
width: 190px;
height: 170px;
position: absolute;
top: -31px;
left: 0;
background-color: #fff;
}
.logo h1{
margin: 0;
}
.logo a{
text-indent: -999px;
overflow: hidden;/*隱藏某東兩個字*/
display: block;
width: 190px;
height: 170px;
background:url(../images/logo.png) no-repeat;
}
title與meta元素的搜索引擎優化
<title>長度上限：谷歌搜索引擎最大允許35箇中文字節，百度搜索引擎最大允許28箇中文字節。所以保證28個字之內，其內容要求緊扣網站主題、功能去做介紹。
一般格式：
<title>網站名（產品名）——產品介紹</title>
關鍵字分佈：最先出現的詞語權重越高。
關鍵字詞頻：主關鍵詞次數可出現多次，輔關鍵詞次數出現一次。
參考資料
某東：
<meta charset="UTF-8">
<title>某東(XX.COM)-正品低價、品質保障、配送及時、輕鬆購物！</title>
<meta name="description" content="某東XX.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!" />
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,某東" />
某寶：
<title>某寶網 - 淘！我喜歡</title>
<meta name="description" content="某寶網 - 亞洲較大的網上交易平臺，提供各類服飾、美容、家居、數碼、話費/點卡充值… 數億優質商品，同時提供擔保交易(先收貨後付款)等安全交易保障服務，並由商家提供退貨承諾、破損補寄等消費者保障服務，讓你安心享受網上購物樂趣！">
<meta name="keyword" content="某寶,某寶,網上購物,C2C,在線交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣信息,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪">
注：
name="description" content="……在搜索引擎搜索後，展示的介紹性文字，關鍵詞的填寫用“,”隔開，一般不超過120個漢字。
注：name="keyword" content="……關鍵詞前六、八個詞權重較高。
網站輪播圖常用結構
<div class="clo2">
<div class="clo2-hd"><!--左右按鈕-->
<a href="javascript:;" class="arr-l"></a><a href="javascript:;" class="arr-r"></a>
</div>
<ol><!--輪播圖標識-->
<li class="current"></li>
<li></li>
<li></li>
</ol>
<ul><!--輪播圖圖片集及連接-->
<li><a href=""><img src="" alt=""></a></li>
<li><a href=""><img src="" alt=""></a></li>
<li><a href=""><img src="" alt=""></a></li>
</ul>
</div>
常用工具
> css 代碼分析工具
檢測網站css性能，分析網站css代碼的利器，可以統計CSS代碼裏的規則、字體大小、寬度高度、顏色數等等。
W3C統一驗證工具（檢測本地文件）；
CSS統計數據（檢測已上線項目）；
> google PR查詢
檢測網站的受歡迎程度。
google PR查詢，站長之家
> SEO概況查詢
> css代碼壓縮
注：壓縮代碼一般以.min.css爲後綴名。