Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿淘宝页面
Blogger Information
Blog 20
fans 0
comment 0
visits 11021
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
仿淘宝页面
喜
Original
331 people have browsed it

1.效果图

2.代码

  1. <body>
  2.     <header>
  3.         <a href="#" class="logo">
  4.             <img src="../淘宝/1.png" alt="">
  5.         </a>
  6.         <a href="#" class="search">
  7.             <span>寻找宝贝店铺</span>
  8.             <span>搜索</span>
  9.         </a>
  10.         <a href="#" class="qdao">
  11.             <img src="./2.png" alt="">
  12.         </a>
  13.     </header>
  15.     <main>
  16. <ul class="navs">
  17. <li>
  18.     <a href="#"><img src="./3.webp" alt="">
  19.         <span>天猫新品</span></a>
  20. </li>
  21. <li>
  22.     <a href="#"><img src="./4.webp" alt="">
  23.         <span>今日新品</span></a>
  24. </li>
  25. <li>
  26.     <a href="#"><img src="./5.webp" alt="">
  27.         <span>天猫国际</span></a>
  28. </li>
  29. <li>
  30.     <a href="#"><img src="./6.webp" alt="">
  31.         <span>飞猪旅行</span></a>
  32. </li>
  33. <li>
  34.     <a href="#"><img src="./7.webp" alt="">
  35.         <span>天猫超市</span></a>
  36. </li>
  37. <li>
  38.     <a href="#"><img src="./8.webp" alt="">
  39.         <span>淘宝吃货</span></a>
  40. </li>
  41. <li>
  42.     <a href="#"><img src="./9.webp" alt="">
  43.         <span>省钱卡</span></a>
  44. </li>
  45. <li>
  46.     <a href="#"><img src="./10.webp" alt="">
  47.         <span>领淘金币</span></a>
  48. </li>
  49. <li>
  50.     <a href="#"><img src="./11.webp" alt="">
  51.         <span>阿里拍卖</span></a>
  52. </li>
  53. <li>
  54.     <a href="#"><img src="./12.webp" alt="">
  55.         <span>分类</span></a>
  56. </li>
  57. </ul>
  59. <ul class="entry">    
  60.     <li>
  61.         <div class="left">
  62.             <a href="#">
  63.                 <h4>聚划算</h4>
  64.                 <img src="./13.webp" alt="">
  65.                 <span>品牌折扣</span>
  66.             </a>
  67.         </div>
  68.         <div class="right">
  69.             <a href="#">
  70.                 <img src="./14.webp" alt="">
  71.             </a>
  72.         </div>
  73.     </li>
  74.     <li>
  75.         <div class="left">
  76.             <a href="#">
  77.                 <h4>天天特卖</h4>
  78.                 <img src="./15.webp" alt="">
  79.                 <span>1元秒杀</span>
  80.             </a>
  81.         </div>
  82.         <div class="right">
  83.             <a href="#">
  84.                 <img src="./16.webp" alt="">
  85.             </a>
  86.         </div>
  87.     </li>
  88.     <li>
  89.         <div class="left">
  90.             <a href="#">
  91.                 <h4>有好货</h4>
  92.                 <img src="./17.webp" alt="">
  93.                 <span style="background-color: rgb(0, 144, 234);">好口碑</span>
  94.             </a>
  95.         </div>
  96.         <div class="right">
  97.             <a href="#">
  98.                 <img src="./18.webp" alt="">
  99.             </a>
  100.         </div>
  101.     </li>
  102.     <li>
  103.         <div class="left">
  104.             <a href="#">
  105.                 <h4>每日好店</h4>
  106.                 <img src="./19.webp" alt="">
  107.                 <span style="background-color: rgb(255, 151, 17);">特色</span>
  108.             </a>
  109.         </div>
  110.         <div class="right">
  111.             <a href="#">
  112.                 <img src="./20.webp" alt="">
  113.             </a>
  114.         </div>
  115.     </li>
  116. </ul> 
  118.     <ul class="items">   
  119.         <li style="height:2.5rem;">
  120.             <a href="#"><img src="./21.webp" alt=""></a>
  121.         </li>
  122.         <li>
  123.             <a href="#"><img src="./22.webp" alt=""></a>
  124.           <div class="bottom">
  125.             <span>韩国拉面锅网红金色煮面泡面锅泡面小食堂韩剧同款进口加厚黄铝锅</span>
  126.             <p><span>￥ 18.9</span>100+人已购买</p>
  127.           </div>
  128.         </li>
  130.         <li>
  131.             <a href="#"><img src="./22.webp" alt=""></a>
  132.           <div class="bottom">
  133.             <span>韩国拉面锅网红金色煮面泡面锅泡面小食堂韩剧同款进口加厚黄铝锅</span>
  134.             <p><span>￥ 18.9</span>100+人已购买</p>
  135.           </div>
  136.         </li>
  139.         <li>
  140.             <a href="#"><img src="./22.webp" alt=""></a>
  141.           <div class="bottom">
  142.             <span>韩国拉面锅网红金色煮面泡面锅泡面小食堂韩剧同款进口加厚黄铝锅</span>
  143.             <p><span>￥ 18.9</span>100+人已购买</p>
  144.           </div>
  145.         </li>
  148.         <li>
  149.             <a href="#"><img src="./22.webp" alt=""></a>
  150.           <div class="bottom">
  151.             <span>韩国拉面锅网红金色煮面泡面锅泡面小食堂韩剧同款进口加厚黄铝锅</span>
  152.             <p><span>￥ 18.9</span>100+人已购买</p>
  153.           </div>
  154.         </li>
  155.     </ul>
  156. </main>
  158.     <footer>
  159.         <a href="#">
  160.             <span class="iconfont icon-shejiaotubiao-44"></span>
  161.         </a>
  162.         <a href="#">
  163.             <span class="iconfont icon-gouwuche"></span>
  164.             <span>购物车</span>
  165.         </a>
  166.         <a href="#">
  167.             <span class="iconfont icon-wodetaobao"></span>
  168.             <span>我的淘宝</span>
  169.         </a>
  170.         <button>打开淘宝</button>
  171.     </footer>
  172. </body>

