移动端布局知识点

序号名称描述
1像素图像显示最小单位,PPI(像素分辨率)
2DPR设备像素比 = 设备像素 / CSS 像素
3视口可视窗口 viewport,分布局/视觉/理想三类
序号名称描述
1布局视口Layout viewport设备无关, 通常默认980px,显示完整网页
2视觉视口visual viewport设备相关,用户手机屏幕可见部分,通过缩放查看全部
3理想视口idea viewport不必缩放就可查看全部,针对移动端进行布局
序号属性值描述
1width=device-width布局视图 = 视觉视图
2initial-scale=1.0视觉视图 = 理想视图
序号属性值描述
11vw = 3.75px以iPhone6/11屏幕宽度为基准
21rem = 100vw / 3.75即1rem = 100px, 方便计算

淘宝页面仿写

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <link rel="stylesheet" href="icon_font/iconfont.css" />
  8.     <link rel="stylesheet" href="css/reset.css" />
  9.     <link rel="stylesheet" href="css/header.css" />
  10.     <link rel="stylesheet" href="css/footer.css">
  11.     <link rel="stylesheet" href="css/main.css">
  12.     <title>淘宝移动端仿写</title>
  13. </head>
  14. <body>
  15.     <!-- 页眉 -->
  16.     <header>
  17.         <!-- 顶部 -->
  18.         <div class="top">
  19.             <!-- logo -->
  20.             <div class="logo iconfont icon-shejiaotubiao-08"></div>
  21.             <!-- 搜索框 -->
  22.             <div class="search">
  23.                 <div class="key">
  24.                     <span class="iconfont icon-fangdajing"></span>
  25.                     <span>寻找宝贝店铺</span>
  26.                 </div>
  27.             </div>
  28.         </div>
  29.         <!-- 轮播图 -->
  30.         <div class="slider">
  31.             <a href=""><img src="images/banner/banner1.jpg" alt=""></a>
  32.         </div>
  33.         <!-- 导航组 -->
  34.         <ul class="nav">
  35.             <li class="item">
  36.                 <a href=""><img src="images/nav/nav6.png"alt=""></a>
  37.                 <a href="">天猫新品</a>
  38.             </li>
  39.             <li class="item">
  40.                 <a href=""><img src="images/nav/nav3.png" alt=""></a>
  41.                 <a href="">今日爆款</a>
  42.             </li>
  43.             <li class="item">
  44.                 <a href=""><img src="images/nav/nav1.png" alt=""></a>
  45.                 <a href="">天猫超市</a>
  46.             </li>
  47.             <li class="item">
  48.                 <a href=""><img src="images/nav/nav2.png" alt=""></a>
  49.                 <a href="">充值中心</a>
  50.             </li>
  51.             <li class="item">
  52.                 <a href=""><img src="images/nav/nav5.png" alt=""></a>
  53.                 <a href="">机票酒店</a>
  54.             </li>
  55.             <li class="item">
  56.                 <a href=""><img src="images/nav/nav8.png" alt=""></a>
  57.                 <a href="">金币庄园</a>
  58.             </li>
  59.             <li class="item">
  60.                 <a href=""><img src="images/nav/nav7.png" alt=""></a>
  61.                 <a href="">阿里拍卖</a>
  62.             </li>
  63.             <li class="item">
  64.                 <a href=""><img src="images/nav/nav4.png" alt=""></a>
  65.                 <a href="">分类</a>
  66.             </li>
  67.         </ul>
  68.     </header>
  69.     <main>
  70.         <div class="goods-nav">
  71.             <div class="juhuasuan">
  72.                 <div class="context ">
  73.                     <span class="title">聚划算</span>
  74.                     <a href=""class="pingpaizhekou">
  75.                         <span>品牌折扣</span>
  76.                         <img src="images/items/item1.png" alt="">
  77.                     </a> 
  78.                     <a href="" class="huasuanhaowu">
  79.                         <span>划算好物</span>
  80.                         <img src="images/items/item2.png" alt="">
  81.                     </a>
  82.                 </div>
  83.             </div>
  84.             <div class="juhuasuan">
  85.                 <div class="context">
  86.                     <span class="title">聚划算</span>
  87.                     <a href=""class="pingpaizhekou">
  88.                         <span>品牌折扣</span>
  89.                         <img src="images/items/item1.png" alt="">
  90.                     </a> 
  91.                     <a href="" class="huasuanhaowu">
  92.                         <span>划算好物</span>
  93.                         <img src="images/items/item2.png" alt="">
  94.                     </a>
  95.                 </div>
  96.             </div>
  97.             <div class="juhuasuan">
  98.                 <div class="context">
  99.                     <span class="title">聚划算</span>
  100.                     <a href=""class="pingpaizhekou">
  101.                         <span>品牌折扣</span>
  102.                         <img src="images/items/item1.png" alt="">
  103.                     </a> 
  104.                     <a href="" class="huasuanhaowu">
  105.                         <span>划算好物</span>
  106.                         <img src="images/items/item2.png" alt="">
  107.                     </a>
  108.                 </div>
  109.             </div>
  110.             <div class="juhuasuan">
  111.                 <div class="context">
  112.                     <span class="title">聚划算</span>
  113.                     <a href=""class="pingpaizhekou">
  114.                         <span>品牌折扣</span>
  115.                         <img src="images/items/item1.png" alt="">
  116.                     </a> 
  117.                     <a href="" class="huasuanhaowu">
  118.                         <span>划算好物</span>
  119.                         <img src="images/items/item2.png" alt="">
  120.                     </a>
  121.                 </div>
  122.             </div>
  123.             <div class="juhuasuan">
  124.                 <div class="context">
  125.                     <span class="title">聚划算</span>
  126.                     <a href=""class="pingpaizhekou">
  127.                         <span>品牌折扣</span>
  128.                         <img src="images/items/item1.png" alt="">
  129.                     </a> 
  130.                     <a href="" class="huasuanhaowu">
  131.                         <span>划算好物</span>
  132.                         <img src="images/items/item2.png" alt="">
  133.                     </a>
  134.                 </div>
  135.             </div>
  136.             <div class="juhuasuan">
  137.                 <div class="context">
  138.                     <span class="title">聚划算</span>
  139.                     <a href=""class="pingpaizhekou">
  140.                         <span>品牌折扣</span>
  141.                         <img src="images/items/item1.png" alt="">
  142.                     </a> 
  143.                     <a href="" class="huasuanhaowu">
  144.                         <span>划算好物</span>
  145.                         <img src="images/items/item2.png" alt="">
  146.                     </a>
  147.                 </div>
  148.             </div>
  149.         </div>
  150.         <div class="bottom">
  152.         </div>
  154.     </main>
  155.     <footer>
  156.         <div class="item active">
  157.             <a href="" class="iconfont icon-shejiaotubiao-44"></a>
  158.         </div>
  159.         <div class="item">
  160.             <a href="" class="iconfont icon-gouwuche"></a>
  161.             <a href="">购物车</a>
  162.         </div>
  163.         <div class="item">
  164.             <a href="" class="iconfont icon-wodetaobao"></a>
  165.             <a href="">我的淘宝</a>
  166.         </div>
  167.     </footer>
  168. </body>
  169. </html>

