京東首頁樣式分析.

開始學CSS, 一點點分析:

從這條簡單的東西開始:

1, 是一條灰色的條, 貫穿左右, 直接一個div, id爲shortcut, css對應:

#shortcut {
    border-bottom: 1px solid #ddd;
    background-color: #e3e4e5;
}

 高度, 起另外一個div, class爲w, 限定了高度, 跟行高, 顏色.

#shortcut .w {
    height: 30px;
    line-height: 30px;
    color: #999;
}

 2. 寬度在下面指定:

.w {
    margin: auto;
    width: 1190px;
}

 3. 文字使用的是ul, 無序列表

<ul class="fr">
    <li><a class="nickname" target="_black" href="//home.jd.com">Montauk</a></li>
    <li class="spacer"></li>
    <li><a class="nickname" target="_black" href="//home.jd.com">個人訂單</a></li>
    <li class="spacer"></li>
    <li><a class="nickname" target="_black" href="//home.jd.com">個人京東</a></li>
    <li class="spacer"></li>
    <li><a class="nickname" target="_black" href="//home.jd.com">京東會員</a></li>
    <li class="spacer"></li>
    <li><a class="nickname" target="_black" href="//home.jd.com">企業採購</a></li>
</ul>

 增長css效果, 讓它實現:

a. 靠右對其

b. 去掉前面的list標識

c. 增長間隔的 " | "

d. 去掉連接的下劃線

 

.fr{
	float: right;
}
li {
    list-style: none;
        list-style-type: none;
        list-style-image: none;
        list-style-position: outside;
}
#shortcut li.spacer {
    overflow: hidden;
    margin: 11px 5px 0;
    width: 1px;
    height: 10px;
    background-color: #ccc;
}
a {
    color: #666;
    text-decoration: none;
}

 

接着是4, 5 兩個圖標:

這個plus圖標來自下面這個圖.