簡介
對于任何一門技術(shù)的學(xué)習(xí)和掌握损搬，最好就是在實際的項目中去不斷的練習(xí)起惕，把之前的知識熟練起來，只有不斷的使用堪夭，不斷的練習(xí)才不會忘記愕把，才能真正的掌握。
網(wǎng)頁的SEO
SEO是由英文Search Engine Optimization縮寫而來森爽， 中文意譯為“搜索引擎優(yōu)化”恨豁！SEO是指通過對網(wǎng)站進(jìn)行站內(nèi)優(yōu)化、網(wǎng)站結(jié)構(gòu)調(diào)整爬迟、網(wǎng)站內(nèi)容建設(shè)橘蜜、網(wǎng)站代碼優(yōu)化等)和站外優(yōu)化，從而提高網(wǎng)站的關(guān)鍵詞排名以及公司產(chǎn)品的曝光度付呕。 簡單的說就是计福，把產(chǎn)品做好，搜索引擎就會介紹客戶來徽职。
三大標(biāo)簽.png
網(wǎng)頁title 標(biāo)題
title具有不可替代性象颖，是我們的內(nèi)頁第一個重要標(biāo)簽，是搜索引擎了解網(wǎng)頁的入口姆钉，和對網(wǎng)頁主題歸屬的最佳判斷點(diǎn)力麸。
title.png
建議：
首頁標(biāo)題：網(wǎng)站名（產(chǎn)品名）- 網(wǎng)站的介紹
例如：
京東(JD.COM)-綜合網(wǎng)購首選-正品低價、品質(zhì)保障育韩、配送及時克蚂、輕松購物！
小米商城 - 小米5s筋讨、紅米Note 4埃叭、小米MIX、小米筆記本官方網(wǎng)站
Description 網(wǎng)站說明
對于關(guān)鍵詞的作用明顯降低悉罕，但由于很多搜索引擎赤屋，仍然大量采用網(wǎng)頁的MATA標(biāo)簽中描述部分作為搜索結(jié)果的“內(nèi)容摘要”。 就是簡要說明我們網(wǎng)站的主要做什么的壁袄。
注意點(diǎn)：
- 描述中出現(xiàn)關(guān)鍵詞类早，與正文內(nèi)容相關(guān)，這部分內(nèi)容是給人看的嗜逻，所以要寫的很詳細(xì)涩僻，讓人感興趣， 吸引用戶點(diǎn)擊。
- 同樣遵循簡短原則逆日，字符數(shù)含空格在內(nèi)不要超過 120 個漢字嵌巷。
- 補(bǔ)充在 title 和 keywords 中未能充分表述的說明.
- 用英文逗號 關(guān)鍵詞1,關(guān)鍵詞2
keywords 關(guān)鍵字
Keywords是頁面關(guān)鍵詞，是搜索引擎關(guān)注點(diǎn)之一室抽。Keywords應(yīng)該限制在6～8個關(guān)鍵詞左右搪哪。
京東首頁項目準(zhǔn)備
- 初始化文件
在代碼中引入normalize.css這是作為初始化的css.normalize.css 只是一個很小的CSS文件，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性坪圾。相比于傳統(tǒng)的CSS reset晓折，Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案兽泄。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap漓概、HTML5 Boilerplate、GOV.UK已日、Rdio、CSS Tricks 以及許許多多其他框架栅屏、工具和網(wǎng)站上飘千。。
- 網(wǎng)頁原型的獲取
可以使用谷歌瀏覽器網(wǎng)頁截圖插件來獲取整個京東網(wǎng)站的原型栈雳，或者是使用firefox瀏覽器保存整個網(wǎng)頁的原型护奈。
- 開發(fā)工具
開發(fā)的工具使用的vscode，是微軟的良心作品哥纫，目前為止算的上是前端開發(fā)的利器霉旗，個人是非常推薦使用的，支持豐富的插件蛀骇，優(yōu)雅的快捷鍵厌秒，完美的主體色彩，著實讓編程成為一種享受擅憔。
頭部
jd-header.png
分析：
- 總體上可以分為大的三部分：廣告欄鸵闪、導(dǎo)航欄、快速導(dǎo)航
- 廣告欄是大通欄里面嵌套一個水平居中盒子暑诸，盒子里插入圖片
- 導(dǎo)航欄是涉及到的點(diǎn)有浮動蚌讼，字體圖標(biāo)的制作和使用，定位
- 導(dǎo)航欄需要注意的是文字之間的小豎線這里不能使用border-right制作个榕，以為它的高是低于文字1px的篡石，所以需要的單獨(dú)的制作
- 快速導(dǎo)航欄，涉及到定位西采，logo結(jié)構(gòu)的書寫規(guī)范凰萨，盒子的影子效果
<!-- header部分 start -->
<header>
<!-- 廣告欄 -->
<div class="w">
<a href="#">
<!-- 使用的是image插入圖片把a(bǔ)撐開 -->
<img src="images/header.jpg" width="1190px" height="80px" alt="">
</a>
</div>
</header>
<!-- header部分 end -->
<!-- 快速導(dǎo)航欄部分 start -->
<div class="shortcut">
<div class="w">
<ul class="fl city">
<li> <i class="f10">?</i> <a href="#">北京</a></li>
</ul>
<ul class="fr">
<li>
<a href="#">你好，請登錄</a>
<a href="#" class="f10">免費(fèi)注冊</a>
</li>
<!-- 這里不是使用padiing然后設(shè)置邊框 -->
<li class="spacer"></li>
<li>
<a href="#">我的訂單</a>
<i>?</i>
</li>
<li class="spacer"></li>
<li>
<a href="#">我的京東</a>
</li>
<li class="spacer"></li>
<li>
<a href="#">企業(yè)采購</a>
</li>
<li class="spacer"></li>
<li>
<a href="#">客戶服務(wù)</a>
<i>?</i>
</li>
<li class="spacer"></li>
<li>
<a href="#">網(wǎng)站導(dǎo)航</a>
<i>?</i>
</li>
<li class="spacer"></li>
<li class="mobile">
<a href="#">手機(jī)京東</a>
<img src="images/mobile.png" alt="">
</li>
</ul>
</div>
</div>
<!-- 快速導(dǎo)航欄部分 end -->
樣式代碼為
/* header部分 */
header {
height: 80px;
background-color: #020000;
}
/* 快速導(dǎo)航欄 start */
.shortcut {
height: 30px;
background-color: #e3e4e5;
border-bottom: 1px solid #dddddd;
font-size: 12px;
line-height: 30px;
color: #999999;
}
.city {
margin-left: 210px;
}
.shortcut li {
float: left;
}
.shortcut i {
font-family: "icomoon";
/* 讓傾斜的不傾斜 */
font-style: normal;
}
.spacer {
width: 1px;
height: 10px;
background-color: #ccc;
margin: 11px 13px 0 13px;
}
.mobile {
position: relative;
}
.mobile img {
position: absolute;
left: -3px;
top: 30px;
border: 1px solid #cfcfcf;
padding: 4px 3px 2px 3px;
}
/* 快速導(dǎo)航欄 end */
/* 中間頭部分 start */
.middle {
height: 140px;
position: relative;
}
.logo {
/* 快速導(dǎo)航欄的高度時30px */
position: absolute;
top: -30px;
left: 0px;
box-shadow: 0px -10px 10px rgba(0,0,0,0.3);
}
.logo a{
/* logo一般使用的是背景圖片 */
display: block;
width: 190px;
height: 170px;
background: #fff url(../images/logo.png) no-repeat;
}
.form {
width: 550px;
height: 35px;
position: absolute;
top: 25px;
left: 320px;
}
.form input {
width: 495px;
height: 33px;
border: 1px solid #f10215;
float: left;
font-size: 14px;
padding-left: 3px;
}
.form button {
width: 50px;
height: 35px;
background-color: #f10215;
float: left;
}
.form button i {
font-family: "icomoon";
font-style: normal;
color: #fff;
}
/* 購物車 */
.shopCar {
width: 188px;
height: 33px;
border: 1px solid #ccc;
position: absolute;
right:95px;
top: 25px;
background-color: #fff;
line-height: 33px;
text-align: center;
color: #f10215;
}
.shopCar i {
font-family: "icomoon";
font-style: normal;
color: #f10215;
margin-right: 5px;
}
.shopCar span {
width: 15px;
height: 15px;
background-color: #f10215;
border-radius: 50%;
position: absolute;
top: 5px;
right: 30px;
font-size: 12px;
color: #fff;
line-height: 15px;
}
/* 關(guān)鍵詞模塊 */
.hotwords {
position: absolute;
top: 68px;
left: 320px;
font-size: 14px;
}
/* 小導(dǎo)航模塊 */
.navitems {
width: 770px;
height: 40px;
position: absolute;
left: 200px;
bottom: 0px;
line-height: 40px;
}
.navitems li {
float: left;
margin-left: 30px;
}
.navitems li a{
font-size: 16px;
font-weight: 700;
color: #555;
}
.navitems li a:hover {
color: #f10215;
}
.navitems .spacer {
margin-top: 15px;
margin-left: 15px;
margin-right: -15px;
}
尾部
未完待寫。沟蔑。湿诊。
總體
總體代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta name="description"
content="京東JD.COM-專業(yè)的綜合網(wǎng)上購物商城,銷售家電、數(shù)碼通訊瘦材、電腦厅须、家居百貨、服裝服飾食棕、母嬰朗和、圖書、食品等數(shù)萬個品牌優(yōu)質(zhì)商品.便捷簿晓、誠信的服務(wù)眶拉，為您提供愉悅的網(wǎng)上購物體驗!" />
<meta name="Keywords" content="網(wǎng)上購物,網(wǎng)上商城,手機(jī),筆記本,電腦,MP3,CD,VCD,DV,相機(jī),數(shù)碼,配件,手表,存儲卡,京東" />
<title>京東</title>
<!-- CSS初始化文件 -->
<link rel="stylesheet" href="css/normalize.css" />
<!-- 頭部和底部的公共樣式 -->
<link rel="stylesheet" href="css/base.css" />
</head>
<body>
<!-- header部分 start -->
<header>
<!-- 廣告欄 -->
<div class="w">
<a href="#">
<!-- 使用的是image插入圖片把a(bǔ)撐開 -->
<img src="images/header.jpg" width="1190px" height="80px" alt="">
</a>
</div>
</header>
<!-- header部分 end -->
<!-- 快速導(dǎo)航欄部分 start -->
<div class="shortcut">
<div class="w">
<ul class="fl city">
<li> <i class="f10">?</i> <a href="#">北京</a></li>
</ul>
<ul class="fr">
<li>
<a href="#">你好，請登錄</a>
<a href="#" class="f10">免費(fèi)注冊</a>
</li>
<!-- 這里不是使用padiing然后設(shè)置邊框 -->
<li class="spacer"></li>
<li>
<a href="#">我的訂單</a>
<i>?</i>
</li>
<li class="spacer"></li>
<li>
<a href="#">我的京東</a>
</li>
<li class="spacer"></li>
<li>
<a href="#">企業(yè)采購</a>
</li>
<li class="spacer"></li>
<li>
<a href="#">客戶服務(wù)</a>
<i>?</i>
</li>
<li class="spacer"></li>
<li>
<a href="#">網(wǎng)站導(dǎo)航</a>
<i>?</i>
</li>
<li class="spacer"></li>
<li class="mobile">
<a href="#">手機(jī)京東</a>
<img src="images/mobile.png" alt="">
</li>
</ul>
</div>
</div>
<!-- 快速導(dǎo)航欄部分 end -->
<!-- 中間頭部分 start -->
<div class="w middle">
<div class="logo">
<!-- 體高權(quán)重憔儿，便利于搜索引擎優(yōu)化 -->
<h1>
<a href="#"></a>
</h1>
</div>
<!-- 搜索 -->
<div class="form">
<input type="text" placeholder="掃描儀">
<button><i>?</i></button>
</div>
<!-- 購物車 -->
<div class="shopCar">
<i>?</i>
<a href="#" class="f10">我的購物車</a>
<span>0</span>
</div>
<!--關(guān)鍵詞 -->
<div class="hotwords">
<a href="#" class="f10">199減100</a>
<a href="#">鼠標(biāo)試用</a>
<a href="#">農(nóng)資7折</a>
<a href="#">低至29元</a>
<a href="#">抽獎贏空調(diào)</a>
<a href="#">記憶棉</a>
<a href="#">坐墊</a>
<a href="#">1分錢買油</a>
<a href="#">智能手表</a>
</div>
<!-- 小導(dǎo)航 -->
<div class="navitems ">
<ul>
<li><a href="#">秒殺</a></li>
<li><a href="#">優(yōu)惠券</a></li>
<li><a href="#">閃購</a></li>
<li><a href="#">拍賣</a></li>
<li class="spacer"></li>
<li><a href="#">服裝城</a></li>
<li><a href="#">京東超市</a></li>
<li><a href="#">生鮮</a></li>
<li><a href="#">全球購</a></li>
<li class="spacer"></li>
<li><a href="#">京東金融</a></li>
</ul>
</div>
</div>
<!-- 中間頭部分 end -->
<!-- 頁面底部開始 start -->
<footer>
<div class="service">
<div class="w clearfix">
<ul>
<li>
<h5>多</h5>
<p>品類齊全忆植，輕松購物</p>
</li>
</ul>
<ul>
<li>
<h5>多</h5>
<p>品類齊全，輕松購物</p>
</li>
</ul>
<ul>
<li>
<h5>多</h5>
<p>品類齊全谒臼，輕松購物</p>
</li>
</ul>
<ul>
<li>
<h5>多</h5>
<p>品類齊全朝刊，輕松購物</p>
</li>
</ul>
</div>
</div>
<!-- 幫助模塊 -->
<div class="w help">
<div class="fl">
<dl>
<dt>購物指南</dt>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
</dl>
<dl>
<dt>購物指南</dt>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
</dl>
<dl>
<dt>購物指南</dt>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
</dl>
<dl>
<dt>購物指南</dt>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
</dl>
<dl>
<dt>購物指南</dt>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">購物流程</a></dd>
</dl>
</div>
<div class="fr coverage">
<h5>京東自營覆蓋區(qū)縣</h5>
<p>京東已向全國2661個區(qū)縣提供自營配送服務(wù)，支持貨到付款蜈缤、POS機(jī)刷卡和售后上門服務(wù)拾氓。</p>
<a href="#">查看詳情 > </a>
</div>
</div>
<div class="w copyright">
<p>
<a href="#">關(guān)于我們</a>
<span>|</span>
<a href="#">聯(lián)系我們</a>
<span>|</span>
<a href="#">關(guān)于我們</a>
<span>|</span>
<a href="#">關(guān)于我們</a>
<span>|</span>
<a href="#">關(guān)于我們</a>
<span>|</span>
<a href="#">關(guān)于我們</a>
<span>|</span>
<a href="#">關(guān)于我們</a>
<span>|</span>
<a href="#">關(guān)于我們</a>
<span>|</span>
<a href="#">關(guān)于我們</a>
<span>|</span>
<a href="#">關(guān)于我們</a>
<span>|</span>
<a href="#">關(guān)于我們</a>
<span>|</span>
<a href="#">京東公益</a>
<span>|</span>
<a href="#">English Site</a>
<span>|</span>
<a href="#">Media & IR</a>
<span>|</span>
</p>
<div>
<p>京公網(wǎng)安備
11000002000088號<span>|</span>京ICP證070359號<span>|</span>互聯(lián)網(wǎng)藥品信息服務(wù)資格證編號(京)-經(jīng)營性-2014-0008<span>|</span>新出發(fā)京零
字第大120007號</p>
<p>互聯(lián)網(wǎng)出版許可證編號新出網(wǎng)證(京)字150號<span>|</span>出版物經(jīng)營許可證<span>|</span>網(wǎng)絡(luò)文化經(jīng)營許可證京網(wǎng)文[2014]2148-348號<span>|</span>違法和不良信息舉報電話：4006561155
</p>
<p>Copyright ? 2004 - 2017 京東JD.com 版權(quán)所有|消費(fèi)者維權(quán)熱線：4006067733經(jīng)營證照
京東旗下網(wǎng)站：京東支付|京東云</p>
</div>
<p class="foot-icon">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</p>
</div>
</footer>
<!-- 頁面底部結(jié)束 end -->
</body>
</html>
CSS結(jié)構(gòu)樣式：
/* 版心的公共類 */
.w {
/* 京東的版心 */
width: 1190px;
/* 居中對齊 */
margin: 0 auto;
}
/* 清除浮動 */
.clearfix:before,
.clearfix:after {
/* 清楚浮動 */
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* 浮動的公共類 */
.f1 {
float: left;
}
.fr {
float: right;
}
/* 超鏈接樣式初始化 */
a {
text-decoration: none;
color: #999999;
}
a:hover {
color: #e33333;
}
/* ul的樣式 */
ul {
list-style: none;
}
/* 防淘寶文網(wǎng)清除的內(nèi)外邊距*/
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;
}
input,button {
border: 0px;
outline: none;
}
/* 整體的顏色 */
body {
background-color: #f6f6f6;
}
/* 公共的顏色 */
.f10 {
color: #f10215!important;
}
/* 引入字體圖標(biāo) */
@font-face {
font-family: 'icomoon';
/*這里的字體需要和span的font-family一致*/
src: url('../fonts/icomoon.eot?7kkyc2');
src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('../fonts/icomoon.woff?7kkyc2') format('woff'),
url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/* header部分 */
header {
height: 80px;
background-color: #020000;
}
/* 快速導(dǎo)航欄 start */
.shortcut {
height: 30px;
background-color: #e3e4e5;
border-bottom: 1px solid #dddddd;
font-size: 12px;
line-height: 30px;
color: #999999;
}
.city {
margin-left: 210px;
}
.shortcut li {
float: left;
}
.shortcut i {
font-family: "icomoon";
/* 讓傾斜的不傾斜 */
font-style: normal;
}
.spacer {
width: 1px;
height: 10px;
background-color: #ccc;
margin: 11px 13px 0 13px;
}
.mobile {
position: relative;
}
.mobile img {
position: absolute;
left: -3px;
top: 30px;
border: 1px solid #cfcfcf;
padding: 4px 3px 2px 3px;
}
/* 快速導(dǎo)航欄 end */
/* 中間頭部分 start */
.middle {
height: 140px;
position: relative;
}
.logo {
/* 快速導(dǎo)航欄的高度時30px */
position: absolute;
top: -30px;
left: 0px;
box-shadow: 0px -10px 10px rgba(0,0,0,0.3);
}
.logo a{
/* logo一般使用的是背景圖片 */
display: block;
width: 190px;
height: 170px;
background: #fff url(../images/logo.png) no-repeat;
}
.form {
width: 550px;
height: 35px;
position: absolute;
top: 25px;
left: 320px;
}
.form input {
width: 495px;
height: 33px;
border: 1px solid #f10215;
float: left;
font-size: 14px;
padding-left: 3px;
}
.form button {
width: 50px;
height: 35px;
background-color: #f10215;
float: left;
}
.form button i {
font-family: "icomoon";
font-style: normal;
color: #fff;
}
/* 購物車 */
.shopCar {
width: 188px;
height: 33px;
border: 1px solid #ccc;
position: absolute;
right:95px;
top: 25px;
background-color: #fff;
line-height: 33px;
text-align: center;
color: #f10215;
}
.shopCar i {
font-family: "icomoon";
font-style: normal;
color: #f10215;
margin-right: 5px;
}
.shopCar span {
width: 15px;
height: 15px;
background-color: #f10215;
border-radius: 50%;
position: absolute;
top: 5px;
right: 30px;
font-size: 12px;
color: #fff;
line-height: 15px;
}
/* 關(guān)鍵詞模塊 */
.hotwords {
position: absolute;
top: 68px;
left: 320px;
font-size: 14px;
}
/* 小導(dǎo)航模塊 */
.navitems {
width: 770px;
height: 40px;
position: absolute;
left: 200px;
bottom: 0px;
line-height: 40px;
}
.navitems li {
float: left;
margin-left: 30px;
}
.navitems li a{
font-size: 16px;
font-weight: 700;
color: #555;
}
.navitems li a:hover {
color: #f10215;
}
.navitems .spacer {
margin-top: 15px;
margin-left: 15px;
margin-right: -15px;
}
/* 頁面底部 */
footer {
margin-top: 35px;
height: 500px;
background-color: #eaeaea;
}
.service {
padding: 30px 0;
border-bottom: 1px solid #dedede;
}
.service ul li {
width: 297px;
height: 43px;
position: relative;
line-height: 43px;
float: left;
}
.service ul li h5 {
position: absolute;
top: 0px;
left: 38px;
width: 36px;
height: 43px;
background: url(../images/ico.png) no-repeat;
text-indent: -999em;
}
.service ul li p{
font-weight: 700;
margin-left: 82px;
}
.service ul li:nth-child(2) h5 {
background-position: 0 -43px;
}
.service ul li:nth-child(3) h5 {
background-position: 0 -86px;
}
.service ul li:nth-child(4) h5 {
background-position: bottom;
}
/* 幫助模塊 */
.help {
height: 200px;
border-bottom: 1px solid #dedede;
padding-top:25px;
box-sizing: border-box;
}
.help dt,
.coverage h5 {
height: 30px;
font-size: 14px;
color: #666;
}
.help dd {
height: 20px;
}
.help dl {
width: 192px;
float: left;
}
.coverage {
width: 200px;
height: 150px;
background: url(../images/ico_footer.png) no-repeat;
}
.coverage h5 {
padding-left:35px;
}
.coverage p {
width: 180px;
font-size: 12px;
color:#666 ;
line-height: 18px;
}
.coverage a {
display: block;
margin-top: 5px;
width: 180px;
text-align: right;
}
/* 底部版權(quán) */
.copyright {
padding-top: 20px;
text-align: center;
color: #666;
font-size: 12px;
}
.copyright span {
margin: 0 10px;
}
.copyright a {
color: #666;
}
.copyright div {
margin-top: 20px;
}
.copyright div p {
line-height: 22px;
}
.foot-icon a {
display: inline-block;
width: 103px;
height: 33px;
/* 行內(nèi)塊元素可以是用text-aline:center居中對齊 */
text-align: center;
background: url(../images/ico_footer.png) no-repeat;
background-position: 0 -150px;
margin-top: 20px;
margin: 20px 4px 0px;
}
.foot-icon a:nth-child(2) {
background-position: -103px -150px;
}
.foot-icon a:nth-child(3) {
background-position: 0px -183px;
}
.foot-icon a:nth-child(4) {
background-position: -103px -183px;
}
.foot-icon a:nth-child(5) {
background-position: -0px -216px;
}
.foot-icon a:nth-child(6) {
background-position: -103px -216px;
}
