Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 仿smzdm移动端首页
Blogger Information
Blog 20
fans 0
comment 1
visits 13235
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
仿smzdm移动端首页
zg的php学习
Original
492 people have browsed it

仿smzdm移动端首页

这个是个人练习flex与grid布局的习作。

HTML代码

  1. <body>
  2.     <div class="home">
  3.       <!-- 页面顶部 -->
  4.       <div class="header">
  5.         <div class="logo">
  6.           <img src="img/header_logo.png" alt="" />
  7.         </div>
  8.         <div class="search">
  9.           <form action="">
  10.             <span class="iconfont icon-sousuo"></span>
  11.             <input type="text" placeholder="搜索分类/品牌/商品" />
  12.           </form>
  13.         </div>
  14.         <div class="login">
  15.           <a href="">登录</a>
  16.         </div>
  17.       </div>
  19.       <div class="main">
  20.         <!-- 轮播图区 -->
  21.         <div class="sub-banner">
  22.           <div class="link-text">
  23.             <h1>真实的消费内容社区</h1>
  24.             <h2>用户好价爆料 专业达人评测 共建商品百科</h2>
  25.           </div>
  26.           <div class="info-banner-swiper">
  27.             <img src="img/spbk.png" alt="" />
  28.           </div>
  29.         </div>
  30.         <!-- 导航菜单 -->
  31.         <div class="icon-list">
  32.           <a href="" class="icon-box">
  33.             <img src="img/hj.png" alt="" class="icon-desc" />
  34.             <div class="txt">好价</div>
  35.           </a>
  36.           <a href="" class="icon-box">
  37.             <img src="img/sq.png" alt="" class="icon-desc" />
  38.             <div class="txt">社区</div>
  39.           </a>
  40.           <a href="" class="icon-box">
  41.             <img src="img/ht.png" alt="" class="icon-desc" />
  42.             <div class="txt">海淘</div>
  43.           </a>
  44.           <a href="" class="icon-box">
  45.             <img src="img/lysy.png" alt="" class="icon-desc" />
  46.             <div class="txt">0元试用</div>
  47.           </a>
  48.           <a href="" class="icon-box">
  49.             <img src="img/yhj.png" alt="" class="icon-desc" />
  50.             <div class="txt">优惠券</div>
  51.           </a>
  52.           <a href="" class="icon-box">
  53.             <img src="img/ppdh.png" alt="" class="icon-desc" />
  54.             <div class="txt">品牌导航</div>
  55.           </a>
  56.         </div>
  57.         <!-- 商品列表 -->
  58.         <div class="feed-content">
  59.           <ul class="list">
  60.             <li>
  61.               <a href="" class="list-item">
  62.                 <div class="list-img">
  63.                   <img src="img/sp/sp1.png" alt="" />
  64.                   <div class="list-order">京东</div>
  65.                 </div>
  66.                 <div class="list-text">
  67.                   <span>10月1日 京东关注店铺领京豆</span>
  68.                   <span>好价排行Top1</span>
  69.                   <span>亲测领106京豆</span>
  70.                 </div>
  71.               </a>
  72.               <div class="list-link">
  73.                 <a href="">181</a>
  74.                 <a href="">72%</a>
  75.               </div>
  76.             </li>
  77.             <li>
  78.               <a href="" class="list-item">
  79.                 <div class="list-img">
  80.                   <img src="img/sp/sp2.jpg" alt="" />
  81.                   <div class="list-order">京东</div>
  82.                 </div>
  83.                 <div class="list-text">
  84.                   <span> COCONUT PLAM 椰树 椰子汁饮料 1000ml </span>
  85.                   <span>价格低于618</span>
  86.                   <span>7.9元 （需用券） </span>
  87.                 </div>
  88.               </a>
  89.               <div class="list-link">
  90.                 <a href="">181</a>
  91.                 <a href="">72%</a>
  92.               </div>
  93.             </li>
  95.             <li>
  96.               <a href="" class="list-item">
  97.                 <div class="list-img">
  98.                   <img src="img/sp/sp3.jpg" alt="" />
  99.                   <div class="list-order">天猫超市</div>
  100.                 </div>
  101.                 <div class="list-text">
  102.                   <span> 天地壹号 苹果醋饮料 330ml*15罐 </span>
  103.                   <span>好价排行Top4</span>
  104.                   <span>28.89 （需买... </span>
  105.                 </div>
  106.               </a>
  107.               <div class="list-link">
  108.                 <a href="">181</a>
  109.                 <a href="">72%</a>
  110.               </div>
  111.             </li>
  112.             <li>
  113.               <a href="" class="list-item">
  114.                 <div class="list-img">
  115.                   <img src="img/sp/sp3.jpg" alt="" />
  116.                   <div class="list-order">天猫超市</div>
  117.                 </div>
  118.                 <div class="list-text">
  119.                   <span> 天地壹号 苹果醋饮料 330ml*15罐 </span>
  120.                   <span>好价排行Top4</span>
  121.                   <span>28.89 （需买... </span>
  122.                 </div>
  123.               </a>
  124.               <div class="list-link">
  125.                 <a href="">181</a>
  126.                 <a href="">72%</a>
  127.               </div>
  128.             </li>
  129.           </ul>
  130.         </div>
  131.       </div>
  132.       <!-- 页面底部 -->
  133.       <div class="footer-banner">
  134.         <a href="">
  135.           <div class="download-foot">
  136.             <img src="img/download_logo.png" alt="" />
  137.             <span class="download-info">
  138.               <span>什么值得买</span>
  139.               <br />
  140.               <span>分享每一种值</span>
  141.             </span>
  142.             <span class="download-btn">下载APP</span>
  143.             <span>x</span>
  144.           </div>
  145.         </a>
  146.       </div>
  147.     </div>
  148.   </body>

