生活随笔
收集整理的這篇文章主要介紹了
小作业
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
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 <!--工具條內(nèi)導(dǎo)航center begin-->
17 <div class="tool-center">
18 <!--工具條內(nèi)導(dǎo)航右begin-->
19 <div class="tool-r">
20 <div class="tool-little" id="t-l">請登錄</div>
21 <div class="tool-little">免費(fèi)注冊</div>
22 <div class="tool-little">我的訂單</div>
23 <div class="tool-little">我的京東</div>
24 <div class="tool-little">京東會員</div>
25 <div class="tool-little">企業(yè)采購</div>
26 <div class="tool-little">客戶服務(wù)</div>
27 <div class="tool-little">網(wǎng)站導(dǎo)航</div>
28 <div class="tool-little">手機(jī)京東</div>
29 </div>
30 <!--工具條內(nèi)導(dǎo)航右end-->
31 </div>
32 <!--工具條內(nèi)導(dǎo)航center end-->
33 </div>
34 <!--頂部工具條end-->
35
36 <!--居中大框begin-->
37 <div class="center">
38
39 <!--頂部導(dǎo)航begin-->
40 <div class="top-nav-dk">
41 <!--導(dǎo)航搜索-->
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 <!--導(dǎo)航-->
50 <div class="top-nav">
51
52 <!--京東小狗-->
53 <div class="jd"></div>
54
55 </div>
56 </div>
57 <!--頂部導(dǎo)航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 <!--領(lǐng)券中心 行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 <!--領(lǐng)券中心 行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></div>
130
131 </div>
132 <!--大框結(jié)束-->
133 <!--左側(cè)錨點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 100%;
12 height: 100%;
13 background-color:rgb(246,246,246);
14 }
15
16
17 /*頂部工具條*/
18
19 .top-tool {
20 poaition: relative;
21 100%;
22 height: 30px;
23 background-color:rgb(227,228,229);
24 }
25 /*工具條內(nèi)導(dǎo)航*/
26 .tool-center{
27 /*687-30*/
28 position:relative;
29 margin:0px auto;
30 1190px;
31 height:30px;
32 background-color:rgb(227,228,229);
33 }
34 /*工具條內(nèi)導(dǎo)航右*/
35 .tool-r{
36 position:relative;
37 margin-left:512px;
38 678px;
39 height:30px;
40 background-color:rgb(227,228,229);
41 }
42 .tool-little{
43 float:left;
44 margin-left:15px;
45 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 1190px;
64 height: 100%;
65 background-color: rgb(246,246,246);
66 }
67
68
69 /*頂部導(dǎo)航*/
70
71 .top-nav-dk {
72 position: relative;
73 100%;
74 height: 140px;
75 /*background-color: yellow;*/
76 }
77
78
79 /*導(dǎo)航搜索*/
80
81 .top-s {
82 100%;
83 height: 60px;
84 /*background-color: pink;*/
85 }
86 /*導(dǎo)航*/
87 .top-s input{
88 margin-left:420px;
89 margin-top:15px;
90 350px;
91 height:35px;
92 border:0.5px solid red;
93 }
94
95
96 /*搜索下小字*/
97
98 .top-font {
99 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 /*導(dǎo)航*/
110
111 .top-nav {
112 100%;
113 height: 40px;
114 background-color: yellowgreen;
115 }
116
117
118 /*京東小狗*/
119
120 .jd {
121 position: absolute;
122 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 1190px;
132 height: 480px;
133 background-color: rgb(246,246,246);
134 }
135
136
137 /*輪播大框左*/
138
139 .center-a {
140 float: left;
141 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 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 190px;
166 height: 480px;
167 background-color: deeppink;
168 background-image:url(../img/QQ截圖20170918131030.png);
169 }
170
171
172 /*左側(cè)錨點*/
173
174
175 /*.left-nav{
176 position:fixed;
177 margin-right:10%;
178 margin-top:200px;
179 34px;
180 height:453px;
181 background-color:blue;
182 }*/
183
184
185 /*輪播*/
186
187 .lb {
188 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 790px;
201 height: 130px;
202 background-color: red;
203 }
204
205 .lb-b-l,
206 .lb-b-r {
207 float: left;
208 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 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 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 /*領(lǐng)券中心 行*/
253 .ify-buttom{
254 position:relative;
255 margin-top:30px;
256 1190px;
257 height:270px;
258 background-color:rgb(246,246,246);
259 }
260 .ify-buttom-l,.ify-buttom-r{
261 float:left;
262 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 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 100%;
279 height:100px;
280 background-color:rgb(224,224,224);
281 }
282 /*灰條居中框*/
283 .a-center{
284 /*position:relative;*/
285 margin:0px auto;
286 1190px;
287 height:100px;
288 background-color:rgb(224,224,224);
289 background-image:url(../img/QQ截圖20170918131822.png);
290 }
總結(jié)
以上是生活随笔為你收集整理的小作业的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
