仅供学习，转载请注明出处
需求
前面铺垫写了不少HTML、CSS、Photoshop的文章，那么本篇章就是要结合起来挑战写写京东的商城首页了。
好了，本次的目标就是实现这样的大概页面，让我们一步步来开始编写。
文档结构
首页创建好本次编写的文件结构，如下：
好了，文件夹目录都准备好了，那么先按照从上到下，从左到右的原则一步步开始编写吧。
编写头部横栏部分
要编写这部分，首先就需要准备相关的图片，这里我就不一步步说怎么使用photoshop切图部分了。
如果不太熟悉的朋友，可以访问我之前写的photoshop 切图技巧。
准备好横栏所需的图标
我将图标制作成了雪碧图，如下：
好了，有了这个雪碧图就可以开始动手了。
编写横栏部分代码
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;
}
浏览器显示如下：
其中菜单里面的下箭头我才用的阿里巴巴矢量图标，如果不清楚如何使用，可以点击iconfont阿里巴巴矢量图标库从注册到使用访问。
好了，下面再来编写下一部分。
编写京东图标
准备好京东图标
编写HTML以及CSS
可以从图标显示来看，图标可以使用绝对定位来解决。
首先写一个div来显示看看，如下：
浏览器显示如下：
设置背景颜色以及图标的颜色，查看如下：
设置body的背景颜色，代码如下：
再设置图标的背景颜色，代码如下：
浏览器显示，如下：
下面将京东的logo设置背景图片，如下：
浏览器显示如下：
好了，下面继续下一部分，如下：
编写搜索栏目
这里面的图标可以到阿里巴巴的矢量图库中找一下看看。
准备图标
编写HTML以及CSS
编写优化input部分，详情访问CSS Input 样式美化，代码如下：
浏览器展示如下：
开始写图标以及右边放大镜部分，如下：
浏览器展示如下：
编写搜索框下的推荐栏目
简单看看，这里可以使用ul>li>a来编写，然后调整一下大小以及字体样式即可。
要注意布局的方式不使用float:left;浮动布局，最好就是绝对定位，方便进行居中定位。
而如果使用绝对定位，那么就是需要设置display:inline-block;行内块的方式来进行布局。
浏览器展示如下：
编写购物车部分
准备图标
好了，准备好了购物车的图标，下面就继续来写HTML + CSS部分。
编写 HTML + CSS
浏览器演示如下：
编写搜索框下的菜单栏目
这部分基本跟上面的推荐菜单的写法一致，可以使用ul>li>a加上绝对定位来完成。
编写HTML + CSS
浏览器展示如下：
好了，上面的部分基本写好了。那么继续。
左边细分类别列表
思路：编写一个ul>li>a即可，然后用绝对定时进行布局。其实这里面的每一行也是一个小菜单栏目，需要增加不同数量的a链接，设置bord-left:1px solid #ccc即可，先简化实现一个先。
编写HTML + CSS
浏览器展示如下：
编写中间幻灯片部分
幻灯片的话单纯HTML + CSS 只能展示出一张图片的，需要后面加上js代码，写动画效果才是完整的。
编写 HTML + CSS
做幻灯片这里要讲一下技巧，先看看效果。
这里面其实中间有一个div嵌套一个宽度很大的ul，然后给li设置float:left来处理的。最后通过绝对定位的ul的left参数改变来实现移动效果。
好了，大概的布局以及实现还需要自己多动手实践一下。
总结
其实在整体页面编写的过程，我是应该先用div给页面每个位置进行分大块，然后在每个大块中继续写内部的元素。
这个我在代码编写后期修改了，没在这篇中体现出来。不过本篇章也讲述了一个大概的实现过程。
较好的布局思路：
从上到下，从左到右，使用div设定好宽度、高度、背景色，基于文档流进行布局，不要一上来就使用绝对定位这种方式。
寻找资源的地址如下：
扫描微信公众号
寻找价值数万的视频资源
1645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
