search

博客列表 >仿淘宝页面

仿淘宝页面

喜
喜原创
2022年07月19日 16:26:23335浏览

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. }
上一条：移动端布局原理下一条：社区拼团小程序的优势
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多