css

  1. header {
  2.     position: relative;
  3. }
  5. header .top {
  6.     width: 100vw;
  7.     background-color: coral;
  8.     position: fixed;
  9.     top: 0;
  10.     left: 0;
  11.     right: 0;
  12.     display: grid;
  13.     grid-template-columns: 0.35rem 1fr;
  14.     padding: 0.05rem;
  15.     /* 调整显示层级 */
  16.     z-index: 99;
  17. }
  19. header .top .logo {
  20.     color: white;
  21.     font-size: 0.25rem;
  22. }
  24. header .top .search {
  25.     background-color: orangered;
  26.     color: #eee;
  27.     display: grid;
  28.     place-content: center;
  29.     border-radius: 0.05rem;
  30.     font-size: small;
  31. }
  32. .slider{
  33.     height: 1.25rem;
  34.     position: absolute;
  35.     top: 0.35rem;
  36. }
  37. .slider img,
  38. .nav img{
  39.     width: 100%;
  40.     height: 100%;
  41. }
  42. header .nav {
  43.     background-color: #fff;
  44.     position: absolute;
  45.     top: calc(0.35rem + 1.25rem);
  46.     display: grid;
  47.     grid-template-columns: repeat(5, 1fr);
  48.     font-size: 0.11rem;
  49.     /* padding: 0.2rem 0.1rem; */
  50.     column-gap: 0.05rem;
  51.     row-gap: 0.1rem;
  52.     margin-top: .06rem;
  53. }
  55. header .nav .item {
  56.     display: grid;
  57.     place-items: center;
  58.     padding: 0.05rem 0.05rem;
  59. }
  61. header .nav .item a {
  62.     padding: 0 0.05rem;
  63. }
  65. footer {
  66.     width: 100vw;
  67.     height: 0.46rem;
  68.     background-color: #fff;
  69.     position: fixed;
  70.     bottom: 0;
  71.     left: 0;
  72.     right: 0;
  73.     display: grid;
  74.     grid-template-columns: repeat(3, 1fr);
  75.     place-items: center;
  76. }
  78. footer .item {
  79.     display: grid;
  80.     place-items: center;
  81. }
  83. footer .item .iconfont {
  84.     font-size: 0.2rem;
  85. }
  87. footer .item.active .iconfont {
  88.     font-size: 0.36rem;
  89.     color: coral;
  90. }
  92. main {
  93.     position:relative;
  94. }
  95. main .goods-nav{
  96.     /* background-color: #fff; */
  97.     margin: 0.05rem;
  99.     position: absolute;
  100.     top: calc(0.36rem + 1.3rem + 1.52rem);
  101.     display: grid;
  102.     grid-template-columns: repeat(2, 1.86rem);
  103.     grid-template-rows: repeat(3, 1.26rem);
  104.     column-gap: 0.02rem;
  105. }
  107. main .goods-nav .juhuasuan{
  108.     background-color: #fff;
  109. }
  110. main .goods-nav .juhuasuan .context{
  111.     display: grid;
  112.     grid-template-columns: repeat(2,1fr);
  113.     grid-template-rows: 0.26rem 1rem;
  114.     place-content: center;
  115.     place-items: center;
  116. }
  117. main .goods-nav .juhuasuan .context span {
  118.     font-weight: bolder;
  119. }
  120. main .goods-nav .juhuasuan .context .title {
  121.     grid-column: span 2;
  122.     font-size: large;
  123.     font-weight: bolder;
  124.     place-self: start;
  125.     padding: 0 0 0 0.03rem;
  126.     margin-left: 0.1rem;
  127. }
  128. main .goods-nav img{
  129.     width: 100%;
  130.     height: 100%;
  131. }
  132. main .goods-nav .context .pingpaizhekou {
  133.     place-self: center;
  134.     background-color:rgb(255,127,80,0.2);
  135.     border-radius: 0.05rem;
  136.     margin-left: 0.1rem;
  137.     margin-right: 0.04rem;
  138. }
  139. main .goods-nav .context .pingpaizhekou span{
  140.     margin: 0.1rem;
  141.     padding: auto;
  142.     font-weight: bolder;
  143.     /* color: darkpink; */
  144. }
  145. main .goods-nav .context .huasuanhaowu {
  146.     place-self: center;
  147.     background-color:rgb(255,69,0,0.3);
  148.     border-radius: 0.05rem;
  149.     margin-left: 0.04rem;
  150.     margin-right: 0.1rem;
  151. }
  152. main .goods-nav .context .huasuanhaowu span{
  153.     margin: 0.1rem;
  154.     padding: auto;
  155.     font-weight: bolder;
  156.     /* color: darkpink; */
  157. }

效果：

更多相关文章

  1. 局部路径规划算法——人工势场法
  2. 自己期望薪资为啥会打折扣
  3. C#简单工厂模式是什么？
  4. 一道看完答案你会觉得很沙雕的「动态规划算法题」
  5. 在Woocommerce结帐页面使用AJAX和Fee API进行动态折扣
  6. mysql - 如果“a”==“b”回显“折扣”
  7. python新式类删改查

随机推荐

  1. 客户端请求服务器时的状态码讲解
  2. 深入分析java中的System类
  3. 设计模式之责任链模式
  4. java多线程（1）入门知识和基础案例
  5. 设计模式之备忘录模式
  6. 面试官：手写一个选择排序并对其改进
  7. java网络编程（3）UDP协议编程（单播多播广播）
  8. 面试官：手写一个插入排序，并对其改进
  9. 面试官：如何在十亿个单词字典中，判断某个单
  10. java集合系列（8）HashMap（源码分析，强烈推荐！！！）