css

  1.  *{
  2.         margin: 0;
  3.         padding: 0;
  4.         box-sizing: border-box;
  5.     }
  6.     a{
  7.         text-decoration: none;
  8.         color: #666;
  9.     }
  10.     li{
  11.         list-style: none;
  12.     }
  13.     html {
  14. font-size: calc(100vw / 3.75);
  15. }
  16. body {
  17. font-size: 0.14rem;
  18. color: #333;
  19. background-color: #f4f4f4;
  20. padding: 0 0.1rem;
  21. }
  23. body img {
  24. width: 100%;
  25. }
  26. @media (max-width: 320px) {
  27. html {
  28. font-size: 85px;
  29. }
  30. }
  32. @media (min-width: 640px) {
  33. html {
  34. font-size: 170px;
  35. }
  36. }
  37. header,footer{
  38.     position: fixed;
  39.     width: 100vw;
  40.     height: 0.5rem;
  41. }
  42. header{
  43.     top: 0;
  44.     left: 0;
  45.     right: 0;
  46.     display: grid;
  47.     grid-template-columns: 0.55rem 1fr 0.33rem;
  48.     place-items: center;
  49.     gap: 0 0.13rem;
  50.     padding: 0 0.1rem;
  51.     background-color: #f4f4f4;
  52.     z-index: 1;
  53. }
  54. header .search{
  55.     display: flex;
  56.     place-content: space-between;
  57.     width: 100%;
  58.     height: 0.35rem;
  59.     padding-left: 0.1rem;
  60.     border: 0.015rem solid #ff5000;
  61.     border-radius: 0.5rem;
  62.     background-color: #fff;
  63.     line-height: 0.3rem;
  64. }
  65. header .search span:last-of-type{
  66.     width: 0.64rem;
  67.     height: 0.32rem;
  68.     border: 0.01rem solid #fff;
  69.     text-align: center;
  71.     color: #fff;
  72.     border-radius: 0.16rem;
  73.     background: linear-gradient(to right, #FF8D0E, #FF5000);
  74. }
  75. footer{
  76.     display: flex;
  77.     place-content: space-around;
  78.     background-color: #ffffff;
  79.     bottom: 0;
  80.     left: 0;
  81.     right: 0;
  82. }
  83. footer a{
  84.   display: grid;
  85.   place-items: center;
  86. }
  87. footer span{
  88.     font-size: 0.13rem;
  89. }
  90. footer a:first-of-type span{
  91. font-size: 0.38rem;
  92. color: #FF6D2A;
  94. }
  95. footer a:nth-of-type(n+2) .iconfont{
  96.     font-size: 0.22rem;
  97. }
  98. footer>button{
  99.     position: absolute;
  100.     width: 1.16rem;
  101.     font-size: 0.14rem;
  102.     box-shadow: rgb(18 18 18 / 25%) 0px 2px 5px;
  103.     background-color: rgb(255, 80, 0);
  104.     color: rgb(255, 255, 255);
  105.     border-radius: 0.18rem;
  106.     line-height: 0.36rem;
  107.     font-weight: bold;
  108.     left: 50%;
  109.     bottom: 0.6rem;
  110.     font-family: Helvetica, sans-serif;
  111.     transform: translate(-50%);
  112.     border: none;
  113. }
  115. main{
  116. position: relative;
  117. top: 0.6rem;
  118. }
  119. main .navs{
  120.     display: grid;
  121.     grid-template-columns: repeat(5,1fr);
  122.     gap: 0 0.1rem;
  123.     background: #FFFFFF;
  124.     border-radius: 0.12rem;
  125.     background-color: #FFFFFF;
  126.     padding: 0 0.03rem;
  127.     padding-bottom: 0.1rem;
  128.     text-align: center;
  129.     font-size: 0.13rem;
  130. }
  131. main .entry{
  132.     display: grid;
  133.     grid-template-columns: repeat(2,1fr);
  134.     margin-top: 0.1rem;
  135.     border-radius: 0.12rem;
  136.     background-color: #fff;
  137. }
  138. main .entry>li{
  139.     display: grid;
  140.     grid-template-columns: repeat(2,1fr);
  141.     place-items: center;
  142.     padding-top: 0.05rem;
  143. }
  144. main .entry>li .left{
  145.     position: relative;
  146. }
  147. main .entry>li .left span{
  148.     position: absolute;
  149.     top: 4%;
  150.     left: 70%;
  151.     color: rgb(255, 255, 255);
  152.     font-size: 0.11rem;
  153.     background-color: rgb(255, 66, 0);
  154.     border-radius: 0.02rem;
  155.     padding: 0 0.03rem;
  156.     margin-left: 0.03rem;
  157.     line-height: 0.14rem;
  158.     height: 0.14rem;
  159.     white-space: nowrap;
  160. }
  161. main .entry>li:nth-of-type(2) span,
  162. main .entry>li:nth-of-type(4) span{
  163.     left: 96%;
  164. }
  165. main .entry>li .left img{
  166.     width: 0.63rem;
  167.     height:  0.63rem;
  168. }
  169. main .entry>li .right img{
  170.     width:  0.8rem;
  171.     height:  0.8rem;
  172. }
  173. main .entry>li h4{
  174.     font-size: 0.15rem;
  175.     color: #111;
  176. }
  177. main .entry>li:nth-of-type(1),main .entry>li:nth-of-type(3){
  178.  border-right: 1px solid #eeeded;
  179. }
  180. main .entry>li:nth-of-type(3),main .entry>li:nth-of-type(4){
  181.  border-top: 1px solid #eeeded;
  182. }
  183. main .items{
  184.     display: grid;
  185.     grid-template-columns: repeat(2,1fr);
  186.     grid-template-rows: 2.6rem;
  187. gap: 0.1rem;
  188. margin-top: 0.1rem;
  189. padding-bottom: 0.6rem;
  190. }
  191. main .items li{
  192.     border-radius: 0.06rem;
  193.     background-color: #fff;
  194. }
  195. main .items li img{
  196.     border-radius: 0.06rem;
  197. }
  198. main .items .bottom {
  199.     padding-left: 0.1rem;
  200.     padding-right: 0.09rem;
  201.     margin-top: 0.12rem;
  202. }
  203. main .items .bottom p{
  204.     display: flex;
  205.     margin: 0.11rem 0;
  206.     align-items: center;
  207.     font-size: 0.12rem;
  208.     color: #999;
  209. }
  210. main .items .bottom p span{
  211.     color: #ff5500;
  212.     font-size: 0.14rem;
  213.     padding-right: 0.05rem;
  214. }
  215. main .items span{
  216.  font-size: 0.13rem;
  217.  overflow: hidden;
  218.  text-overflow: ellipsis;
  219.  display: -webkit-box;
  220.  -webkit-line-clamp: 2;
  221.  -webkit-box-orient: vertical;
  222. }
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