python第七十九天--第十四周作业

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>仿京东</title>
  7         <style>
  8             /*外框*/
  9             
 10             .div_mingr {
 11                 height: 30px;
 12                 margin: 0 auto;
 13                 width: 980px;
 14             }
 15             /*左边*/
 16             
 17             .div_left,
 18             .div_cent_l,
 19             .menu_cent_1 {
 20                 float: left;
 21             }
 22             /*中间*/
 23             
 24             .div_cent_l {
 25                 width: 190px;
 26                 height: 100%;
 27                 background-color: #0dfsd;
 28             }
 29             
 30             .div_cent_r {
 31                 height: 100%;
 32                 background-color: aqua;
 33             }
 34             /*右边*/
 35             
 36             .div_right,
 37             .div_cent_r,
 38             .menu_cent_r,
 39             .menu_cent_2 {
 40                 float: right;
 41             }
 42             /* 用来清楚浮动*/
 43             
 44             .div_float {
 45                 clear: both;
 46             }
 47             /*<!--顶部 -->*/
 48             
 49             .div_top_1 {
 50                 line-height: 30px;
 51             }
 52             
 53             #div_0_1 a,
 54             #div_0_2 a {
 55                 color: #999999;
 56                 line-height: 30px;
 57             }
 58             /*logo*/
 59             
 60             .div_logo,
 61             .div_logo_0 {
 62                 height: 170px;
 63             }
 64             /*标志 logo*/
 65             
 66             .a_logo {
 67                 overflow: hidden;
 68                 display: block;
 69                 height: 170px;
 70                 /*width: 190px;*/
 71                 background-image: url(img/logo.v2.png);
 72             }
 73             
 74             /*搜索  外框*/
 75             
 76             .form {
 77                 margin: 0, 70px, 0, 0;
 78                 left: 320px;
 79                 top: 25px;
 80                 width: 339px;
 81                 height: 35px;
 82                 border: 1px solid;
 83                 border-color: red;
 84             }
 85             
 86             /*搜索框*/
 87             .input_s {
 88                 margin: 0 auto;
 89                 float: left;
 90                 line-height: 30px;
 91                 width: 280px;
 92                 border-color: red;
 93                 border-right:white ;
 94             }
 95             
 96             .upload-bg{
 97                 margin: 0 auto;
 98                 float: left;
 99                 width: 20px;
100                 height: 20px;
101                 background: url(img/sprite-photo-search.png) no-repeat;
102                 cursor: pointer;
103                 margin-top: 10px;
104             }
105             /*<!--搜索提示-->*/
106             .ls a {
107                 font: "微软雅黑";
108                 font-size: small;
109                 color: #666666;
110             }
111             
112             
113             /*搜索按钮*/
114             .button {
115                 margin: 0 auto;
116                 width: 35px;
117                 height: 35px;
118                 background: url(img/magnifier1211.png);
119             }
120             
121             
122             
123             /*菜单*/
124             .div_meun {
125                 background-color: red;
126                 height: 40px;
127             }
128             
129             .menu_cent_1 {
130                 width: 160px;
131                 text-aling: ceter;
132             }
133             
134             
135             /*a 标签 */
136             .a_red {
137                 color: white;
138                 line-height: 40px;
139                 font-weight: bolder;
140                 text-align: center;
141             }
142             
143             #go {
144                 margin-top: 70px;
145                 width: 188px;
146                 height: 33px;
147                 background-color: #fff;
148                 text-align: center;
149                 line-height: 33px;
150                 overflow: hidden;
151                 position: relative;
152                 z-index: 1;
153                 float: left;
154                 border: 1px solid #e3e4e5;
155             }
156             
157             .menu_cent_2 {
158                 margin-left: 80px;
159             }
160             
161             #meun_1 {
162                 margin: 0 auto;
163                 width: 160px;
164                 text-align: center;
165             }
166             /*中间内容
167         .cent_meun{
168             width: 980px;           
169         }*/
170             
171             .left_big_meun {
172                 float: left;
173                 height: 310px;
174                 width: 160px;
175                 border: 1px solid;
176                 border-color: #CCCCCC;
177             }
178             
179             .span_menu {
180                 width: 160px;
181                 height: 50px;
182                 border: 1px solid;
183                 border-color: #CCCCCC;
184             }
185             
186             .a_red_z {
187                 margin: 0 auto;
188                 font-size: 20px;
189                 font-weight: bolder;
190             }
191             
192             .a_red_let {
193                 font-size: 15px;
194             }
195             /*菜单左边下方*/
196             
197             .cent_l_d {
198                 clear: both;
199                 margin-top: 30px;
200                 width: 160px;
201                 height: 36px;
202                 border: 1px solid;
203                 border-color: #CCCCCC;
204                 background: #DDDDDD;
205             }
206             /*右边内容*/
207             /*右边内容上方*/
208             
209             .div_cen_r_u {
210                 /*background-color: grey;*/
211                 width: 800px;
212                 height: 300px;
213             }
214             
215             .div_cen_r_u_1 {
216                 margin: auto;
217             }
218             
219             #div_r_u {
220                 margin-top: 20px;
221                 border: 1px solid #DDDDDD;
222                 border-top: 2px solid red;
223                 width: 100%;
224                 height: 200px;
225             }
226             
227             .p_m {
228                 padding-left: 45px;
229             }
230             
231             hr {
232                 width: 95%;
233             }
234             
235             .td_1 {
236                 color: #005EA7;
237                 font-weight: bolder;
238             }
239             /*右边内容下方*/
240             
241             .div_cen_r_d {
242                 background-color: ;
243                 width: 800px;
244                 height: 300px;
245             }
246             
247             .cen_r_d_1 {
248                 margin: 0 auto;
249                 padding: 0;
250                 border: 1px solid #D0D0D0;
251                 height: 50px;
252             }
253             
254             .r_d_2 {
255                 float: left;
256                 line-height: 20px;
257                 margin: 0 auto;
258             }
259             
260             .r_d_3 {
261                 margin: 0 auto;
262                 float: right;
263                 line-height: 20px;
264             }
265             
266             .a_33 {
267                 margin-left: 10px;
268                 color: blue;
269             }
270             /*<!--  右边内容下方 产品图片-->*/
271             
272             .product {
273                 
274                 width: 100%;
275                 height: 750px;
276             }
277             
278             .rp{
279                 width: 100%;
280                 float: left;
281                 }
282             .rp1{
283                 
284                 border: 1px solid red;
285                 text-align: center;
286                 float: left;
287                 margin:5px 5px 5px 10px;
288                 /*padding: 10px;*/
289             }
290             
291             .rp1 img{
292                 width: 150px;
293                 height: 150px;
294             }
295             .rp1 input[type="text"]{
296                 width: 25px;
297             } 
298             /*去除a 标签的下划线*/
299             ul{
300                 list-style-type: none;/*除去ul标签前缀*/
301             }
302             
303             a {
304                 text-decoration: none;
305                 color: black;
306             }
307         </style>
308 
309     </head>
310 
311     <body style="margin: 0 auto">
312         <!--顶部 -->
313         <div class="div_top" id="div_0" style="background-color: #DDDDDD;">
314             <!--顶部 -->
315             <div class="div_mingr">
316                 <div class="div_top_1 div_left" id="div_0_1">
317                     <a>收藏本站</a>
318                 </div>
319                 <div class="div_top_1 div_right" id="div_0_2">
320                     <a href="" methods="">登陆</a>&nbsp;&nbsp;&nbsp;
321                     <a href="">注册</a>&nbsp;&nbsp;&nbsp;
322                     <a href="">我的订单</a>&nbsp;&nbsp;&nbsp;
323                     <a href="">我的收藏</a>&nbsp;&nbsp;&nbsp;
324                     <a href="">VIP会员俱乐部</a>&nbsp;&nbsp;&nbsp;
325                     <a href="">客户服务</a>&nbsp;&nbsp;&nbsp;
326                     <a href="">关注</a>&nbsp;&nbsp;&nbsp;
327                     <a href="">手机版</a>&nbsp;&nbsp;&nbsp;
328                 </div>
329             </div>
330             <div class="div_float"></div>
331         </div>
332 
333         <!--logo-->
334         <div class="div_logo " id="div_1">
335             <div class="div_mingr div_logo_0">
336                 <div class="div_mingr div_logo_0">
337                     <div class="div_left div_logo_1">
338                         <!--  logo 中间-->
339                         <div class="div_cent_l">
340                             <!--   logo图片框-->
341                             <a href="#" class="a_logo"></a>
342                         </div>
343                         <div style="float: right; height: 170px; width: 300px; margin-left:200px ;">
344                             <div style="height: 70px;"></div>
345                             <div class="form">
346                                 <!--搜索框 -->
347                                 <form action="#">
348                                     <input type="text" name="" id="" value="水果" class="input_s" />
349                                     <span class="upload-bg"></span>
350                                     <button class="button"></button>
351                                 </form>
352                                 
353                             </div>
354                             <div class="ls">
355                                 <a href="">热门搜索:</a>
356                                 <a href="">火龙果,电脑</a>
357                             </div>
358                         </div>
359 
360                         <!---->
361                     </div>
362                     <div class="div_right">
363                         <div id="go">
364                             <a href="#" name="">购物车 </a>
365                             <a href="" style="color:red">2</a>
366                             <a href="">件&nabla; </a>
367                         </div>
368                         <!--<input type="button"  value="" />-->
369                     </div>
370                 </div>
371                 <div class="div_float"></div>
372             </div>
373             <div class="div_float"></div>
374         </div>
375 
376         <!--菜单 -->
377         <div class="div_meun " id="div_1">
378 
379             <!-- 菜单左边-->
380             <div class="div_mingr div_meun_0" id="">
381                 <!-- 左边   1-->
382                 <div class="div_meun_1 div_left">
383                     <div class="menu_cent_1">
384                         <a href="#" class="a_red" id="meun_1">全部商品分类</a>
385                     </div>
386                     <div class="menu_cent_2">
387                         <a href="" class="a_red">首页</a>&nbsp;&nbsp;&nbsp;
388                         <a href="" class="a_red">网上超市</a>&nbsp;&nbsp;&nbsp;
389                         <a href="" class="a_red">水果超市</a>&nbsp;&nbsp;&nbsp;
390                         <a href="" class="a_red">超级订餐</a>&nbsp;&nbsp;&nbsp;
391                         <a href="" class="a_red">生活娱乐</a>&nbsp;&nbsp;&nbsp;
392                         <a href="" class="a_red">研究院</a>
393                     </div>
394                     <div style="clear: both;"></div>
395 
396                 </div>
397                 <!--右边-->
398                 <div class="div_right">
399 
400                     <a href="" class="a_red">研究院</a>&nbsp;&nbsp;&nbsp;
401                     <a href="" class="a_red">开发组</a>&nbsp;&nbsp;&nbsp;
402                     <a href="" class="a_red">论&nbsp;&nbsp;坛</a>
403 
404                 </div>
405             </div>
406             <div class="div_float"></div>
407         </div>
408 
409         <!--中间部分-->
410         <div class="cent_mingr">
411             <div class="mingr cent_meun div_mingr">
412                 <div class="div_left">
413                     <!--左边菜单-->
414                     <div class="left_big_meun">
415                         <div class="span_menu">
416                             <!--左边菜单  分类-->
417                             <a href="#" class="a_red_z">家用电器</a> <br />
418                             <a href="" class="a_red_let">电冰箱</a>
419                             <a href="" class="a_red_let">电冰箱</a>
420                             <a href="" class="a_red_let">电冰箱</a>
421                         </div>
422                         <div class="span_menu">
423                             <!--左边菜单  分类-->
424                             <a href="#" class="a_red_z">水果</a> <br />
425                             <a href="" class="a_red_let">香蕉</a>
426                             <a href="" class="a_red_let">苹果</a>
427                             <a href="" class="a_red_let">桃子</a>
428                         </div>
429                         <div class="span_menu">
430                             <!--左边菜单  分类-->
431                             <a href="#" class="a_red_z">家用电器</a> <br />
432                             <a href="" class="a_red_let">电冰箱</a>
433                             <a href="" class="a_red_let">电冰箱</a>
434                             <a href="" class="a_red_let">电冰箱</a>
435 
436                         </div>
437                         <div class="span_menu">
438                             <!--左边菜单  分类-->
439                             <a href="#" class="a_red_z">家用电器</a> <br />
440                             <a href="" class="a_red_let">电冰箱</a>
441                             <a href="" class="a_red_let">电冰箱</a>
442                             <a href="" class="a_red_let">电冰箱</a>
443                         </div>
444                         <div class="span_menu">
445                             <!--左边菜单  分类-->
446                             <a href="#" class="a_red_z">家用电器</a> <br />
447                             <a href="" class="a_red_let">电冰箱</a>
448                             <a href="" class="a_red_let">电冰箱</a>
449                             <a href="" class="a_red_let">电冰箱</a>
450                         </div>
451                         <div class="span_menu">
452                             <!--左边菜单  分类-->
453                             <a href="#" class="a_red_z">水果</a> <br />
454                             <a href="" class="a_red_let">香蕉</a>
455                             <a href="" class="a_red_let">苹果</a>
456                             <a href="" class="a_red_let">桃子</a>
457                         </div>
458                     </div>
459                     <div style="width: 160px ; height: 15px; clear: both">
460 
461                     </div>
462                     <div class="cent_l_d">
463                         <!--  左边下方-->
464                         <p>热销排行榜</p>
465                     </div>
466                     <div style="border: 1px solid ;border-color:#ECECEC ;">
467                         <a href="">coneting</a>
468                     </div>
469 
470                 </div>
471 
472                 <div class="div_right">
473                     <!--右边内容-->
474                     <div class="div_cen_r_u">
475                         <!--  右边内容上方-->
476                         <div style="height: 30px;"></div>
477                         <div class="div_cen_r_u_1">
478                             <a href="#">电脑</a> &gt;&gt;
479                             <a href="">品牌</a>&gt;&gt;
480                             <a href="#">联想</a>&gt;&gt;
481                         </div>
482                         <div id="div_r_u">
483                             <p>您已选择：&nbsp;联想 </p>
484                             <hr/>
485                             <p class="p_m">
486                                 <tr>
487                                     <a href="">
488                                         <td class="td_1">材质：</td>
489                                     </a>
490                                     <a href="">
491                                         <td> &nbsp;&nbsp; 工艺金属</td>
492                                     </a>
493                                     <a href="">
494                                         <td> &nbsp;&nbsp;工程塑料</td>
495                                     </a>
496                                     <a href="">
497                                         <td> &nbsp;&nbsp;红木</td>
498                                     </a>
499                                 </tr>
500                             </p>
501                             <hr />
502                             <p class="p_m">
503                                 <tr>
504                                     <a href="">
505                                         <td class="td_1">风格：</td>
506                                     </a>
507                                     <a href="">
508                                         <td> &nbsp;&nbsp; 小清新</td>
509                                     </a>
510                                     <a href="">
511                                         <td> &nbsp;&nbsp;温情脉脉</td>
512                                     </a>
513                                     <a href="">
514                                         <td> &nbsp;&nbsp;创意</td>
515                                     </a>
516                                 </tr>
517                             </p>
518                             <hr />
519                             <p class="p_m">
520                                 <tr>
521                                     <a href="">
522                                         <td class="td_1">材质：</td>
523                                     </a>
524                                     <a href="">
525                                         <td> &nbsp;&nbsp; 工艺金属</td>
526                                     </a>
527                                     <a href="">
528                                         <td> &nbsp;&nbsp;工程塑料</td>
529                                     </a>
530                                     <a href="">
531                                         <td> &nbsp;&nbsp;红木</td>
532                                     </a>
533                                 </tr>
534                             </p>
535 
536                         </div>
537                         <div>
538                             <div style="width:70px;height: 20px; border: 1px solid #DDDDDD; margin: 0 auto; font-size:12px ; text-align: center;">
539                                 <a href="">更多选项</a>
540                             </div>
541                         </div>
542 
543                     </div>
544 
545                     <!--  右边内容下方-->
546                     <div class="div_cen_r_d">
547                         <!--  右边内容下方-->
548                         <div class="cen_r_d_1">
549                             <div class="r_d_2">
550                                 <p><span id="" style="margin-right: 25px;">排序:</span>
551                                     <a href="" class="a_33">价格</a>
552                                     <a href="" class="a_33">销量</a>
553                                     <a href="" class="a_33">最新</a>
554                                 </p>
555                             </div>
556                             <div class="r_d_3">
557                                 <p>
558                                     <a href="" style="color:red">共XX件商品 &nbsp;&nbsp;1</a>
559                                     <a href="">/1685</a> <input type="button" name="" id="" value="<" /><input type="button" name="" id="" value=">" /></p>
560                             </div>
561                         </div>
562                         <!--<div class="div_float"></div>-->
563                         <!--  右边内容下方 产品图片-->
564                         <div class="product">
565                             <!--<div class="lp">-->
566                                 <ul class="rp"><!--小视窗-->
567                                     
568                                     <li class="rp1"><a class="a1" href="#"><img src="img/11.jpg"><p>¥5999.00<br>Apple MacBook Air <br>13.3英寸笔记本电脑</p></a>
569                                         <input type="button" name="" id="" value="-" />
570                                         <input type="text" value="1"/>
571                                         <input type="button" name="" id="" value="+" />
572                                     </li>
573                                     <li class="rp1"><a class="a1" href="#"><img src="img/12.jpg"><p>¥6480.00<br>拯救者R720<br>联想电脑旗舰店</p></a>
574                                         <input type="button" name="" id="" value="-" />
575                                         <input type="text" value="1"/>
576                                         <input type="button" name="" id="" value="+" />
577                                         
578                                     </li>
579                                     <li class="rp1"><a class="a1" href="#"><img src="img/13.jpg"><p>¥5999.00<br>惠普(HP)暗影精灵II代Pro 暗影红<br>15.6英寸游戏笔记本</p></a>
580                                         <input type="button" name="" id="" value="-" />
581                                         <input type="text" value="1"/>
582                                         <input type="button" name="" id="" value="+" />
583                                     </li>
584                                     <li class="rp1"><a class="a1" href="#"><img src="img/14.jpg"><p>¥3599.00<br>小米(MI) Air 12.5英寸<br>金属超轻薄笔记本电脑</p></a>
585                                         <input type="button" name="" id="" value="-" />
586                                         <input type="text" value="1"/>
587                                         <input type="button" name="" id="" value="+" />
588                                     </li>
589                             
590                                 </ul>
591                                 <ul class="rp">
592                                     <li class="rp1"><a class="a1" href="#"><img src="img/15.jpg"><p>¥4199.00<br>宏碁（acer）小e E5<br>15.6英寸便携笔记本电脑</p></a>
593                                         <input type="button" name="" id="" value="-" />
594                                         <input type="text" value="1"/>
595                                         <input type="button" name="" id="" value="+" />
596                                     </li>
597                                     <li class="rp1"><a class="a1" href="#"><img src="img/13.jpg"><p>¥5999.00<br>拯救者R720<br>联想电脑旗舰店</p></a>
598                                         <input type="button" name="" id="" value="-" />
599                                         <input type="text" value="1"/>
600                                         <input type="button" name="" id="" value="+" />
601                                     </li>
602                                     <li class="rp1"><a class="a1" href="#"><img src="img/12.jpg"><p>¥5999.00<br>拯救者R720<br>联想电脑旗舰店</p></a>
603                                         <input type="button" name="" id="" value="-" />
604                                         <input type="text" value="1"/>
605                                         <input type="button" name="" id="" value="+" />
606                                     </li>
607                                     <li class="rp1"><a class="a1" href="#"><img src="img/11.jpg"><p>¥5999.00<br>拯救者R720<br>联想电脑旗舰店</p></a>
608                                         <input type="button" name="" id="" value="-" />
609                                         <input type="text" value="1"/>
610                                         <input type="button" name="" id="" value="+" />
611                                     </li>
612                                 </ul>
613                                 
614                                 
615                             <!--</div>-->
616                             
617                         </div>    
618                     </div>
619 
620                     
621                 </div>
622 
623             </div>
624             <div class="div_float"></div>
625 
626         </div>
627     </body>
628 
629 </html>
View Code
posted @ 2017-07-20 17:59 莫柔落切阅读(459) 评论(1) 编辑收藏举报
刷新页面返回顶部
莫柔落切

python第七十九天--第十四周作业

公告
