抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

前言

京东是典型的电商类网站，学习这个网站的制作比较有价值。我们准备用WebStorm进行开发。

京东首页的截图为：http://img.smyhvae.com/20180119_1653.jpg

页面规划：新建一个空的工程

我们首先新建一个空的工程：

CSS初始化（基本样式）

京东网站有一些基本样式，在各个页面中都要用到：（将这些基本样式copy到css.base里面去）

base.css中的公共的部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; }  /*去掉边框、去掉轮廓（比如输入框外面的蓝边框）*/

/*去掉列表前面的圆点*/
ul, ol {
    list-style: none;
}
input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}  /*字体一般是指定这两个*/
select, input { vertical-align:middle;}