search

博客列表 >使用定位、flex与grid布局仿酒仙网手机端页面

使用定位、flex与grid布局仿酒仙网手机端页面

樱风醉
樱风醉原创
2021年10月10日 16:57:37675浏览

仿酒仙网https://m.jiuxian.com/，点击链接查看正版网站

1.各部分css样式

①重置样式

  1. /* 样式重置 */
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  8. /* 链接 */
  9. a {
  10.     text-decoration: none;
  11.     color: #666;
  12. }
  14. /* 列表 */
  15. li {
  16.     list-style: none;
  17. }
  19. :root {
  20.     font-size: 10px;
  21. }
  23. body {
  24.     font-size: 1.6rem;
  25.     /* 有一个浅灰色背景 */
  26.     background-color: #f6f6f6;
  27. }
  28. /* 用媒体查询来动态设置字号,使在较小的手机屏幕上也能看清字号  */
  29. @media screen and (min-width: 480px) {
  30.     :root {
  31.         font-size: 12px;
  32.     }
  33. }
  35. @media screen and (min-width: 640px) {
  36.     :root {
  37.         font-size: 14px;
  38.     }
  39. }
  41. @media screen and (min-width: 720px) {
  42.     :root {
  43.         font-size: 16px;
  44.     }
  45. }

②顶部APP下载部分

  1. .app-download {
  2.     width: 100%;
  3.     height: 4.3rem;
  4.     background-color: #2e2e2e;
  5.     margin: 0 auto 0;
  6.     display: flex;
  7.     justify-content: center;
  8.     align-items: center;
  9. }
  10. .app-download .icon-guanbi {
  11.     color: white;
  12.     font-size: 1.6rem;
  13.     margin: 0 1.4rem;
  14. }
  15. .app-download img {
  16.     width: 3rem;
  17.     height: 3rem;
  18. }
  19. .app-download h3 {
  20.     margin: 0 4rem 0 5rem;
  21.     text-align: center;
  22. }
  23. .app-download h3 p {
  24.     color: white;
  25.     font-size: 1rem;
  26.     white-space: nowrap;
  27. }
  29. .app-download a {
  30.     font-size: 1.4rem;
  31.     background-color: #e62929;
  32.     color: white;
  33.     width: 12rem;
  34.     height: 4.3rem;
  35.     margin-left: auto;
  36.     line-height: 43px;
  37.     text-align: center;
  38. }

③头部logo及搜索框

  1. .header {
  2.     width: 100%;
  3.     height: 4rem;
  4.     display: flex;
  5.     justify-content: space-between;
  6.     align-items: center;
  7.     background-color: #e5383b;
  8.     position: sticky;
  9.     top: 0;
  10.     left: 0;
  11. }
  12. .header a img {
  13.     width: 5.7rem;
  14.     height: 2.7rem;
  15.     margin-left: 1rem;
  16. }
  17. .header .search {
  18.     background-color: white;
  19.     width: 29rem;
  20.     height: 2.7rem;
  21.     display: flex;
  22.     align-items: center;
  23.     border-radius: 0.5rem;
  24.     margin: 0 0.5rem 0 0.6rem;
  25. }
  26. .header .search form input {
  27.     width: 100%;
  28.     height: 2.7rem;
  29.     outline: none;
  30.     border: none;
  31.     color: #888;
  32. }
  33. .header .search .icon-sousuo {
  34.     color: #e43130;
  35.     font-size: 1.2rem;
  36.     padding: 0 0.5rem;
  37.     margin: 0 0.8rem;
  38. }

④轮播图

  1. .slider {
  2.     width: 100%;
  3.     margin: 0 auto 2rem;
  4. }
  5. .slider img {
  6.     width: 100%;
  7.     height: 100%;
  8.     border-radius: 0 0 1rem 1rem;
  9. }
  11. .slider .imgs a {
  12.     display: none;
  13. }
  14. /* 默认第一个轮播图激活 */
  15. .slider .imgs a.active {
  16.     display: block;
  17. }
  19. /* 切换按钮容器的样式 */
  20. .slider .btns {
  21.     /* flex布局,且水平居中,并上移到轮播图底部 */
  22.     display: flex;
  23.     justify-content: flex-end;
  24.     /* 负外距可反向移动元素,这里是向上 */
  25.     margin-top: -2rem;
  26.     margin-right: 1rem;
  27. }
  29. /* 切换按钮 */
  30. .slider .btns .item {
  31.     height: 0.8rem;
  32.     width: 0.8rem;
  33.     border-radius: 50%;
  34.     background-color: #888;
  35.     margin: 0.2rem;
  36. }
  37. /* 切换按钮鼠标悬停样式 */
  38. .slider .btns .item:hover {
  39.     cursor: pointer;
  40. }
  41. /* 当前默认激活的按钮样式 */
  42. .slider .btns .item.active {
  43.     background-color: #e43130;
  44. }

