仿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

更多相关文章

  1. 关于PHP5和PHP7中数组实现方式的比较总结
  2. js语法：解构赋值、dom元素的增删改、dataset,classList对象的使用
  3. 模态框与flex,grid思维导图
  4. HTML伪类、盒子模型学习与应用
  5. box-sizing的作用+伪类选择器的参数 an+b 的应用+媒体查询：@media
  6. 制作简易模态框登录页面及flex与grid整理总结
  7. 网站优化，什么是四处一词？
  8. 网站SEO优化404页面怎么制作？
  9. 盒模型，伪类与媒体查询

随机推荐

  1. android 制作输入法
  2. Android Studio使用总结
  3. android 应用在启动后进行全局的的初始化
  4. Android实现签名涂鸦手写板
  5. android webview 设置
  6. AndroidStudio打包apk出现的问题 `Error:
  7. react-native开发实例之替换默认logo——
  8. textview scroll
  9. Android Studio如何引用外部Library工程
  10. Android开发（一）拨打电话程序