CSS代码：

  1. /* 页面初始化 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. :root {
  8.   font-size: 10px;
  9. }
  10. body {
  11.   font-size: 1.6rem;
  12. }
  13. a {
  14.   text-decoration: none;
  15. }
  16. li {
  17.   list-style: none;
  18. }
  19. @media (min-width: 480px) {
  20.   html {
  21.     font-size: 12px;
  22.   }
  23. }
  24. @media (min-width: 640px) {
  25.   html {
  26.     font-size: 14px;
  27.   }
  28. }
  29. @media (min-width: 720px) {
  30.   html {
  31.     font-size: 16px;
  32.   }
  33. }
  34. /* 页面顶部 */
  35. .home {
  36.   height: 100vh;
  37.   display: grid;
  38.   grid-template-rows: 4.4rem 1fr 6rem;
  39.   background-color: #f6f6f6;
  40. }
  41. .home .main {
  42.   height: calc(100vh - 4.4rem - 6rem);
  43.   overflow-y: scroll;
  44. }
  45. .home .header {
  46.   display: flex;
  47.   place-items: center;
  48.   background-color: white;
  49. }
  50. .home .header .logo {
  51.   flex-basis: 11rem;
  52. }
  53. .home .header .logo img {
  54.   width: 10rem;
  55.   height: 1.9rem;
  56.   padding-left: 0.5rem;
  57. }
  58. .home .header .search {
  59.   flex-grow: 1;
  60.   flex-basis: auto;
  61.   background-color: #f6f6f6;
  62.   border-radius: 1.5rem;
  63.   padding: 0.2rem;
  64. }
  65. .home .header .search form {
  66.   display: grid;
  67.   grid-template-columns: auto 1fr;
  68.   padding-left: 0.5rem;
  69. }
  70. .home .header .search input {
  71.   border: none;
  72.   outline: none;
  73.   background-color: #f6f6f6;
  74.   width: 100%;
  75. }
  76. .home .header .login {
  77.   flex-basis: 5rem;
  78.   padding-left: 1rem;
  79.   font-size: 1.4rem;
  80. }
  81. /* 轮播图区 */
  82. .main .sub-banner {
  83.   width: 100%;
  84.   background: url("../img/banner_bg_10.png") no-repeat;
  85.   background-size: cover;
  86. }
  87. .main .sub-banner .link-text {
  88.   color: #fff;
  89.   text-align: center;
  90.   padding-top: 2.6rem;
  91.   width: 100%;
  92. }
  93. .main .sub-banner .link-text h1 {
  94.   font-size: 2rem;
  95.   line-height: 2rem;
  96.   font-weight: 700;
  97.   margin-bottom: 1rem;
  98. }
  99. .main .sub-banner .link-text h2 {
  100.   font-size: 1.2rem;
  101.   line-height: 1.2rem;
  102.   font-weight: 400;
  103.   margin-bottom: 1rem;
  104. }
  105. .main .sub-banner .info-banner-swiper {
  106.   width: 100%;
  107.   padding: 1.2rem 2.4rem 0.8rem;
  108. }
  109. .main .sub-banner .info-banner-swiper img {
  110.   width: calc(100vw - 4.8rem);
  111.   border-radius: 6.6px;
  112. }
  113. /* 导航菜单 */
  114. .icon-list {
  115.   display: flex;
  116.   padding: 0.9rem 0.4rem;
  117.   place-content: space-evenly;
  118.   place-items: center;
  119.   flex-direction: row;
  120.   /* 子元素横向排列 */
  121.   /* flex-direction: row; */
  122.   /* 相对父元素水平居中 */
  123.   /* justify-content: center; */
  124.   /*  子元素相对父元素垂直居中 */
  125.   align-items: center;
  126. }
  128. .icon-list .icon-box {
  129.   display: flex;
  130.   flex-direction: column;
  131.   place-items: center;
  132.   font-size: 12px;
  133.   color: #888;
  134. }
  135. .icon-list .icon-box .icon-desc {
  136.   width: 4rem;
  137.   height: 4rem;
  138. }
  139. /* 商品列表 */
  140. .main .feed-content .list {
  141.   display: grid;
  142.   grid-template-columns: repeat(2, 1fr);
  143.   gap: 1.5rem;
  144.   padding: 1.5rem;
  145. }
  146. .main .feed-content .list-item .list-img > img {
  147.   width: 100%;
  148.   border-radius: 1rem 1rem 0 0;
  149. }
  150. .main .feed-content .list .list-item .list-text {
  151.   display: flex;
  152.   flex-direction: column;
  153.   font-size: 1.2rem;
  154. }
  155. .list-img {
  156.   position: relative;
  157. }
  158. .list-img .list-order {
  159.   position: absolute;
  160.   bottom: 1rem;
  161.   left: 1rem;
  162.   font-size: 0.6rem;
  163.   color: #888;
  164.   padding: 0 0.5rem;
  165.   background-color: #f6f6f6;
  166.   border-radius: 3px;
  167. }
  168. .main .feed-content .list > li span {
  169.   padding: 0.3rem 0.5rem;
  170. }
  171. .list-text > span:first-of-type {
  172.   color: black;
  173.   font-size: 12px;
  174. }
  175. .list-text > span:first-of-type + span {
  176.   color: #666;
  177.   font-size: 10px;
  178. }
  179. .list-text > span:last-of-type {
  180.   color: red;
  181.   font-size: 12px;
  182.   font-weight: bolder;
  183. }
  184. .list .list-link {
  185.   color: #666;
  186.   font-size: 12px;
  187.   display: flex;
  188.   width: 100%;
  189.   place-items: center;
  190.   place-content: space-evenly;
  191. }
  192. /* 页面底部 */
  193. .footer-banner {
  194.   position: fixed;
  195.   bottom: 0;
  196.   font-size: 15px;
  197.   width: 100%;
  198.   height: 65px;
  199.   z-index: 20;
  200.   background: rgba(0, 0, 0, 0.7);
  201. }
  202. .footer-banner a {
  203.   display: block;
  204.   color: #cdcdcd;
  205.   overflow: hidden;
  206.   cursor: pointer;
  207. }
  208. .download-foot {
  209.   display: grid;
  210.   grid-template-columns: 0.7fr 2fr 1fr 0.3fr;
  211.   place-content: space-evenly;
  212.   place-items: center;
  213.   height: 65px;
  214. }
  216. .download-foot > img {
  217.   width: 4rem;
  218.   height: 4rem;
  219. }
  220. .download-btn {
  221.   width: 25%;
  222.   min-width: 80px;
  223.   max-width: 200px;
  224.   height: 35px;
  225.   line-height: 35px;
  226.   text-align: center;
  227.   border: 1px solid #cdcdcd;
  228.   border-radius: 4px;
  229. }

效果图：
效果图

源码下载：
网盘：https://pan.baidu.com/s/1UNhE70XTalQmigPWZ-_NWA
提取码：1234

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