⑤导航栏

  1. .navs {
  2.     width: 100%;
  3.     background-color: white;
  4.     display: grid;
  5.     grid-template-rows: repeat(2, 1fr);
  6.     grid-template-columns: repeat(5, 1fr);
  7.     place-content: center;
  8. }
  10. .navs a img {
  11.     width: 7.7rem;
  12. }

⑥banner图/新闻/秒杀

  1. /* 导航下方banner图 */
  2. .pubBanner a img {
  3.     width: 100%;
  4. }
  5. /* 滚动新闻 */
  6. .news {
  7.     padding: 0.8rem 1rem;
  8. }
  9. .news i {
  10.     width: 8.3rem;
  11.     height: 1.6rem;
  12.     padding: 0.2rem 1rem 0.2rem 0;
  13.     border-right: 1px solid #e4c5c5;
  14.     padding-right: 10px;
  15. }
  16. .news i img {
  17.     width: 83px;
  18.     height: 16px;
  19. }
  20. .news a {
  21.     font-size: 1.2rem;
  22.     margin-left: 1.5rem;
  23. }
  24. /* 秒杀 */
  25. .spikeBox .spike {
  26.     height: 3rem;
  27.     display: flex;
  28.     justify-content: space-around;
  29. }
  30. .spikeBox .spike h3 {
  31.     font-size: 1.4rem;
  32.     font-weight: bolder;
  33.     font-family: "黑体";
  34. }
  35. .spikeBox .spike a,
  36. .spikeBox .spike .iconfont,
  37. .spikeBox .spike .lastTime,
  38. .spikeBox .shop .item .name,
  39. .spikeBox .shop .item .y-price {
  40.     font-size: 1.2rem;
  41. }
  42. .spikeBox .shop .item .y-price {
  43.     font-size: 1.2rem;
  44.     color: #999;
  45. }
  46. .spikeBox .shop {
  47.     background-color: #fff;
  48.     display: flex;
  49.     justify-content: space-evenly;
  50. }
  51. .spikeBox .shop .item {
  52.     padding: 0 1rem;
  53.     display: flex;
  54.     flex-direction: column;
  55.     justify-content: center;
  56. }
  57. .spikeBox .shop .item img {
  58.     width: 10rem;
  59. }
  61. .spikeBox .shop .item .price {
  62.     font-size: 1.4rem;
  63.     color: #fc5a5a;
  64. }

⑦活动广告

  1. .ad {
  2.     width: 100%;
  3.     background-color: white;
  4.     margin: 1rem 0;
  5.     display: grid;
  6.     grid-template-columns: 1fr 1fr;
  7.     grid-template-rows: 1fr 1fr;
  8.     place-content: center;
  9. }
  10. .ad img:first-of-type {
  11.     width: 18rem;
  12.     grid-area: 1/1/3/2;
  13. }
  14. .ad img:nth-of-type(n + 2) {
  15.     width: 18rem;
  16. }

⑧商品列表

  1. .list {
  2.     width: 100%;
  3.     background-color: #fff;
  4. }
  5. .list ul {
  6.     display: grid;
  7.     grid-template-columns: repeat(2, 1fr);
  8.     gap: 0.5rem;
  9.     padding: 1.2rem;
  10.     justify-content: space-evenly;
  11. }
  12. .list ul li {
  13.     display: flex;
  14.     flex-direction: column;
  15. }
  16. .list .title {
  17.     width: 100%;
  18.     height: 3.3rem;
  19.     background-color: #fff;
  20.     margin-top: 2rem;
  21.     border-top: 1px solid #f5e7e7;
  22.     border-bottom: 1px solid #f5e7e7;
  23.     text-align: center;
  24. }
  25. .list .title a {
  26.     line-height: 3.3rem;
  27.     height: 3.3rem;
  28.     color: #666666;
  29.     font-size: 1.2rem;
  30. }
  31. .list ul li .tag {
  32.     width: 7rem;
  33.     height: 1.6rem;
  34.     text-align: center;
  35.     line-height: 1.6rem;
  36.     border-radius: 0.3rem;
  37.     padding: 0 0.5rem;
  38.     font-size: 1.2rem;
  39.     color: #fff;
  40. }
  41. .list ul li .red {
  42.     background-color: #ff6266;
  43. }
  44. .list ul li .yel {
  45.     background-color: #ffa855;
  46. }
  47. .list ul li .blue {
  48.     background-color: #8888ff;
  49. }
  51. .list ul li a img {
  52.     width: 17rem;
  53.     align-self: center;
  54. }
  55. .list ul li .name {
  56.     height: 3.2rem;
  57.     font-size: 1.2rem;
  58.     line-height: 1.6rem;
  59. }
  60. .list ul li .price .x-price {
  61.     color: #fc5a5a;
  62.     font-size: 1.4rem;
  63. }
  64. .list ul li .price .y-price {
  65.     color: #999;
  66.     font-size: 1.2rem;
  67.     margin-left: 0.5rem;
  68. }

