Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 模仿淘宝网
Blogger Information
Blog 16
fans 0
comment 1
visits 5802
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
模仿淘宝网
P粉890456325
Original
347 people have browsed it

模仿淘宝网

效果图

HTML文件

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="initial-scale=1.0">
  7.     <!-- <link rel="stylesheet" href="css/reset.css"> -->
  8.     <!-- <link rel="stylesheet" href="font_icon/iconfont.css"> -->
  9.     <link rel="stylesheet" href="css/header.css">
  10.     <!-- <link rel="stylesheet" href="css/footer.css"> -->
  11.     <title>Document</title>
  12. </head>
  13. <body>
  14.     <!-- 页眉 -->
  15.     <header>
  16.         <!-- logo -->
  17.         <a class="logo" href="https://main.m.taobao.com/">
  18.             <img src="images/taobao.png" alt="">
  19.         </a>
  20.         <!-- 搜索框 -->
  21.         <a href="https://main.m.taobao.com/search/index.html?spm=a215s.7406091.topbar.1.560c6770t1leU1" class="search">
  22.             <span>寻找宝贝店铺</span>
  23.             <span>搜索</span>
  24.         </a>
  25.         <!-- 签到图标 -->
  26.         <a href="" class="iconfont icon-qiandao-xuanzhong"></a>
  27.     </header>
  28.     <main>
  29.         <!-- 顶部导航 -->
  30.         <ul class="navs">
  31.             <li class="item">
  32.                 <a href=""><img src="images/navs/tmxb.webp" alt=""></a>
  33.                 <a href="">天猫新品</a>
  34.             </li>
  35.             <li class="item">
  36.                 <a href=""><img src="images/navs/jrbk.webp" alt="" /></a>
  37.                 <a href="">今日爆款</a>
  38.               </li>
  39.               <li class="item">
  40.                 <a href=""><img src="images/navs/tmgj.webp" alt="" /></a>
  41.                 <a href="">天猫国际</a>
  42.               </li>
  43.               <li class="item">
  44.                 <a href=""><img src="images/navs/fzlx.webp" alt="" /></a>
  45.                 <a href="">飞猪旅行</a>
  46.               </li>
  47.               <li class="item">
  48.                 <a href=""><img src="images/navs/tmcx.webp" alt="" /></a>
  49.                 <a href="">天猫超市</a>
  50.               </li>
  51.               <li class="item">
  52.                 <a href=""><img src="images/navs/tbch.webp" alt="" /></a>
  53.                 <a href="">淘宝吃货</a>
  54.               </li>
  55.               <li class="item">
  56.                 <a href=""><img src="images/navs/sqk.webp" alt="" /></a>
  57.                 <a href="">省钱卡</a>
  58.               </li>
  59.               <li class="item">
  60.                 <a href=""><img src="images/navs/ltjb.webp" alt="" /></a>
  61.                 <a href="">领淘金币</a>
  62.               </li>
  63.               <li class="item">
  64.                 <a href=""><img src="images/navs/alpm.webp" alt="" /></a>
  65.                 <a href="">阿里拍卖</a>
  66.               </li>
  67.               <li class="item">
  68.                 <a href=""><img src="images/navs/fl.webp" alt="" /></a>
  69.                 <a href="">分类</a>
  70.               </li>
  71.         </ul>
  72.         <!-- 快速入口 -->
  73.         <ul class="entry">
  74.             <li class="item">
  75.                 <div class="title">
  76.                     <h3>聚划算</h3>
  77.                     <span>礼遇记</span>
  78.                 </div>
  79.                 <a href=""><img src="images/items/item-1.webp" alt=""></a>
  80.                 <a href=""><img src="images/items/item-2.webp" alt=""></a>
  81.             </li>
  82.             <li class="item">
  83.                 <div class="title">
  84.                   <h3>天天特卖</h3>
  85.                   <span>1元秒杀</span>
  86.                 </div>
  87.                 <a href=""><img src="images/items/item-3.webp" alt="" /></a>
  88.                 <a href=""><img src="images/items/item-4.webp" alt="" /></a>
  89.               </li>
  90.               <li class="item">
  91.                 <div class="title">
  92.                   <h3>有好货</h3>
  93.                   <span style="background-color: deepskyblue">好口碑</span>
  94.                 </div>
  95.                 <a href=""><img src="images/items/item-5.webp" alt="" /></a>
  96.                 <a href=""><img src="images/items/item-6.webp" alt="" /></a>
  97.               </li>
  98.               <li class="item">
  99.                 <div class="title">
  100.                   <h3>每日好店</h3>
  101.                   <span style="background-color: orange">特色</span>
  102.                 </div>
  103.                 <a href=""><img src="images/items/item-7.webp" alt="" /></a>
  104.                 <a href=""><img src="images/items/item-8.webp" alt="" /></a>
  105.               </li>
  106.         </ul>
  107.         <!-- 商品列表 -->
  108.         <ul class="list">
  109.             <li class="item">
  110.                 <a href=""><img src="images/items/item-9.webp" alt=""></a>
  111.                 <div class="desc">
  112.                     <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  113.                     <div class="price">
  114.                         <span class="iconfont icon-renminbi_o">69</span>
  115.                         <span>200+人已购买</span>
  116.                 </div>
  117.                 </div>
  118.             </li>
  119.             <li class="item">
  120.                 <a href=""><img src="images/items/item-10.webp" alt="" /></a>
  121.                 <div class="desc">
  122.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  123.                   <div class="price">
  124.                     <span class="iconfont icon-renminbi_o">288</span>
  125.                     <span>123人已购买</span>
  126.                   </div>
  127.                 </div>
  128.               </li>
  129.               <li class="item">
  130.                 <a href=""><img src="images/items/item-11.webp" alt="" /></a>
  131.                 <div class="desc">
  132.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  133.                   <div class="price">
  134.                     <span class="iconfont icon-renminbi_o">288</span>
  135.                     <span>123人已购买</span>
  136.                   </div>
  137.                 </div>
  138.               </li>
  139.               <li class="item">
  140.                 <a href=""><img src="images/items/item-12.webp" alt="" /></a>
  141.                 <div class="desc">
  142.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  143.                   <div class="price">
  144.                     <span class="iconfont icon-renminbi_o">288</span>
  145.                     <span>123人已购买</span>
  146.                   </div>
  147.                 </div>
  148.               </li>
  150.               <li class="item">
  151.                 <a href=""><img src="images/items/item-13.webp" alt="" /></a>
  152.                 <div class="desc">
  153.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  154.                   <div class="price">
  155.                     <span class="iconfont icon-renminbi_o">288</span>
  156.                     <span>123人已购买</span>
  157.                   </div>
  158.                 </div>
  159.               </li>
  160.               <li class="item">
  161.                 <a href=""><img src="images/items/item-14.webp" alt="" /></a>
  162.                 <div class="desc">
  163.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  164.                   <div class="price">
  165.                     <span class="iconfont icon-renminbi_o">288</span>
  166.                     <span>123人已购买</span>
  167.                   </div>
  168.                 </div>
  169.               </li>
  171.               <li class="item">
  172.                 <a href=""><img src="images/items/item-15.webp" alt="" /></a>
  173.                 <div class="desc">
  174.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  175.                   <div class="price">
  176.                     <span class="iconfont icon-renminbi_o">288</span>
  177.                     <span>123人已购买</span>
  178.                   </div>
  179.                 </div>
  180.               </li>
  181.               <li class="item">
  182.                 <a href=""><img src="images/items/item-16.webp" alt="" /></a>
  183.                 <div class="desc">
  184.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  185.                   <div class="price">
  186.                     <span class="iconfont icon-renminbi_o">288</span>
  187.                     <span>123人已购买</span>
  188.                   </div>
  189.                 </div>
  190.               </li>
  192.               <li class="item">
  193.                 <a href=""><img src="images/items/item-17.webp" alt="" /></a>
  194.                 <div class="desc">
  195.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  196.                   <div class="price">
  197.                     <span class="iconfont icon-renminbi_o">288</span>
  198.                     <span>123人已购买</span>
  199.                   </div>
  200.                 </div>
  201.               </li>
  202.               <li class="item">
  203.                 <a href=""><img src="images/items/item-18.webp" alt="" /></a>
  204.                 <div class="desc">
  205.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  206.                   <div class="price">
  207.                     <span class="iconfont icon-renminbi_o">288</span>
  208.                     <span>123人已购买</span>
  209.                   </div>
  210.                 </div>
  211.               </li>
  213.               <li class="item">
  214.                 <a href=""><img src="images/items/item-19.webp" alt="" /></a>
  215.                 <div class="desc">
  216.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  217.                   <div class="price">
  218.                     <span class="iconfont icon-renminbi_o">288</span>
  219.                     <span>123人已购买</span>
  220.                   </div>
  221.                 </div>
  222.               </li>
  223.               <li class="item">
  224.                 <a href=""><img src="images/items/item-20.webp" alt="" /></a>
  225.                 <div class="desc">
  226.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  227.                   <div class="price">
  228.                     <span class="iconfont icon-renminbi_o">288</span>
  229.                     <span>123人已购买</span>
  230.                   </div>
  231.                 </div>
  232.               </li>
  234.               <li class="item">
  235.                 <a href=""><img src="images/items/item-21.webp" alt="" /></a>
  236.                 <div class="desc">
  237.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  238.                   <div class="price">
  239.                     <span class="iconfont icon-renminbi_o">288</span>
  240.                     <span>123人已购买</span>
  241.                   </div>
  242.                 </div>
  243.               </li>
  244.               <li class="item">
  245.                 <a href=""><img src="images/items/item-22.webp" alt="" /></a>
  246.                 <div class="desc">
  247.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  248.                   <div class="price">
  249.                     <span class="iconfont icon-renminbi_o">288</span>
  250.                     <span>123人已购买</span>
  251.                   </div>
  252.                 </div>
  253.               </li>
  254.         </ul>
  255.     </main>
  256.     <footer>
  257.             <a href="" class="iconfont icon-taobao"></a>
  258.             <a href="">
  259.                 <span class="iconfont icon-gouwuche"></span>
  260.                 <span>购物车</span>
  261.             </a>
  262.             <a href="">
  263.                 <span class="iconfont icon-wode"></span>
  264.                 <span>我的淘宝</span>
  265.             </a>
  266.     </footer>
  267. </body>
  268. </html>

