模仿淘宝网

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
模仿淘宝网效果图

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. }
【本文转自：海外高防服务器 http://www.558idc.com/krgf.html 欢迎留下您的宝贵建议】
更多阅读