HTML+CSS+PS 编写京东商城首页

仅供学习，转载请注明出处

需求

前面铺垫写了不少HTML、CSS、Photoshop的文章，那么本篇章就是要结合起来挑战写写京东的商城首页了。

好了，本次的目标就是实现这样的大概页面，让我们一步步来开始编写。

文档结构

首页创建好本次编写的文件结构，如下：

好了，文件夹目录都准备好了，那么先按照从上到下，从左到右的原则一步步开始编写吧。

编写头部横栏部分

要编写这部分，首先就需要准备相关的图片，这里我就不一步步说怎么使用photoshop切图部分了。

如果不太熟悉的朋友，可以访问我之前写的photoshop 切图技巧。

准备好横栏所需的图标

我将图标制作成了雪碧图，如下：

好了，有了这个雪碧图就可以开始动手了。

编写横栏部分代码

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东商城</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/font_1056598_n3wpz4pry7/iconfont.css">
</head>
<body>
    <!-- 横栏 -->
    <div class="header01">
        <div class="location">北京</div>
        <div class="hello"><a href="#">你好，请登录</a></div>
        <!-- ul.menu>(li>a.a${免费注册})*8 -->
        <ul class="menu">
            <li><a href="" class="a1">免费注册</a></li>
            <li><a href="" class="a2">我的订单</a></li>
            <li>
                <a href="" class="a3">
                    我的京东
                    <span class="iconfont icon-xiajiantou"></span>
                </a>
            </li>
            <li><a href="" class="a4">京东会员</a></li>
            <li>
                <a href="" class="a5">
                    企业采购
                    <span class="iconfont icon-xiajiantou"></span>
                </a>
            </li>
            <li>
                <a href="" class="a6">
                    客户服务
                    <span class="iconfont icon-xiajiantou"></span>
                </a>
            </li>
            <li><a href="" class="a7">网站导航</a></li>
            <li><a href="" class="a8">手机京东</a></li>
        </ul>
    </div>
</body>
</html>

CSS代码：

* {
    margin: 0;
    padding: 0;
}

.header01{
    height: 38px;
    background-color: #e3e4e5;
}

.location{
    position: absolute;
    width: 61px;
    height: 38px;
    line-height: 38px;
    left: 466px;
    background-image: url(../images/icons.png);
    background-position: left -138px;
    text-indent: 20px;
    font-size: 13px;
    font-family: "Microsoft YaHei";
    color: #999;
    cursor: pointer;
}

.hello{
    position: absolute;
    width: 85px;
    height: 38px;
    left: 795px;
    line-height: 38px;
}

.hello a{
    font-size: 13px;
    font-family: "Microsoft YaHei";
    text-decoration: none;
    color: #999;
}

.menu{
    position: absolute;
    height: 38px;
    left: 892px;
    overflow: hidden;
}

.menu li{
    display: inline-block;
}

.menu li a{
    position: relative;
    left: -1px;
    line-height: 38px;
    font-size: 13px;
    font-family: "Microsoft YaHei";
    text-decoration: none;
    color: #999;
    border-left: 1px solid #999;
    padding: 0 5px;
    padding-left: 8px;
}


.menu li a:hover{
    color: red;
}

.menu li span{
    position: relative;
    left: -4px;
    top: 3px;
}

浏览器显示如下：