⑨版权/联系方式

  1. .copyright {
  2.     height: 8rem;
  3.     width: 100%;
  4.     text-align: center;
  5.     line-height: 2rem;
  6.     color: rgb(153, 153, 153);
  7.     font-size: 1.2rem;
  8.     padding: 1rem 0 5rem;
  9.     margin-bottom: 6rem;
  10. }

⑩页脚菜单

  1. .footer {
  2.     width: 100%;
  3.     height: 42px;
  4.     display: flex;
  5.     justify-content: space-around;
  6.     border-top: 1px solid #cccccc;
  7.     background: #f1f1f1;
  8.     position: fixed;
  9.     bottom: 0;
  10.     left: 0;
  11.     right: 0;
  12.     z-index: 999;
  13. }
  14. .footer a img {
  15.     width: 4.2rem;
  16. }

2.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="width=device-width, initial-scale=1.0" />
  7.         <title>酒仙网-白酒、红酒、洋酒、保健酒、黄酒、酒具官方旗舰店</title>
  8.         <link rel="stylesheet" href="font_icon/iconfont.css" />
  9.         <link rel="stylesheet" href="css/reset.css" />
  10.         <link rel="stylesheet" href="css/appDownload.css" />
  11.         <link rel="stylesheet" href="css/header.css" />
  12.         <link rel="stylesheet" href="css/slider.css" />
  13.         <link rel="stylesheet" href="css/nav.css" />
  14.         <link rel="stylesheet" href="css/banner_news_spike.css" />
  15.         <link rel="stylesheet" href="css/ad.css" />
  16.         <link rel="stylesheet" href="css/list.css" />
  17.         <link rel="stylesheet" href="css/copyright.css" />
  18.         <link rel="stylesheet" href="css/footer.css" />
  19.     </head>
  20.     <body>
  21.         <!-- 酒仙网APP下载 -->
  22.         <div class="app-download">
  23.             <span class="iconfont icon-guanbi"></span>
  24.             <img src="img/topApp.png" />
  25.             <h3>
  26.                 <p>打开酒仙网APP</p>
  27.                 <p>新人领198元礼包</p>
  28.             </h3>
  29.             <a href="https://m.jiuxian.com/">立即打开</a>
  30.         </div>
  32.         <!-- 头部搜索框  -->
  33.         <div class="header">
  34.             <a href="https://m.jiuxian.com/"><img src="img/jx-sprite.png" /></a>
  35.             <div class="search">
  36.                 <span class="iconfont icon-sousuo"></span>
  37.                 <form action="">
  38.                     <input type="search" name="search" value="错峰抢购 三档好礼满赠" />
  39.                 </form>
  40.             </div>
  41.         </div>
  43.         <!-- 轮播图 -->
  44.         <div class="slider">
  45.             <div class="imgs">
  46.                 <a href="" class="active"><img src="img/slider/s1.jpg" alt="" /></a>
  47.                 <a href=""><img src="img/slider/s2.jpg" alt="" /></a>
  48.                 <a href=""><img src="img/slider/s3.jpg" alt="" /></a>
  49.                 <a href=""><img src="img/slider/s4.jpg" alt="" /></a>
  50.             </div>
  51.             <!-- 轮播图底部的切换按钮组,与轮播图数量对应 -->
  52.             <div class="btns">
  53.                 <span class="item active"></span>
  54.                 <span class="item"></span>
  55.                 <span class="item"></span>
  56.                 <span class="item"></span>
  57.             </div>
  58.         </div>
  60.         <!-- 导航区     -->
  61.         <div class="navs">
  62.             <a href=""><img src="img/nav/baijiu.jpg" alt="" /></a>
  63.             <a href=""><img src="img/nav/putaojiu.jpg" alt="" /></a>
  64.             <a href=""><img src="img/nav/zhibo.gif" alt="" /></a>
  65.             <a href=""><img src="img/nav/yangjiu.jpg" alt="" /></a>
  66.             <a href=""><img src="img/nav/pijiu.jpg" alt="" /></a>
  67.             <a href=""><img src="img/nav/mendian.jpg" alt="" /></a>
  68.             <a href=""><img src="img/nav/club.jpg" alt="" /></a>
  69.             <a href=""><img src="img/nav/19fen.gif" alt="" /></a>
  70.             <a href=""><img src="img/nav/yaohzan.gif" alt="" /></a>
  71.             <a href=""><img src="img/nav/pintuan.jpg" alt="" /></a>
  72.         </div>
  74.         <!-- 活动banner图 -->
  75.         <div class="pubBanner">
  76.             <a href=""><img src="img/banner/banner01.jpg" alt="" /></a>
  77.         </div>
  79.         <!-- 新闻 -->
  80.         <div class="news">
  81.             <i>
  82.                 <img src="img/news/t1.jpg" alt="" />
  83.             </i>
  84.             <a href="">1499飞天茅台限量抢</a>
  85.         </div>
  87.         <!-- 秒杀 -->
  88.         <div class="spikeBox">
  89.             <div class="spike">
  90.                 <h3>掌上秒拍</h3>
  91.                 <div class="lastTime">
  92.                     <span>距结束</span>
  93.                     <span class="hours">02</span><b>:</b><span class="minutes">15</span><b>:</b><span class="seconds">57</span>
  94.                 </div>
  95.                 <a href=""><span>更多商品的你来抢！</span><span class="iconfont icon-youjiantou-tianchong"></span></a>
  96.             </div>
  97.             <div class="shop">
  98.                 <div class="item">
  99.                     <img src="img/shop/1.jpg" />
  100.                     <span class="name">52°扳倒井好品天下480ml *6整箱装</span>
  101.                     <span class="price">¥99.00</span>
  102.                     <del class="y-price">¥174.00</del>
  103.                 </div>
  104.                 <div class="item">
  105.                     <img src="img/shop/2.jpg" />
  106.                     <span class="name">40°人头马VSOP干邑白兰地(乐享）50ml</span>
  107.                     <span class="price">¥418.00</span>
  108.                     <del class="y-price">¥499.00</del>
  109.                 </div>
  110.                 <div class="item">
  111.                     <img src="img/shop/3.jpg" />
  112.                     <span class="name">52° 洋河蓝色经典 海之蓝1000ml*1</span>
  113.                     <span class="price">¥279.00</span>
  114.                     <del class="y-price">¥359.00</del>
  115.                 </div>
  116.             </div>
  117.         </div>
  119.         <!-- 活动banner图 -->
  120.         <div class="pubBanner">
  121.             <a href=""><img src="img/banner/banner001.jpg" alt="" /></a>
  122.         </div>
  123.         <div class="pubBanner">
  124.             <a href=""><img src="img/banner/banner002.jpg" alt="" /></a>
  125.         </div>
  126.         <div class="pubBanner">
  127.             <a href=""><img src="img/banner/banner003.jpg" alt="" /></a>
  128.         </div>
  130.         <!-- 活动广告 -->
  131.         <div class="ad">
  132.             <img src="img/ads/1.jpg" alt="" />
  133.             <img src="img/ads/2.jpg" alt="" />
  134.             <img src="img/ads/3.jpg" alt="" />
  135.         </div>
  137.         <!-- 爆款推荐 -->
  138.         <div class="list">
  139.             <div class="title">
  140.                 <a href="">爆款推荐</a>
  141.             </div>
  142.             <ul>
  143.                 <li>
  144.                     <span class="tag red">手机专享价</span>
  145.                     <a href=""><img src="img/shop/01.jpg" alt="" /></a>
  146.                     <span class="name">43°茅台飞天500ml</span>
  147.                     <div class="price">
  148.                         <span class="x-price"><strong>¥1029.00</strong></span>
  149.                         <del class="y-price">¥1399.00</del>
  150.                     </div>
  151.                 </li>
  152.                 <li>
  153.                     <span class="tag red">手机专享价</span>
  154.                     <a href=""><img src="img/shop/02.jpg" alt="" /></a>
  155.                     <span class="name">澳大利亚黄尾袋鼠加本力梅洛红葡萄酒6支装</span>
  156.                     <div class="price">
  157.                         <span class="x-price"><strong>¥258.00</strong></span>
  158.                         <del class="y-price">¥348.00</del>
  159.                     </div>
  160.                 </li>
  161.                 <li>
  162.                     <span class="tag red">掌上秒拍</span>
  163.                     <a href=""><img src="img/shop/03.jpg" alt="" /></a>
  164.                     <span class="name">53度赖茅传禧500ml（2瓶）</span>
  165.                     <div class="price">
  166.                         <span class="x-price"><strong>¥388.00</strong></span>
  167.                         <del class="y-price">¥498.00</del>
  168.                     </div>
  169.                 </li>
  170.                 <li>
  171.                     <div>
  172.                         <span class="tag yel">限时抢购</span>
  173.                         <span class="tag blue">满赠</span>
  174.                     </div>
  175.                     <a href=""><img src="img/shop/04.jpg" alt="" /></a>
  176.                     <span class="name">55°汾酒盘古汾酒500ml（2019版）*4</span>
  177.                     <div class="price">
  178.                         <span class="x-price"><strong>¥1000.00</strong></span>
  179.                         <del class="y-price">¥1596.00</del>
  180.                     </div>
  181.                 </li>
  182.                 <li>
  183.                     <span class="tag yel">限时抢购</span>
  184.                     <a href=""><img src="img/shop/05.jpg" alt="" /></a>
  185.                     <span class="name">40°法国马爹利鼎盛干邑白兰地500ml+鼎盛50ml*2</span>
  186.                     <div class="price">
  187.                         <span class="x-price"><strong>¥230.00</strong></span>
  188.                         <del class="y-price">¥437.00</del>
  189.                     </div>
  190.                 </li>
  191.                 <li>
  192.                     <div>
  193.                         <span class="tag yel">限时抢购</span>
  194.                         <span class="tag blue">满减</span>
  195.                         <span class="tag blue">单品加价购</span>
  196.                     </div>
  197.                     <a href=""><img src="img/shop/06.jpg" alt="" /></a>
  198.                     <span class="name">五虎上将【中华老字号】白水杜康 52度浓香型白酒 500ml*5瓶整箱*4</span>
  199.                     <div class="price">
  200.                         <span class="x-price"><strong>¥128.00</strong></span>
  201.                         <del class="y-price">¥598.00</del>
  202.                     </div>
  203.                 </li>
  204.                 <li>
  205.                     <div>
  206.                         <span class="tag yel">限时抢购</span>
  207.                         <span class="tag blue">满减</span>
  208.                         <span class="tag blue">买赠</span>
  209.                     </div>
  210.                     <a href=""><img src="img/shop/07.jpg" alt="" /></a>
  211.                     <span class="name">53°习酒窖藏1988雅致版（新款）500ml</span>
  212.                     <div class="price">
  213.                         <span class="x-price"><strong>¥718.00</strong></span>
  214.                         <del class="y-price">¥869.00</del>
  215.                     </div>
  216.                 </li>
  217.                 <li>
  218.                     <div>
  219.                         <span class="tag yel">抄底价</span>
  220.                         <span class="tag blue">多买多赠</span>
  221.                     </div>
  222.                     <a href=""><img src="img/shop/08.jpg" alt="" /></a>
  223.                     <span class="name">53°贵州金沙古酱酒 酱香型 500ml单瓶装尊贵蓝</span>
  224.                     <div class="price">
  225.                         <span class="x-price"><strong>¥148.00</strong></span>
  226.                         <del class="y-price">¥268.00</del>
  227.                     </div>
  228.                 </li>
  229.             </ul>
  230.         </div>
  232.         <!-- 版权信息 -->
  233.         <div class="copyright">
  234.             <p>酒仙网络科技股份有限公司版权所有</p>
  235.             <p>北京市北京经济技术开发区经海五路58号院8幢1-6层</p>
  236.             <p><span>400-617-9999</span></p>
  237.             <p><a href="https://m.jiuxian.com/mobile/2016/about/index.html" style="color: #0088ff">关于我们</a></p>
  238.         </div>
  240.         <!-- 页脚菜单 -->
  241.         <div class="footer">
  242.             <a href=""><img src="img/shouye.png" alt="" /></a>
  243.             <a href=""><img src="img/fenlei.png" alt="" /></a>
  244.             <a href=""><img src="img/jinbao.png" alt="" /></a>
  245.             <a href=""><img src="img/gouwuche.png" alt="" /></a>
  246.             <a href=""><img src="img/wode.png" alt="" /></a>
  247.         </div>
  248.     </body>
  249. </html>

3.效果图



上一条：第十二课 数组循环下一条：八大数据类型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多