首页 > 代码库 > 京东首页样式分析.

京东首页样式分析.

2024-09-02 10:10:21   218人阅读

开始学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="http://home.jd.com">Montauk</a></li>
    <li class="spacer"></li>
    <li><a class="nickname" target="_black" href="http://home.jd.com">我的订单</a></li>
    <li class="spacer"></li>
    <li><a class="nickname" target="_black" href="http://home.jd.com">我的京东</a></li>
    <li class="spacer"></li>
    <li><a class="nickname" target="_black" href="http://home.jd.com">京东会员</a></li>
    <li class="spacer"></li>
    <li><a class="nickname" target="_black" href="http://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图标来自下面这个图.

技术分享

 

京东首页样式分析.


联系
我们