Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1028 淘宝首页
Blogger Information
Blog 19
fans 0
comment 1
visits 7425
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1028 淘宝首页
移动用户-4050479
Original
411 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="css.css">
  8.     <title>Document</title>
  9. </head>
  10. <body>
  11.     <div class="top">
  12.         <div>
  13.             <ul>
  14.                 <li>中国大陆</li>
  15.                 <li>亲,请登录</li>
  16.                 <li>免费注册</li>
  17.                 <li>手机逛淘宝</li>
  18.                 <li>网页无障碍</li>
  19.             </ul>
  21.             <ul>
  22.                 <li>我的淘宝</li>
  23.                 <li>购物车</li>
  24.                 <li>收藏夹</li>
  25.                 <li>商品分类</li>
  26.                 <li>免费开店</li>
  27.                 <li>卖家中心</li>
  28.                 <li>联系客服</li>
  29.             </ul>
  30.         </div>
  31.     </div>
  33.     <div class="top-center">
  34.         <div>
  35.             <div><img src="img/logo.png" alt="" srcset=""></div>
  36.             <div class="top-center-div"><img src="img/1.png" alt="" srcset=""></div>
  37.             <div class="top-center-div"><img src="img/2.png" alt="" srcset=""></div>
  38.             <div class="top-center-div"><img src="img/3.png" alt="" srcset=""></div>
  39.             <div class="top-center-div"><img src="img/4.png" alt="" srcset=""></div>
  40.             <div class="top-center-div"><img src="img/5.png" alt="" srcset=""></div>
  42.         </div>
  43.     </div>
  45.     <div class="main">
  47.         <div class="main-main">
  48.             <div class="main-top"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png" alt="" srcset=""></div>
  49.             <div>
  50.                 <select name="" id="">
  51.                     <option value="1">宝贝</option>
  52.                     <option value="t">天猫</option>
  53.                 </select>
  54.                 <input type="text" name="12" id="" placeholder="马航MH370">
  55.                 <input type="button" value="搜索" >
  56.                 <p>新款连衣裙 四件套 潮流T恤 时尚女鞋 短裤 半身裙 男士外套 墙纸 行车记录仪 新款男鞋</p>
  57.             </div>
  58.             <div class="xiazai">
  59.                 <ul>
  60.                     <li>下载淘宝</li>
  61.                     <li><img src="img/xiazai.png" alt="" srcset=""></li>
  62.                 </ul>
  63.             </div>
  64.         </div>
  65.         <div class="center">
  66.             <div class="center-left">
  67.                 <ul>
  68.                     <li>分类</li>
  69.                     <li> 女装/内衣/ 奢品</li>
  70.                     <li> 女鞋/男鞋/ 箱包</li>
  71.                     <li> 美妆/饰品/ 洗护</li>
  72.                     <li> 男装/运动/ 百货</li>
  73.                     <li> 手机/数码/ 企业礼品</li>
  74.                     <li> 家装/电器/ 车品</li>
  75.                     <li> 食品/生鲜/ 母婴</li>
  76.                     <li> 医药/保健/ 进口</li>
  77.                 </ul>
  78.             </div>
  79.             <div class="center-center-top">
  80.                 <p><a href="">天猫</a> <span>|</span><a href="">聚划算</a> <span>|</span><a href="">天猫超市</a><span>|</span>司法拍卖<span>|</span>飞猪旅行<span>|</span>天天特卖<span>|</span>极有家<span>|</span>淘宝直播</p>
  81.             </div>
  82.             <div class="center-center-center">
  83.                 <img src="https://img.alicdn.com/imgextra/i2/6000000003880/O1CN01VgkkC51eX5WOikWtx_!!6000000003880-0-octopus.jpg" alt="" srcset="">
  84.             </div>
  85.             <div class="center-center-right">
  86.                 <div class="div">
  87.                     <img src="https://wwc.alicdn.com/avatar/getAvatar.do?userNick=&width=60&height=60&type=sns&_input_charset=UTF-8" alt="" srcset="">
  88.                     <p>Hi 你好！</p>
  89.                 </div>
  90.                 <div >
  91.                     <ul class="nav">
  92.                         <li>登录</li>
  93.                         <li>注册</li>
  94.                         <li>开店</li>
  95.                     </ul>
  96.                 </div>
  97.                 <div class="bott">
  98.                     <div><img src="img/001.png" alt="" srcset=""></div>
  99.                     <div><img src="img/001.png" alt="" srcset=""></div>
  100.                     <div><img src="img/001.png" alt="" srcset=""></div>
  101.                     <div><img src="img/001.png" alt="" srcset=""></div>
  102.                     <div>宝贝收藏</div>
  103.                     <div>买过的店</div>
  104.                     <div>收藏的店</div>
  105.                     <div>我的足迹</div>
  106.                 </div>
  107.             </div>
  108.         </div>
  109.     </div>
  110. </body>
  111. </html>
  2. *{
  3.     padding: 0;
  4.     margin: 0;
  5. }
  6. body{
  7.     background-color: rgba(155, 155, 232,0.2);
  8.     display: flex;
  9.     flex-wrap: wrap;
  10.     justify-content: center;
  11. }
  12. .top {
  13.     display: flex;
  14.     background-color: gainsboro;
  15.     width: 100%;
  16.     height: 2.1875rem;
  17.     font-size: 0.75rem;
  18.     justify-content: center;
  20. }
  21. .top div {
  22.     width: 90%;
  23.     display: flex;
  24.     position: relative;
  25. }
  26. .top div ul {
  27.     padding-top: 0.625rem;
  28.     list-style: none;
  29.     display: flex;
  30.     font-weight: 300;
  32. }
  33. .top div ul li{
  34.     padding: 0px 0.3125rem 0px 0.3125rem;
  35. }
  36. .top div ul:nth-of-type(1) li:nth-of-type(1){
  37.     font-weight: 500;
  38. }
  40. .top div ul:nth-of-type(1) li:nth-of-type(2){
  41.     color: red;
  42. }
  44. .top div ul:nth-of-type(2){
  45.     position:absolute;
  46.     right: 0;
  47. }
  51. .top-center {
  52.     background-color: pink;
  53.     width: 100%;
  54.     display: flex;
  55.     justify-content: center;
  56. }
  57. .top-center div {
  58.     display: flex;
  59.     width: 80%;
  60. }
  61. .top-center div div{
  62.     margin: 15px 15px 15px 0px ;
  64. }
  65. .top-center div div:nth-last-of-type(1){
  66.     margin: 15px 0px 15px 0px ;
  68. }
  69. .top-center div div:nth-of-type(1) {
  70.     width: 5.6875rem;
  71. }
  72. .top-center div div:nth-of-type(1) img {
  73.     height: 5rem;
  74. }
  75. .top-center div div:nth-of-type( n + 2 ) img {
  76.     height: 76.5px;
  77. }
  80. .main {
  81.     background-color: white;
  82.     width: 80%;
  83.     height: auto;
  86. }
  87. .main-main {
  88.     display: grid;
  89.     grid-template-rows: repeat(1, 100%);
  90.     grid-template-columns: 15% 70% 15% ;
  91.     padding-top: 1.875rem;
  92.     place-items: center;
  93.     background-color: white;
  94. }
  96. .main-top {
  97.     background-image: url('https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png');
  98.     height: 60px;
  99.     background-repeat: no-repeat;
  101. }
  102. .main-top+div {
  103.     position: relative;
  104.     border: 2px solid red;
  105.     border-radius: 20px;
  106.     box-shadow: inset 0px 0px 3px yellow;
  107.     height: 2.625rem;
  108.     width: 46.125rem;
  109. }
  110. .main-main div input[name="12"] {
  111.     border: none;
  112.     background: none;
  114.     height: 2.625rem;
  115.     width: 36.125rem;
  118. }
  119. .main-main div input:focus {
  120.     outline: none;
  121. }
  122. .main-main div input:nth-last-of-type(1){
  123.     background-image: linear-gradient(145deg,#ff9000,#ff5000 77%);
  124.     border: none;
  125.     width: 5rem;
  126.     height: 2.5rem;
  127.     border-radius: 2.5rem;
  128.     position:absolute;
  129.     right: 0px;
  130.     top: 1px;
  131. }
  132. select {
  133.     border: none;
  134. }
  135. select:focus {
  136.     outline: none;
  137. }
  141. .xiazai {
  142.     border: 1px solid gainsboro;
  143.     padding: 5px;
  144. }
  146. .xiazai ul {
  147.     list-style: none;
  148.     text-align: center;
  149.     font-size: 13px;
  150.     font-weight: 400;
  151.     color: red;
  152. }
  153. .xiazai ul li img {
  154.     width: 65px;
  155. }
  157. .main-main div:nth-last-of-type(2) p{
  158.     font-size: 13px;
  159.     font-weight: 300;
  160.     /* text-align: center; */
  161.     margin-left: 1.875rem;
  165. }
  168. .center {
  169.     display: grid;
  170.     grid-template-columns: 25% 50% 25%;
  171.     padding-top: 2.5rem;
  172.     grid-auto-flow: column;
  173.     grid-template-rows: repeat(2 , auto);
  176. }
  177. .center-left {
  178.     background-color: rgb(231, 231, 233);
  179.     border-radius: 10px;
  180.     margin-left: 1rem;
  181.     grid-area: 1 / 1 / span 2 / span 1 ;
  182.     height: 25rem;
  183. }
  184. .center-left ul {
  185.     list-style: none;
  186.     padding-left: 2rem;
  187.     line-height: 2.5rem;
  188.     padding-bottom: 2rem;
  190. }
  191. .center-left ul li:nth-of-type(1){
  192.     font-size: 18px;
  193.     font-weight: 600;
  194.     padding-bottom: 1rem;
  195. }
  198. .center-center-top {
  199.     background-color: rgb(231, 231, 233);
  200.     border-radius: 10px;
  201.     grid-area: 1 / 2 / span 1 / span 2 ;
  202.     margin-left: 1rem;
  203.     margin-right: 2rem;
  204. }
  205. .center-center-top p {
  206.     text-align: center;
  207.     font-size: 1.125rem;
  208.     padding: 0.5rem 0rem 0.5rem 0rem;
  210. }
  211. .center-center-top p span {
  212.     font-size: 1rem;
  213.     padding: 0px 1rem 0px 1rem;
  214. }
  215. .center-center-top p a:nth-of-type( -n + 2 ) {
  216.     color: red;
  218. }
  219. .center-center-top p a:nth-of-type( 3 ) {
  220.     color: green
  221. }
  222. a {
  223.     text-decoration: none;
  224. }
  225. .center-center-center img{
  226.     width: 95%;
  227.     border-radius: 10px;
  228.     margin-left: 1rem;
  229.     margin-top: 1rem;
  230. }
  231. .center-center-right {
  232.     position: relative;
  233.     display: grid;
  235. }
  236. .center-center-right .div img {
  237.     position: absolute;
  238.     border-radius: 50px;
  239.     left: 35%;
  240.     top: 2rem;
  241. }
  242. .center-center-right p {
  243.     position: absolute;
  244.     border-radius: 50px;
  245.     left: 35%;
  246.     top: 7rem;
  247. }
  248. ul{
  249.     list-style: none;
  250. }
  251. .nav {
  252.     display: flex;
  253.     margin-left: 1.1rem;
  254.     margin-top: 5rem;
  255. }
  256. .nav li {
  257.     border-radius: 30px;
  258.     padding: 0.7rem 1.3rem;
  259.     background-color: #ff5000;
  260.     color: white;
  261.     margin-right: 0.5rem;
  262.     font-size: 1.125rem;
  263. }
  264. .nav li:nth-last-of-type(1){
  266.     border-radius: 30px;
  267.     border: 1px solid red;
  268.     padding: 0.7rem 1.3rem;
  269. /*     background-color: #ff5000; */
  270.     color: red;
  271.     background-color: white;
  272.     margin-right: 0.5rem;
  273.     font-size: 1.125rem;
  275. }
  277. .bott {
  278.     display: grid;
  279.     grid-template-columns: repeat(4 , 1fr);
  280.     grid-template-rows: repeat(2 , auto);
  281.     place-content: center center;
  282. }
  283. .bott div{
  284.     font-size: 0.875rem;
  285.     text-align: center;
  286. }

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：效果实现的不错，继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post