1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>小米商城</title>
  6.     <link rel="stylesheet" href="小米.css">
  7. </head>
  8.  
  9. <body>
  10. <!--最上边-->
  11.  
  12. <div class="up">
  13.     <div class="top">
  14.         <!--最上左边-->
  15.         <ul class="top-left">
  16.             <li>玉米商城&nbsp;</li>
  17.             <li><a href="">链接A&nbsp;</a></li>
  18.             <li><a href="">链接B&nbsp;</a></li>
  19.             <li><a href="">链接C&nbsp;</a></li>
  20.             <li><a href="">链接D&nbsp;</a></li>
  21.         </ul>
  22.         <!--最上右边-->
  23.         <ul class="top-right">
  24.             <li><a href="">登录&nbsp;</a></li>
  25.             <li><a href="">注册&nbsp;</a></li>
  26.             <li><a href="">消息&nbsp;</a></li>
  27.             <li><a href="">购物车&nbsp;</a></li>
  28.  
  29.         </ul>
  30.     </div>
  31.     <!--top2-->
  32.     <div class="top2">
  33.         <ul class="top2-left">
  34.             <li class="lmi"></li>
  35.             <li><span class="sp">55*55</span></li>
  36.             <li><a href="">玉米手机</a></li>
  37.             <li><a href="">苞米</a></li>
  38.             <li><a href="">红米</a></li>
  39.             <li><a href="">黑米</a></li>
  40.             <li><a href="">大米</a></li>
  41.             <li><a href="">小米</a></li>
  42.             <li><a href="">米米电脑</a></li>
  43.             <li><a href="">米米汽车</a></li>
  44.         </ul>
  45.         <div class="top2-right">
  46.             <!--<input  class="text2" name = 'ss'type= 'submit' value="搜索">-->
  47.             <input class="text1" name ='cat' type="text" value="">
  48.                     <input  class="text2" name = 'ss'type= 'submit' value="搜索">
  49.             </div>
  50.  
  51.          </div>
  52.  
  53.     <!--top3-->
  54.         <div>
  55.         <!--top3-left-->
  56.         <div class="top3-left">
  57.             <ul>
  58.             <li>手机 电话卡</li>
  59.             <li>电视 盒子</li>
  60.             <li>笔记本</li>
  61.             <li>智能 家电</li>
  62.             <li>健康 家具</li>
  63.             <li>出行 儿童</li>
  64.             <li>路由器 手机配件</li>
  65.             <li>移动电源 插线板</li>
  66.             <li>耳机 音箱</li>
  67.             <li>生活 米兔</li>
  68.             </ul>
  69.         </div>
  70.  
  71.             <div class="top3-right">
  72.  
  73.                 <!--<img src="https://dummyimage.com/992x460/33FFFF" alt="">-->
  74.             </div>
  75.  
  76.          <div class="top4">
  77.  
  78.              <div class="top4-1" id="top4-11"></div>
  79.              <div class="top4-2"></div>
  80.              <div class="top4-3"></div>
  81.              <div class="top4-4"></div>
  82.              </div>
  83.  
  84.     <!--top5-->
  85.  
  86.          <div class="top5">
  87.              <p>限时闪购</p>
  88.  
  89.          </div>
  90.         </div>
  91. <!--top6-->
  92.         <ul class="top6">
  93.             <li class="top6-1"></li>
  94.             <li class="top6-2"></li>
  95.             <li class="top6-3"></li>
  96.             <li class="top6-4"></li>
  97.             <li class="top6-5"></li>
  98.  
  99.         </ul>
  100.  
  101. </div>
  102.  
  103. <!--below-->
  104. <div class="below">
  105.     <div class="top7">
  106.         <p>家电</p>
  107.     </div>
  108.  
  109.     <div class="top8-left"> </div>
  110.     <ul class="top8-right-top1">
  111.         <!--<li class="top8-right-top1">-->
  112.             <div class="top8-11"></div>
  113.             <p>商品名称</p>
  114.             <p>1999元</p>
  115.         <!--</li>-->
  116.  
  117.     </ul>
  118.     <ul class="top8-right-top2">
  119.         <!--<li class="top8-right-top1">-->
  120.             <div class="top8-12"></div>
  121.             <p>商品名称</p>
  122.             <p>1999元</p>
  123.         <!--</li>-->
  124.  
  125.     </ul>
  126.     <ul class="top8-right-top3">
  127.         <!--<li class="top8-right-top1">-->
  128.             <div class="top8-13"></div>
  129.             <p>商品名称</p>
  130.             <p>1999元</p>
  131.         <!--</li>-->
  132.         </ul>
  133.     <ul class="top8-right-top4">
  134.         <!--<li class="top8-right-top1">-->
  135.             <div class="top8-14"></div>
  136.             <p>商品名称</p>
  137.             <p>1999元</p>
  138.         <!--</li>-->
  139.     </ul>
  140.  
  141.     <ul class="top8-right-top5">
  142.         <!--<li class="top8-right-top1">-->
  143.             <div class="top8-15"></div>
  144.             <p>商品名称</p>
  145.             <p>1999元</p>
  146.         <!--</li>-->
  147.     </ul>
  148.  
  149.     <ul class="top8-right-top6">
  150.         <!--<li class="top8-right-top1">-->
  151.             <div class="top8-16"></div>
  152.             <p>商品名称</p>
  153.             <p>1999元</p>
  154.         <!--</li>-->
  155.     </ul>
  156.  
  157.     <ul class="top8-right-top7">
  158.         <!--<li class="top8-right-top1">-->
  159.             <div class="top8-17"></div>
  160.             <p>商品名称</p>
  161.             <p>1999元</p>
  162.         <!--</li>-->
  163.     </ul>
  164.  
  165.     <ul class="top8-right-top8">
  166.         <!--<li class="top8-right-top1">-->
  167.             <div class="top8-18"></div>
  168.             <p>商品名称</p>
  169.             <p>1999元</p>
  170.         <!--</li>-->
  171.     </ul>
  172.  
  173. <!--top9-->
  174. <div class="top9">
  175.     热评商品
  176. </div>
  177.  
  178. <!--top10-->
  179.     <!--<div class="top10-0">-->
  180.     <div class="top10">
  181.     <ul class="top10-1">
  182.         <div class="top10-1-1"></div>
  183.         <p class="top10-text1">东西真心不错,用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</p>
  184.         <a href="">来源于喷子大大的评价 </a>
  185.         <span > <strong>玉米插线板 | </strong></span>
  186.         <span id="s2-1"> 49</span>
  187.  
  188.     </ul>
  189.  
  190.     <ul class="top10-2">
  191.         <div class="top10-2-1"></div>
  192.                 <p class="top10-text2">东西真心不错,用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</p>
  193.                 <a href="">来源于喷子大大的评价</a>
  194.         <span > <strong>玉米插线板 | </strong></span>
  195.         <span id="s2-2"> 49</span>
  196.     </ul>
  197.  
  198.     <ul class="top10-3">
  199.         <div class="top10-3-1"></div>
  200.                 <p class="top10-text3">东西真心不错,用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</p>
  201.                 <a href="">来源于喷子大大的评价</a>
  202.         <span > <strong>玉米插线板 | </strong></span>
  203.         <span id="s2-3"> 49</span>
  204.     </ul>
  205.  
  206.     <ul class="top10-4">
  207.         <div class="top10-4-1"></div>
  208.                 <p class="top10-text4">东西真心不错,用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</p>
  209.                 <a href="">来源于喷子大大的评价</a>
  210.         <span > <strong>玉米插线板 | </strong></span>
  211.         <span id="s2-4"> 49</span>
  212.  
  213.     </ul>
  214.     </div>
  215.  
  216.     <div class="top11">
  217.         <div class="yuyue">预约维修</div>
  218.         <div>|</div>
  219.         <div>7天无理由退货</div>
  220.         <div>|</div>
  221.         <div>15天免费换货</div>
  222.         <div>|</div>
  223.         <div>满150包邮</div>
  224.         <div>|</div>
  225.         <div>520余家售后网点</div>
  226.  
  227.     </div>
  228.  
  229. <!--top12-->
  230.     <div class="top12">
  231.         <hr>
  232.         &copy;为发烧而生</div>
  233.  
  234. </div>
  235.  
  236. </body>
  237.  
  238. </html>