css样式文件

  1. @import url('reset.css');
  2. @import url('../font_icon/iconfont.css');
  3. /* 页眉样式 */
  4. header{
  5.     top: 0;
  6.     left: 0;
  7.     right: 0;
  8.     display: grid;
  9.     /* 一行三列 58px宽度 一等分 33px宽度 */
  10.     grid-template-columns: 0.58rem 1fr 0.33rem;
  11.     /* 行高 */
  12.     grid-auto-rows: 0.5rem;
  13.     /* 水平垂直居中 */
  14.     place-items: center;
  15.     /* 间隙 */
  16.     gap: 0.1rem;
  17.     background-color: #f4f4f4;
  18. }
  19. header a.logo{
  20.     padding-left: 0.1rem;
  21. }
  22. header > a.search{
  23.     width: 100%;
  24.     border: 1px solid #ff5000;
  25.     height: 0.35rem;
  26.     /* 椭圆形 */
  27.     border-radius: 0.3rem;
  28.     display: flex;
  29.     /* flex布局 两端对齐 */
  30.     place-content: space-between;
  31.     place-items: center;
  32. }
  33. /* 搜索框中的第一个文本 */
  34. header > a.search > span:first-child{
  35.     padding-left: 0.1rem;
  36. }
  37. /* 搜索框中的最后一个文本 */
  38. header > a.search > span:last-child{
  39.     padding: 0.06rem 0.2rem;
  40.     /* 渐变背景 */
  41.     background: linear-gradient(to left, #ff5000, #ffc000);
  42.     color: #fff;
  43.     border-radius: 0.3rem;
  44.     margin-right: 0.01rem;
  45. }
  46. /* 签到图标 */
  47. header > a.iconfont{
  48.     color: #ff5000;
  49.     font-size: 0.24rem;
  50. }
  53. header,footer{
  54.     height: 50px;
  55.     /* 页眉页脚固定定位 */
  56.     position: fixed;
  57.     z-index: 999;
  58. }
  62. /* 页脚样式 */
  63. footer{
  64.     bottom: 0;
  65.     left: 0;
  66.     right: 0;
  67. }
  68. footer{
  69.     border-top: 1px solid #ccc;
  70.     background-color: #fff;
  71.     display: grid;
  72.     grid-template-columns: repeat(3,1fr);
  73.     place-content: space-around;
  74.     font-size: xx-small;
  75. }
  76. footer > a{
  77.     display: grid;
  78.     place-items: center;
  79. }
  80. footer > a:first-child{
  81.     color: #ff5000;
  82.     font-size: 0.35rem;
  83. }
  84. footer a:first-child + a > span.iconfont{
  85.     font-size: x-large;
  86. }
  89. /* 主体样式 */
  90. main{
  91.     min-height: 2000px;
  92.     /* 相对定位把整个主体乡下偏移50px */
  93.     position: relative;
  94.     top: 50px;
  95.     /* 最底部的内容全部显示 */
  96.     margin-bottom: 100px;
  97.     /* 溢出隐藏 */
  98.     overflow: hidden;
  99. }
  100. /* 顶部导航 */
  101. main .navs{
  102.     display: grid;
  103.     grid-template-columns: repeat(5,1fr);
  104.     gap: 0 0.1rem;
  105.     padding: 0 0.15rem 0.1rem;
  106.     background-color: #fff;
  107.     border: 1px solid #fff;
  108.     border-radius: 0.2rem;
  110. }
  111. main .navs .item{
  112.     display: grid;
  113.     place-items: center;
  114. }
  115. /* 快速入口 */
  116. main > .entry{
  117.     margin-top: 0.1rem;
  118.     display: grid;
  119.     grid-template-columns: repeat(2,1fr);
  120.     padding: 0.1rem;
  121.     background-color: #fff;
  122.     border-radius: 0.15rem;
  123. }
  124. main > .entry .item{
  125.     display: grid;
  126.     grid-template-columns: repeat(2,1fr);
  127.     padding: 0.1rem;
  128.     border-right: 1px solid #dedede;
  130. }
  131. main > .entry .item .title{
  132.     grid-column: span 2;
  133.     display: flex;
  134.     place-items: center;
  135. }
  136. main > .entry .item:nth-child(-n + 2){
  137.     border-bottom: 1px solid #dedede;
  139. }
  140. main > .entry .item:nth-child(even){
  141.     border-right: none;
  142. }
  143. main > .entry .item:first-child{
  144.     background: linear-gradient(to right bottom, rgb(254, 230, 215), #fff 90px);
  145. }
  146. main > .entry .item .title > span{
  147.     background-color: #ff5000;
  148.     color:#fff;
  149. }
  150. main > .entry .item:nth-child(2){
  151.     background: linear-gradient(to left bottom, rgb(255, 230, 234), #fff 90px);
  152. }
  155. /* 商品列表 */
  156. main > .list{
  157.     margin-top: 0.1rem;
  158.    display: grid;
  159.    grid-template-columns: repeat(2,1fr);
  160.    gap: 0.1rem
  161. }
  162. main > .list .item{
  163.     background-color: #fff;
  164.     border-radius: 0.15rem;
  165. }
  166. main > .list .item img{
  167.     border-radius: 0.15rem 0.15rem 0 0;
  168. }
  169. main > .list .item .price .iconfont{
  170.     color: #ff5000;
  171. }
  172. main > .list .item .price span:last-child{
  173.     color: #bbb;
  174.     font-size: x-small;
  175. }
  176. main > .list .item .desc{
  177.     padding: 0.15rem;
  178. }
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