![]()
![]()
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5
6 <meta charset="utf-8" />
7 <title></title>
8 <link rel="stylesheet" href="css/new_one.css" />
9 </head>
10
11 <body>
12 <!--大框-->
13 <div class="dk">
14 <!--顶部工具条begin-->
15 <div class="top-tool">
16 <!--工具条内导航center begin-->
17 <div class="tool-center">
18 <!--工具条内导航右begin-->
19 <div class="tool-r">
20 <div class="tool-little" id="t-l">请登录</div>
21 <div class="tool-little">免费注册</div>
22 <div class="tool-little">我的订单</div>
23 <div class="tool-little">我的京东</div>
24 <div class="tool-little">京东会员</div>
25 <div class="tool-little">企业采购</div>
26 <div class="tool-little">客户服务</div>
27 <div class="tool-little">网站导航</div>
28 <div class="tool-little">手机京东</div>
29 </div>
30 <!--工具条内导航右end-->
31 </div>
32 <!--工具条内导航center end-->
33 </div>
34 <!--顶部工具条end-->
35
36 <!--居中大框begin-->
37 <div class="center">
38
39 <!--顶部导航begin-->
40 <div class="top-nav-dk">
41 <!--导航搜索-->
42 <div class="top-s">
43 <input type="text" />
44 </div>
45 <!--搜索下小字-->
46 <div class="top-font">
47 <!--<div class="xz"></div>-->
48 </div>
49 <!--导航-->
50 <div class="top-nav">
51
52 <!--京东小狗-->
53 <div class="jd"></div>
54
55 </div>
56 </div>
57 <!--顶部导航end-->
58 <!--轮播周围大框begin-->
59 <div class="center-all">
60 <!--轮播大框左-->
61 <div class="center-a">
62 </div>
63 <!--大图轮播-->
64 <div class="center-b">
65 <!--轮播-->
66 <div class="lb">
67
68 </div>
69 <!--轮播end-->
70 <!--轮播下begin-->
71 <div class="lb-b">
72 <!--轮播下左-->
73 <div class="lb-b-l">
74
75 </div>
76 <!--轮播下右-->
77 <div class="lb-b-r">
78
79 </div>
80 </div>
81 <!--轮播下end-->
82 </div>
83 <!--轮播右-->
84 <div class="center-c">
85
86 </div>
87
88 </div>
89 <!--轮播周围大框end-->
90
91 <!--轮播下分类begin-->
92 <div class="ify">
93 <!--左-->
94 <div class="ify-l"></div>
95 <!--中-->
96 <div class="ify-c"></div>
97 <!--右-->
98 <div class="ify-r"></div>
99 </div>
100 <!--轮播下分类end-->
101
102 <!--领券中心 行begin-->
103 <div class="ify-buttom">
104
105 <!--左-->
106 <div class="ify-buttom-l"></div>
107
108 <!--右-->
109 <div class="ify-buttom-r"></div>
110
111 </div>
112 <!--领券中心 行end-->
113
114 </div>
115 <!--居中大框end-->
116
117 <!--贯穿灰条begin-->
118 <div class="a1190">
119
120 <!--灰条居中框begin-->
121 <div class="a-center">
122
123 </div>
124 <!--灰条居中框begin-->
125
126 </div>
127 <!--贯穿横条end-->
128
129 <div style="position:relative;margin-top:15px;width:100%;height:500px;background-color:black"></div>
130
131 </div>
132 <!--大框结束-->
133 <!--左侧锚点begin-->
134 <!--<div class="left-nav">
135
136 </div>-->
137 </body>
138
139 </html>
1 * {
2 margin: 0px;
3 padding: 0px;
4 }
5
6
7 /*大框*/
8
9 .dk {
10 position: relative;
11 width: 100%;
12 height: 100%;
13 background-color:rgb(246,246,246);
14 }
15
16
17 /*顶部工具条*/
18
19 .top-tool {
20 poaition: relative;
21 width: 100%;
22 height: 30px;
23 background-color:rgb(227,228,229);
24 }
25 /*工具条内导航*/
26 .tool-center{
27 /*687-30*/
28 position:relative;
29 margin:0px auto;
30 width:1190px;
31 height:30px;
32 background-color:rgb(227,228,229);
33 }
34 /*工具条内导航右*/
35 .tool-r{
36 position:relative;
37 margin-left:512px;
38 width:678px;
39 height:30px;
40 background-color:rgb(227,228,229);
41 }
42 .tool-little{
43 float:left;
44 margin-left:15px;
45 width:62px;
46 height:30px;
47 text-align:center;
48 line-height:30px;
49 font-family:"微软雅黑";
50 font-size:12px;
51 color:#999;
52 background-color:rgb(227,228,229);
53 }
54 #t-l{
55 margin-left:0px;
56 }
57
58 /*居中大框*/
59
60 .center {
61 position: relative;
62 margin: 0px auto;
63 width: 1190px;
64 height: 100%;
65 background-color: rgb(246,246,246);
66 }
67
68
69 /*顶部导航*/
70
71 .top-nav-dk {
72 position: relative;
73 width: 100%;
74 height: 140px;
75 /*background-color: yellow;*/
76 }
77
78
79 /*导航搜索*/
80
81 .top-s {
82 width: 100%;
83 height: 60px;
84 /*background-color: pink;*/
85 }
86 /*导航*/
87 .top-s input{
88 margin-left:420px;
89 margin-top:15px;
90 width:350px;
91 height:35px;
92 border:0.5px solid red;
93 }
94
95
96 /*搜索下小字*/
97
98 .top-font {
99 width: 100%;
100 height: 40px;
101 background-color: green;
102 }
103 /*.xz{
104 background-image: url(../img/1.png);
105 margin-left:300px;
106
107 }*/
108
109 /*导航*/
110
111 .top-nav {
112 width: 100%;
113 height: 40px;
114 background-color: yellowgreen;
115 }
116
117
118 /*京东小狗*/
119
120 .jd {
121 position: absolute;
122 width: 190px;
123 height: 170px;
124 margin-top: -130px;
125 background-color: black;
126 background-image:url(../img/jd.png);
127 }
128
129 .center-all {
130 position: relative;
131 width: 1190px;
132 height: 480px;
133 background-color: rgb(246,246,246);
134 }
135
136
137 /*轮播大框左*/
138
139 .center-a {
140 float: left;
141 width: 190px;
142 height: 480px;
143 background-color: deeppink;
144 background-image:url(../img/left-nav.png);
145 }
146
147
148 /*大图轮播*/
149
150 .center-b {
151 position: relative;
152 float: left;
153 margin-left: 10px;
154 width: 790px;
155 height: 480px;
156 background-color: rgb(246,246,246);
157 }
158
159
160 /*轮播右*/
161
162 .center-c {
163 float: left;
164 margin-left: 10px;
165 width: 190px;
166 height: 480px;
167 background-color: deeppink;
168 background-image:url(../img/QQ截图20170918131030.png);
169 }
170
171
172 /*左侧锚点*/
173
174
175 /*.left-nav{
176 position:fixed;
177 margin-right:10%;
178 margin-top:200px;
179 width:34px;
180 height:453px;
181 background-color:blue;
182 }*/
183
184
185 /*轮播*/
186
187 .lb {
188 width: 790px;
189 height: 340px;
190 background-color: pink;
191 background-image:url(../img/lunbo.png);
192 background-size:100%;
193 }
194
195
196 /*轮播下*/
197
198 .lb-b {
199 margin-top: 10px;
200 width: 790px;
201 height: 130px;
202 background-color: red;
203 }
204
205 .lb-b-l,
206 .lb-b-r {
207 float: left;
208 width: 390px;
209 height: 130px;
210 background-color: gray;
211 background-size:100%;
212 background-image:url(../img/left.png);
213 }
214
215 .lb-b-r {
216 margin-left: 10px;
217 background-image:url(../img/right.png);
218 }
219
220
221 /*轮播下分类*/
222
223 .ify {
224 position: relative;
225 margin-top: 10px;
226 width: 1190px;
227 height: 444px;
228 background-color: rgb(246,246,246);
229 }
230 /*轮播下分类左,中,右*/
231 .ify-l,
232 .ify-c,
233 .ify-r {
234 float: left;
235 width: 390px;
236 height: 444px;
237 background-color: yellow;
238 background-size:100%;
239 background-image:url(../img/QQ截图20170918130427.png);
240 }
241
242 .ify-c,
243 .ify-r {
244 margin-left: 10px;
245 }
246 .ify-l{
247 background-image:url(../img/QQ截图20170918130443.png);
248 }
249 .ify-r{
250 background-image:url(../img/QQ截图20170918130443.png);
251 }
252 /*领券中心 行*/
253 .ify-buttom{
254 position:relative;
255 margin-top:30px;
256 width:1190px;
257 height:270px;
258 background-color:rgb(246,246,246);
259 }
260 .ify-buttom-l,.ify-buttom-r{
261 float:left;
262 width:790px;
263 height:270px;
264 background-color:pink;
265 background-image:url(../img/QQ截图20170918131320.png);
266 }
267 .ify-buttom-r{
268 margin-left:10px;
269 width:390px;
270 height:270px;
271 background-image:url(../img/QQ截图20170918131337.png);
272 }
273
274 /*贯穿灰条*/
275 .a1190{
276 position:relative;
277 margin-top:30px;
278 width:100%;
279 height:100px;
280 background-color:rgb(224,224,224);
281 }
282 /*灰条居中框*/
283 .a-center{
284 /*position:relative;*/
285 margin:0px auto;
286 width:1190px;
287 height:100px;
288 background-color:rgb(224,224,224);
289 background-image:url(../img/QQ截图20170918131822.png);
290 }
浙公网安备 33010602011771号