html

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6. .up {
  7.     width: 100%;
  8.     height:50%;
  9.     background: white;
  10.  
  11.     /*float: left;*/
  12.     /*margin-bottom: 10px;*/
  13.     /*overflow: hidden;*/
  14.     padding-bottom: 330px;
  15.     /*margin-left: 80px;*/
  16. }
  17. .top {
  18.     width: 100%;
  19.     background-color: black;
  20.     /*float: left;*/
  21.     /*height: 25px;*/
  22.     list-style: none;
  23.     display: inline-block;
  24.     color: white;
  25. }
  26. .top-left{
  27.     margin-left: 80px;
  28.     /*width: 100%;*/
  29.     /*background-color: black;*/
  30.     float: left;
  31. }
  32. .top li{
  33.     display: inline-block;
  34.     color: white;
  35. }
  36. .top a{
  37.     color: white;
  38.     text-decoration-line: none;
  39.  
  40. }
  41.  
  42. .top a:hover{
  43.     color: red;
  44. }
  45. /*最上右边*/
  46. .top-right{
  47.     margin-right: 80px;
  48.     /*width: 100%;*/
  49.     /*background-color: black;*/
  50.     float: right;}
  51.  
  52. /*top2*/
  53.  
  54. .top2-left li{
  55.     float: left;
  56.     display: inline-block;
  57.     /*margin-left: 40px;*/
  58.     list-style: none;
  59.     font-size: small;
  60.     /*margin: 5px;*/
  61.     /*height: 55px;*/
  62.     /*margin: 0 auto;*/
  63. }
  64. /*.sp{*/
  65.     /*margin: 10px;*/
  66.     /*height: 55px;*/
  67.     /*display: inline-block;*/
  68. /*}*/
  69.  
  70.     /*图片*/
  71.  
  72. /*.mi {*/
  73.     /*width: 142px;*/
  74.     /*height: 55px;*/
  75.     /*position: relative;*/
  76.     /*top: 0;*/
  77.     /*left: 40px;*/
  78. /*}*/
  79.  
  80. .top2-left a ,.sp{
  81.     /*margin: 5px;*/
  82.     /*margin-top: 10px;*/
  83.     /*margin-bottom: 5px;*/
  84.     /*height: 55px;*/
  85.     display: inline-block;
  86.     /*margin: 0 auto;*/
  87.     text-decoration-line: none;
  88.     text-align: center;
  89.     line-height: 55px;
  90.     margin-right: 5px;
  91. }
  92.  
  93. .top2-left a:hover{
  94.     color: green;
  95. }
  96. .sp{
  97.     margin-left: 30px;
  98.     margin-right: 30px;
  99. }
  100.  
  101. .lmi{
  102.     width: 55px;
  103.     height: 55px;
  104.     background-image: url("mi.jpg");
  105.     background-position: left -111px top 250px ;
  106.     margin-left: 80px;
  107.     /*clear: left;*/
  108.  
  109. }
  110.  
  111. /*top2-right*/
  112. .top-right input{
  113.     /*font-size: large;*/
  114.     /*float: right;*/
  115. }
  116.  
  117. .text1,.text2{
  118.     margin-top: 10px;
  119.     /*border: 1px indianred solid;*/
  120. }
  121.  
  122. .text2  {
  123.     /*display: inline-block;*/
  124.     float: right;
  125.     height: 29px;
  126.  
  127.     margin-right: -173px;
  128.     /*height: 25px;*/
  129.     /*margin-right: 60px;*/
  130.     /*margin-right: 50px;*/
  131.     /*float: right;*/
  132.     /*margin-left: 0px;*/
  133.     /*margin-left: -10px;*/
  134.  
  135. }
  136.  
  137. .text1{
  138.     height: 25px;
  139.     float:right ;
  140.     margin-right: 80px;
  141.     /*margin-right: -10px;*/
  142.  
  143. }
  144. .top3-left {
  145.     /*clear: both;*/
  146.     font-size: small;
  147. }
  148.  
  149. /*top3*/
  150. /*top3-left*/
  151. .top3-left{
  152.     /*margin: 0 auto;*/
  153.     width: 197px;
  154.     background: darkslateblue;
  155.     height: 460px;
  156.     margin-left: -476px;
  157.     margin-top:55px;
  158.     display: inline-block;
  159.     /*clear: both;*/
  160.  
  161. }
  162.  
  163. .top3-left li{
  164.     /*text-align: center;*/
  165.     float: left;                    /*此处有问题*/
  166.     display: inline-block;
  167.     clear: both;                     /*!!!!!!!!此处有问题*/
  168.     /*margin-left: 40px;*/
  169.     /*margin-top: 25px;*/
  170.     margin: 14px auto;
  171.     margin-left: 20px;
  172.     /*overflow: hidden;*/
  173.     /*background: blue;*/
  174. }
  175.  
  176. .top3-right{
  177.     /*content: url("https://dummyimage.com/992x460/33FFFF");*/
  178.     /*margin-right: 0px;*/
  179.     width: 992px;
  180.     height: 460px;
  181.     float: right;
  182.     display: inline-block;
  183.     /*margin-top: 55px;*/
  184.     background: url("https://dummyimage.com/992x460/33FFFF") 0px 0px;  /*css中可以使用backgroupd 来设置背景图片 */
  185.     margin-top: -464px;
  186.     /*margin-left: 278px;*/
  187.     margin-right: 80px;
  188. }
  189. /*.top3-right img{*/
  190.     /*width: 992px;*/
  191.     /*height: 460px;*/
  192.     /*float: left;*/
  193.     /*!*display: inline-block;*!*/
  194.     /*!*margin-top: 55px;*!*/
  195.     /*clear: left;*/
  196.     /*background: url("https://dummyimage.com/992x460/33FFFF") 0px 0px;  !*css中可以使用backgroupd 来设置背景图片 *!*/
  197.  
  198.     /*width: 80%;*/
  199. /*}*/
  200. /*top4*/
  201.     /*top4-1*/
  202.     .top4 {
  203.         width:100%;
  204.         height: 170px;
  205.         /*display: inline-block;*/
  206.         display: inline-block;
  207.  
  208.     }
  209.     .top4 div{
  210.         height: 170px;
  211.         margin-top: 10px;
  212.         margin-right: 3px;
  213.     }
  214.     .top4-1{
  215.         display: inline-block;
  216.         width:234px;
  217.         float: left;
  218.         background: no-repeat url("https://dummyimage.com/234x170/888888");
  219.         margin-left: 80px;
  220.     }
  221.     #top4-11{
  222.         margin-left: 80px;
  223.     }
  224.     .top4-2 {
  225.  
  226.         width: 316px;
  227.         float: left;
  228.         background: no-repeat url("https://dummyimage.com/316x170/00008B");
  229.     }
  230.     .top4-3 {
  231.         width: 316px;
  232.         float: left;
  233.         background: no-repeat url("https://dummyimage.com/316x170/F08080");
  234.     }.top4-4 {
  235.         width: 316px;
  236.         float: left;
  237.         background: no-repeat url("https://dummyimage.com/316x170/008866");
  238.     }
  239.  
  240. /*top5*/
  241. /*.top5   {*/
  242.     /*margin-top: 10px;*/
  243. /*}*/
  244. .top5{
  245.     height: 100px;
  246. }
  247.     .top5 p   {
  248.         /*float: left;*/
  249.         /*clear: both;*/     /*!!!!clear和float到底什么时候有差别*/
  250.         /*width:100%;*/
  251.         height: 100px;
  252.         float: left;
  253.         margin-left: 80px;
  254.         margin-top: 20px;
  255.         /*clear: both;*/
  256.     }
  257.  
  258. /*top6*/
  259. .top6{
  260.     float: left;
  261.     width:100%;
  262.     height:340px;
  263.     margin-top: -85px;
  264. }
  265. .top6 li{
  266.     /*width:;*/
  267.     display: inline-block;
  268.     margin-top: 20px;
  269. }
  270.  
  271. .top6-1 {
  272.     width: 234px;
  273.     background: no-repeat url("https://dummyimage.com/234x340/77FFEE");
  274.     height: 340px;
  275.     display: inline-block;
  276.     margin-left: 80px;
  277. }
  278.  
  279. .top6-2 {
  280.     background: no-repeat url("https://dummyimage.com/234x340/FF3333");
  281.     height: 340px;
  282.     display: inline-block;
  283.     width: 234px;
  284. }
  285. .top6-3 {
  286.     background: no-repeat url("https://dummyimage.com/234x340/66DD00");
  287.     height: 340px;
  288.     display: inline-block;
  289.     width: 234px;
  290. }
  291. .top6-4 {
  292.     background: no-repeat url("https://dummyimage.com/234x340/FF3333");
  293.     height: 340px;
  294.     display: inline-block;
  295.     width: 234px;
  296. }
  297. .top6-5 {
  298.     background: no-repeat url("https://dummyimage.com/234x340/66DD00");
  299.     height: 340px;
  300.     display: inline-block;
  301.     width: 234px;
  302. }
  303.  
  304. /*below*/
  305. .below{
  306.     height: 1300px;
  307.     width: 100%;
  308.     background: gainsboro;
  309.     padding-top: 1px;
  310.     /*display: inline-block;*/
  311.     /*float: left;*/
  312.     /*margin-left: 80px;*/
  313. }
  314. /*top7*/
  315. .top7  {
  316.     /*float: left;*/
  317.     /*margin-left: 80px;*/
  318.     /*display: inline-block;*/
  319.     /*width: 100%;*/
  320.     /*margin-top: 19px;*/
  321.     height: 100px;
  322.     /*margin-left: 80px;*/
  323.     /*margin-top:20px;*/
  324.  
  325. }
  326. .top7 p {
  327.     margin-left: 80px;
  328.     margin-top: 20px;
  329.     height: 100px;
  330.     /*float: left;*/
  331. }
  332.  
  333. /*top8*/
  334. /*top8-left*/
  335. .top8-left {
  336.     background: no-repeat url("https://dummyimage.com/234x614/FFA488");
  337.     width: 234px;
  338.     height: 614px;
  339.     margin-left: 80px;
  340.     margin-top: -66px;
  341.     display: inline-block;
  342.  
  343. }
  344. /*top8-right*/
  345. .below>ul{
  346.     width:227.5px;
  347.     height: 300px;
  348.     background: white;
  349.     float: right;
  350.     display: inline-block;
  351.     /*margin-left: 5px;*/
  352.  
  353.     list-style: none;
  354. }
  355. .top8-right-top1{
  356.     margin-right: 791px;
  357.     margin-top: -66px;
  358.  
  359. }
  360.  
  361. .top8-right-top2{
  362.     margin-right: 554px;
  363.     margin-top: -618px;
  364.  
  365. }
  366.  
  367. .top8-right-top3{
  368.     margin-right: 317px;
  369.     margin-top: -618px;
  370.  
  371. }
  372. .top8-right-top4{
  373.     margin-right: 80px;
  374.     margin-top: -618px;
  375.  
  376. }
  377.  
  378. .top8-right-top5{
  379.     margin-right: 80px;
  380.     margin-top: -305px;
  381.  
  382. }
  383.  
  384. .top8-right-top6{
  385.     margin-right: 317px;
  386.     margin-top: -305px;
  387.  
  388. }
  389.  
  390. .top8-right-top7{
  391.     margin-right: 554px;
  392.     margin-top: -305px;
  393.  
  394. }
  395.  
  396. .top8-right-top8{
  397.     margin-right: 791px;
  398.     margin-top: -305px;
  399.  
  400. }
  401.  
  402. .top8-right-top1 div{
  403.     background: no-repeat url("https://dummyimage.com/150x150/FFA488");
  404.     /*width: 150px;*/
  405.     /*height: 150px;*/
  406.     /*margin: 0 auto;*/
  407.     /*如果想用margin居中属性的话，那么元素必须在块级别的标签中，而且顺序不能改，必须是0,auto*/
  408. }
  409.  
  410. .top8-right-top3 div{
  411.     background: no-repeat url("https://dummyimage.com/150x150/FFBB00");}
  412.  
  413. .top8-right-top4 div{
  414.     background: no-repeat url("https://dummyimage.com/150x150/0000AA");}
  415. .top8-right-top5 div{
  416.     background: no-repeat url("https://dummyimage.com/150x150/FFA488");}
  417.  
  418. .top8-right-top6 div{
  419.     background: no-repeat url("https://dummyimage.com/150x150/00DDDD");}
  420.  
  421. .top8-right-top7 div{
  422.     background: no-repeat url("https://dummyimage.com/150x150/FFBB00");}
  423.  
  424. .top8-right-top8 div{
  425.     background: no-repeat url("https://dummyimage.com/150x150/0000AA");}
  426.  
  427. ul>div {
  428.     width: 150px;
  429.     height: 150px;
  430.     margin: 0 auto;
  431.  
  432. }
  433.  
  434. .top8-right-top2 div{
  435.     background: no-repeat url("https://dummyimage.com/150x150/00DDDD");
  436.     /*width: 150px;*/
  437.     /*height: 150px;*/
  438.     /*margin: 0 auto;*/
  439.     /*如果想用margin居中属性的话，那么元素必须在块级别的标签中，而且顺序不能改，必须是0,auto*/
  440. }
  441.  
  442. ul>p {
  443.     text-align: center;
  444.     margin-top: 10px;
  445. }
  446. /*top9*/
  447. .top9   {
  448.     margin-left: 80px;
  449.     margin-top: 20px;
  450. }
  451.  
  452. /*.top10-0 {*/
  453.     /*width: 100%;*/
  454.     /*height:440px;*/
  455.     /*background: yellow;*/
  456. /*}*/
  457.  
  458. .top10>ul{
  459.     display: inline-block;
  460.     height:440px ;
  461.     width: 289px;
  462.     background: snow;
  463.     /*margin-left: 80px;*/
  464.     margin-right: 9px;
  465. }
  466.  
  467. .top10-1{
  468.     /*height:440px ;*/
  469.     /*width: 289px;*/
  470.     /*background: white;*/
  471.     margin-left: 80px;
  472.     float: left;
  473.     display: inline-block;
  474.     /*margin-right: 10px;*/
  475.     /*margin-right: 7px;*/
  476. }
  477. .top10-2{
  478.     display: inline-block;
  479.     /*margin-right: 7px;*/
  480.     float: left;
  481.  
  482. }
  483. .top10-3{
  484.     /*margin-right: 10px;*/
  485.     float: left;
  486.     /*margin-right: 7px;*/
  487. }
  488. .top10-4{
  489.     float: left;
  490. }
  491.  
  492. .top10-1-1 {
  493.     width: 289px;
  494.     height: 220px;
  495.     background: url("https://dummyimage.com/289x220/00DDAA");
  496.     /*margin-left: 80px;*/
  497. }
  498.  
  499. .top10-2-1{
  500.     background: url("https://dummyimage.com/289x220/00DDAA");
  501.     width: 289px;
  502.     height: 220px;
  503. }
  504. .top10-3-1{
  505.     background: url("https://dummyimage.com/289x220/00DDAA");
  506.     width: 289px;
  507.     height: 220px;
  508. }
  509. .top10-4-1{
  510.     background: url("https://dummyimage.com/289x220/00DDAA");
  511.     width: 289px;
  512.     height: 220px;
  513. }
  514. .top10 >div{
  515.     width: 289px;
  516.     height: 220px;
  517.     /*background: url("https://dummyimage.com/289x220/00DDAA");*/
  518.     margin-top: 10px;
  519. }
  520.  
  521. .top10 p{
  522.     text-align: justify;
  523.     margin-left: 30px;
  524.     margin-right: 30px;
  525.     margin-top: 30px;
  526. }
  527. .top10 a:hover{
  528.     /*margin-left: 30px;*/
  529.     /*font-size: small;*/
  530.     color: brown;
  531.     /*text-decoration-line: none;*/
  532. }
  533.  
  534. .top10 a {
  535.         margin-left: 30px;
  536.     font-size: small;
  537.     text-decoration-line: none;      /*新大陆！！！！！！！！！！！！！两种状态，将上一个全打开，这个全关闭*/
  538.     display: block;
  539.  
  540.     margin-top: 10px;
  541. }
  542.  
  543. .top10 span{
  544.     /*display: inline-block;*/
  545.     /*float: left;*/
  546.     /*margin-bottom: 10px;*/
  547.     /*margin-left: 30px;*/
  548. }
  549.  
  550. .top10 span{
  551.     margin-left: 30px;
  552.     margin-top: 10px;
  553.     display: inline-block;
  554.     font-size: large;
  555.     /*text-align: left;*/
  556. }
  557.  
  558. #s2-1,
  559. #s2-2,
  560. #s2-3,
  561. #s2-4{
  562.     margin-left: 5px;
  563.     color: red;
  564. }
  565.  
  566. /*top11*/
  567. .top11{
  568.     /*width:1182px;*/
  569.     width: 100%;
  570.     display: inline-block;
  571.     float: left;
  572.     background: white;
  573.     /*margin-left: 80px;*/
  574.     /*margin-right: 80px;*/
  575.     /*padding-left: 80px;*/
  576.     margin-top: 18px;
  577.     height: 100px;
  578.     line-height: 100px;
  579.     padding-left: 0px;
  580.     padding-right:0px;
  581. }
  582.  
  583. .top11 div{
  584.     /*margin-top: 30px;*/
  585.     float: left;
  586.     margin-left:68px ;
  587.     text-align: center;
  588.     /*line-height: 100px;*/
  589. }
  590. .yuyue {
  591.     text-indent: 80px;
  592. }
  593.  
  594. /*top12*/
  595. .top12{
  596.     clear: both;
  597.     text-align: center;
  598. }
  599. .top12:before{
  600.  
  601. }
  602.  
  603. /**/

css

图片生成器：https://dummyimage.com/

点开其中的图片，在浏览器栏，进行图片大小的修改，图片大小后面是颜色，然后右键下面的图片，点击复制图像地址，即可生成指定大小颜色的文件图片。

marign 0 auto；(居中)只有在block的级别下，才能成功。

python-玉米（小米）商城作业的更多相关文章

  1. python day19 : 购物商城作业，进程与多线程

    目录 python day 19 1. 购物商城作业要求 2. 多进程 2.1 简述多进程 2.2 multiprocessing模块,创建多进程程序 2.3 if name=='main'的说明 2 ...

  2. 2003031121-浦娟-python数据分析五一假期作业

    项目 内容 课程班级博客链接 20级数据班(本) 这个作业要求链接 Python作业 博客名称 2003031121-浦娟-python数据分析五一假期作业 要求 每道题要有题目,代码(使用插入代码, ...

  3. 2003031121-浦娟-python数据分析第四周作业-第二次作业

    项目 内容 课程班级博客链接 20级数据班(本) 作业链接 Python第四周作业第二次作业 博客名称 2003031121-浦娟-python数据分析第四周作业-matolotlib的应用 要求 每 ...

  4. Python课程第二天作业

     一.统计字符串格式 要求: # 1.统计元组中所有数据属于字符串的个数,提示: isinstance() # 数据: t1 = (1, 2, '3', '4', 5, '6') # 结果: 3 代码 ...

  5. python第七天-作业[购物车]

    作业要示: 购物车程序:启动程序后,输入用户名密码后,如果是第一次登录,让用户输入工资,然后打印商品列表允许用户根据商品编号购买商品用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒 可随时退出 ...

  6. 初学者的python学习笔记2——作业篇

    这次的作业是商城展示,最开始的确是一脸懵逼,后来研究了一下网上的例子,总算是搞出来了一个(其实算是网上列子的简化版?). 最开始是想要使用字典去做,发现显示列表的时候怎么也无法实现序号和名称对应,原因 ...

  7. 初学者的python学习笔记1——作业篇

    既然是学习,作业必不可少,其实在看后面讲思路之前还是感觉自己写的不错,但是和后面一对比,感觉实在是想的太片面太肤浅了,还需要太多太多改进的地方. 首先放一下作业要求. 最开始做的时候真的是完全按照字面 ...

  8. 老男孩python自动化运维作业2

    拿到要求真不知道怎么写,不能还要写个商城页面吧: 最后还是用了input()模拟用户操作吧- -!不就操作个字典吗(字典模拟商品数据). python版本: >>>import sy ...

  9. python入门第一天作业。讲师写的代码。

    #!/uer/bin/env python # _*_ coding: utf-8 _*_ import sys retry_limit = 3 retry_count = 0 account_fil ...

随机推荐

  1. Flume的Source

    source学习网址: http://flume.apache.org/FlumeUserGuide.html 一.Avro 类型的Source 监听Avro 端口来接收外部avro客户端的事件流.和 ...

  2. java1.8 新特性（五 如何使用filter，limit ，skip ，distinct map flatmap ，collect 操作 java集合）

    使用filter 根据 条件筛选 出结果:例如 找出 user 中 age >=15 的用户 package lambda.stream; /** * @author 作者:cb * @vers ...

  3. [转][CEF]自动播放视频

    1.CEF 默认不支持 mp4,可以在网上下载热心网友提供的修改版. 查看支持的特性的方法:在 CEF 中访问网页 :http://html5test.com/ 2. 打开网页后视频自动播放: mut ...

  4. 理一下docker在各平台上的运行机制

    理一下docker在各平台上的运行机制 首先,从内核共享与否 docker在linux上共享内核,无需虚拟化,完全支持native功能(https://docs.docker.com/engine/i ...

  5. java Files类和Paths类的用法 (转)

    http://blog.csdn.net/u010889616/article/details/52694061 Java7中文件IO发生了很大的变化,专门引入了很多新的类: import java. ...

  6. Java里数组的三种初始化方式

    静态初始化 除了用new关键字来产生数组以外,还可以直接在定义数组的同时就为数组元素分配空间并赋值. // 静态初始化 int[] iStaticArr = { 5, 2, 0 }; LOLHero[ ...

  7. [UE4]运行模式

    Selected Viewport和Simulate都可以在游戏模式和漫游模式之间切换. Selected Viewport:默认是游戏模式. Simulate:默认是漫游模式. 按Ctrl+F1后, ...

  8. [UE4]虚幻引擎UE4如何制作可拖动（Drag and Drop）的背包（Scrollbox）（转载）

    最终效果 由于隐私保护,不想截实际的效果图,下面给出了示意图,左边是背包A,右边是背包B,将其中的子项目从左侧拖往右侧的背包,然后在插入位置放置. 第一步: 制作一个user widget(在内容浏览 ...

  9. list函数

    列表的切片: 获取: 1. [start:] 2. [:end] 3. [statr:end] 4. [statr: end: spet] 修改: listvar[:2] = ' 把0~1索引元素删除 ...

  10. Delphi XE5中的新增内容

    Delphi XE5中的新增内容 Delphi XE5是所有Delphi开发人员的必须备升级,并且是来自Embarcadero的获奖的.多设备应用开发解决方案的最新版本.使用Delphi XE5的新特 ...