HTML 学习

移动布局原理

1. 重要术语

(1) 术语

序号名称描述
1像素图像显示最小单位,PPI(像素分辨率)
2DPR设备像素比 = 设备像素 / CSS 像素
3视口可视窗口 viewport,分布局/视觉/理想三类

2. 三种视口描述

三种视口类型是人为的划分

序号名称描述
1布局视口Layout viewport设备无关, 通常默认980px,显示完整网页
2视觉视口visual viewport设备相关,用户手机屏幕可见部分,通过缩放查看全部
3理想视口idea viewport不必缩放就可查看全部,针对移动端进行布局

3. 解决方案

视口属性:<meta name="viewport" content="width=device-width, initial-scale=1.0" />

序号属性值描述
1width=device-width布局视图 = 视觉视图
2initial-scale=1.0视觉视图 = 理想视图

移动端布局单位很多,经典的百分比,em 等,但目前主流单位是: rem + vw,也称”rem-vw`解决方案

4. 推荐 vscode 插件

  1. 名称: px to rem & rpx,原名为cssrem
  2. 自动将px换算为rem
  3. 须在插件中设置1rem = ...px,默认为16px,通常设置为1rem=100px以方便计算

5. 操作步骤

布局前,必须先确定 1rem = ?, 1vw =?

5.1 1vw = ?

  1. 选择某款手机做为理想视口的基础,如iPhone11: 375px
  2. 100vw = 100% = 375px, 所以 1vw = 3.75px

5.2 1rem = ?

  1. 1rem 默认为游览器字号16px
  2. 推荐: 1rem = 100px
  3. 1rem不要在<html>中写死, 应该通过100vw计算出来

5.3 总结

序号属性值描述
11vw = 3.75px以iPhone6/11屏幕宽度为基准
21rem = 100vw / 3.75即1rem = 100px, 方便计算

淘宝页面仿写

1. 布局思路

分为 header main footer 三个部分

header 包含 顶部固定 搜索；首页轮播图 ；导航

main 包含 商品推广 ；商品列表

footer 包含 底部固定 导航

2. 效果演示

效果演示1

3 代码

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/header.css" />
  11.     <link rel="stylesheet" href="css/footer.css" />
  12.     <link rel="stylesheet" href="css/main.css" />
  13.   </head>
  15.   <body>
  16.     <!-- 头部 -->
  17.     <header>
  18.       <!-- 顶部 -->
  19.       <div class="top">
  20.         <!-- logo -->
  21.         <div class="logo iconfont icon-shejiaotubiao-08"></div>
  22.         <!-- 搜索框 -->
  23.         <div class="search">
  24.           <div class="keys">
  25.             <span class="iconfont icon-fangdajing"></span>
  26.             <span>寻找宝贝店铺</span>
  27.           </div>
  28.         </div>
  29.       </div>
  30.       <!-- 轮播图 -->
  31.       <div class="slider">
  32.         <a href=""><img src="images/banner/banner1.jpg" alt="" /></a>
  33.       </div>
  34.       <!-- 导航组 -->
  35.       <ul class="nav">
  36.         <li class="item">
  37.           <a href=""><img src="images/nav/nav6.png" alt="" /></a>
  38.           <a href="">天猫新品</a>
  39.         </li>
  40.         <li class="item">
  41.           <a href=""><img src="images/nav/nav3.png" alt="" /></a>
  42.           <a href="">今日爆款</a>
  43.         </li>
  44.         <li class="item">
  45.           <a href=""><img src="images/nav/nav1.png" alt="" /></a>
  46.           <a href="">天猫超市</a>
  47.         </li>
  48.         <li class="item">
  49.           <a href=""><img src="images/nav/nav2.png" alt="" /></a>
  50.           <a href="">充值中心</a>
  51.         </li>
  52.         <li class="item">
  53.           <a href=""><img src="images/nav/nav5.png" alt="" /></a>
  54.           <a href="">机票酒店</a>
  55.         </li>
  56.         <li class="item">
  57.           <a href=""><img src="images/nav/nav8.png" alt="" /></a>
  58.           <a href="">金币庄园</a>
  59.         </li>
  60.         <li class="item">
  61.           <a href=""><img src="images/nav/nav7.png" alt="" /></a>
  62.           <a href="">阿里拍卖</a>
  63.         </li>
  64.         <li class="item">
  65.           <a href=""><img src="images/nav/nav4.png" alt="" /></a>
  66.           <a href="">分类</a>
  67.         </li>
  68.         <li class="item">
  69.           <a href=""><img src="images/nav/nav7.png" alt="" /></a>
  70.           <a href="">阿里拍卖</a>
  71.         </li>
  72.         <li class="item">
  73.           <a href=""><img src="images/nav/nav4.png" alt="" /></a>
  74.           <a href="">分类</a>
  75.         </li>
  76.       </ul>
  77.     </header>
  78.     <!-- 主体 -->
  79.     <main style="height: 1600px">
  80.       <!-- 1. 聚划算 -->
  81.       <div class="top">
  82.         <div class="item jhs">
  83.           <div class="box">
  84.             <h3 class="title">聚划算</h3>
  85.             <div class="desc">
  86.               <h4>品牌折扣</h4>
  87.               <img src="images/items/item1.png" alt="" />
  88.             </div>
  89.           </div>
  90.           <div class="box">
  91.             <!-- 用实体空格表示占位符 -->
  92.             <h3 class="title">&nbsp;</h3>
  93.             <div class="desc">
  94.               <h4>划算好货</h4>
  95.               <img src="images/items/item2.png" alt="" />
  96.             </div>
  97.           </div>
  98.           <div class="box">
  99.             <h3 class="title">淘抢购</h3>
  100.             <div class="desc">
  101.               <h4>限时半价</h4>
  102.               <img src="images/items/item3.png" alt="" />
  103.             </div>
  104.           </div>
  105.           <div class="box">
  106.             <h3 class="title">天天特价</h3>
  107.             <div class="desc">
  108.               <h4>9.9包邮</h4>
  109.               <img src="images/items/item4.png" alt="" />
  110.             </div>
  111.           </div>
  112.         </div>
  114.         <div class="item right">
  115.           <div class="box">
  116.             <h3 class="title">
  117.               淘宝直播
  118.               <span class="tag" style="background-color: red">LIVE</span>
  119.             </h3>
  120.             <div class="detail">
  121.               <div class="left">
  122.                 <span class="title">好物传送门</span>
  123.                 <img src="images/items/item5.png" alt="" />
  124.               </div>
  125.               <div class="right">
  126.                 <img src="images/items/item6.png" alt="" />
  127.               </div>
  128.             </div>
  129.           </div>
  130.           <div class="box">
  131.             <h3 class="title">
  132.               有好货&nbsp;<span class="tag" style="background-color: skyblue"
  133.                 >品质好物</span
  134.               >
  135.             </h3>
  136.             <div class="detail">
  137.               <div class="left">
  138.                 <span class="title" style="color: skyblue">全民口碑推荐</span>
  139.                 <img src="images/items/item7.png" alt="" />
  140.               </div>
  141.               <div class="right">
  142.                 <img src="images/items/item21.png" alt="" />
  143.               </div>
  144.             </div>
  145.           </div>
  146.         </div>
  147.         <div class="item right">
  148.           <div class="box">
  149.             <h3 class="title">
  150.               每日好店
  151.               <span class="tag" style="background-color: orange">精选</span>
  152.             </h3>
  153.             <div class="detail">
  154.               <div class="left">
  155.                 <span class="title">深挖藏的店</span>
  156.                 <img src="images/items/item9.png" alt="" />
  157.               </div>
  158.               <div class="right">
  159.                 <img src="images/items/item10.png" alt="" />
  160.               </div>
  161.             </div>
  162.           </div>
  163.         </div>
  164.         <div class="item right">
  165.           <div class="box">
  166.             <h3 class="title">
  167.               哇哦视频<span class="tag" style="background-color: orange"
  168.                 >亲测</span
  169.               >
  170.             </h3>
  171.             <div class="detail">
  172.               <div class="left">
  173.                 <span class="title">粉丝都爱看</span>
  174.                 <img src="images/items/item11.png" alt="" />
  175.               </div>
  176.               <div class="right">
  177.                 <img src="images/items/item12.png" alt="" />
  178.               </div>
  179.             </div>
  180.           </div>
  181.         </div>
  182.         <!-- 底部滚动显示文本 -->
  183.         <div class="item footer">
  184.           <div class="title">淘宝头条</div>
  185.           <div class="content">
  186.             <span class="type">评测</span>
  187.             <span style="font-size: larger">五款最强的防******</span>
  188.           </div>
  189.         </div>
  190.       </div>
  191.       <!-- 2. 商品列表 -->
  192.       <div class="list">
  193.         <div class="title">------ 你可能还喜欢 ------</div>
  194.         <div class="unit">
  195.           <div class="img">
  196.             <img src="images/items/item8.webp" alt="" />
  197.           </div>
  198.           <div class="detail">
  199.             <div class="desc">
  200.               商品描述商品描述,商品描述商品描述,商品描述商品描述,
  201.             </div>
  202.             <div class="price">
  203.               <span class="iconfont icon-rmb"></span>
  204.               <span class="price-num">89</span>
  205.               <span class="num">45人已购买</span>
  206.             </div>
  207.           </div>
  208.         </div>
  209.         <div class="unit">
  210.           <div class="img">
  211.             <img src="images/items/item20.webp" alt="" />
  212.           </div>
  213.           <div class="detail">
  214.             <div class="desc">
  215.               商品描述商品描述,商品描述商品描述,商品描述商品描述,
  216.             </div>
  217.             <div class="price">
  218.               <span class="iconfont icon-rmb"></span>
  219.               <span class="price-num">89</span>
  220.               <span class="num">+555545人已购买</span>
  221.             </div>
  222.           </div>
  223.         </div>
  224.         <div class="unit">
  225.           <div class="img">
  226.             <img src="images/items/item14.webp" alt="" />
  227.           </div>
  228.           <div class="detail">
  229.             <div class="desc">
  230.               商品描述商品描述,商品描述商品描述,商品描述商品描述,
  231.             </div>
  232.             <div class="price">
  233.               <span class="iconfont icon-rmb"></span>
  234.               <span class="price-num">89</span>
  235.               <span class="num">45人已购买</span>
  236.             </div>
  237.           </div>
  238.         </div>
  239.         <div class="unit">
  240.           <div class="img">
  241.             <img src="images/items/item15.webp" alt="" />
  242.           </div>
  243.           <div class="detail">
  244.             <div class="desc">
  245.               商品描述商品描述,商品描述商品描述,商品描述商品描述,
  246.             </div>
  247.             <div class="price">
  248.               <span class="iconfont icon-rmb"></span>
  249.               <span class="price-num">89</span>
  250.               <span class="num">45人已购买</span>n>
  251.             </div>
  252.           </div>
  253.         </div>
  254.         <div class="unit">
  255.           <div class="img">
  256.             <img src="images/items/item16.webp" alt="" />
  257.           </div>
  258.           <div class="detail">
  259.             <div class="desc">
  260.               商品描述商品描述,商品描述商品描述,商品描述商品描述,
  261.             </div>
  262.             <div class="price">
  263.               <span class="iconfont icon-rmb"></span>
  264.               <span class="price-num">89</span>
  265.               <span class="num">45人已购买</span>
  266.             </div>
  267.           </div>
  268.         </div>
  269.         <div class="unit">
  270.           <div class="img">
  271.             <img src="images/items/item17.webp" alt="" />
  272.           </div>
  273.           <div class="detail">
  274.             <div class="desc">
  275.               商品描述商品描述,商品描述商品描述,商品描述商品描述,
  276.             </div>
  277.             <div class="price">
  278.               <span class="iconfont icon-rmb"></span>
  279.               <span class="price-num">89</span>
  280.               <span class="num">45人已购买</span>
  281.             </div>
  282.           </div>
  283.         </div>
  284.         <div class="unit">
  285.           <div class="img">
  286.             <img src="images/items/item18.webp" alt="" />
  287.           </div>
  288.           <div class="detail">
  289.             <div class="desc">
  290.               商品描述商品描述,商品描述商品描述,商品描述商品描述,
  291.             </div>
  292.             <div class="price">
  293.               <span class="iconfont icon-rmb"></span>
  294.               <span class="price-num">89</span>
  295.               <span class="num">45人已购买</span>
  296.             </div>
  297.           </div>
  298.         </div>
  299.         <div class="unit">
  300.           <div class="img">
  301.             <img src="images/items/item19.webp" alt="" />
  302.           </div>
  303.           <div class="detail">
  304.             <div class="desc">
  305.               商品描述商品描述,商品描述商品描述,商品描述商品描述,
  306.             </div>
  307.             <div class="price">
  308.               <span class="iconfont icon-rmb"></span>
  309.               <span class="price-num">89</span>
  310.               <span class="num">45人已购买</span>
  311.             </div>
  312.           </div>
  313.         </div>
  314.         <div class="unit">
  315.           <div class="img">
  316.             <img src="images/items/item17.webp" alt="" />
  317.           </div>
  318.           <div class="detail">
  319.             <div class="desc">
  320.               商品描述商品描述,商品描述商品描述,商品描述商品描述,
  321.             </div>
  322.             <div class="price">
  323.               <span class="iconfont icon-rmb"></span>
  324.               <span class="price-num">89</span>
  325.               <span class="num">45人已购买</span>
  326.             </div>
  327.           </div>
  328.         </div>
  329.         <div class="unit">
  330.           <div class="img">
  331.             <img src="images/items/item18.webp" alt="" />
  332.           </div>
  333.           <div class="detail">
  334.             <div class="desc">
  335.               商品描述商品描述,商品描述商品描述,商品描述商品描述,
  336.             </div>
  337.             <div class="price">
  338.               <span class="iconfont icon-rmb"></span>
  339.               <span class="price-num">89</span>
  340.               <span class="num">45人已购买</span>
  341.             </div>
  342.           </div>
  343.         </div>
  344.         <div class="unit">
  345.           <div class="img">
  346.             <img src="images/items/item19.webp" alt="" />
  347.           </div>
  348.           <div class="detail">
  349.             <div class="desc">
  350.               商品描述商品描述,商品描述商品描述,商品描述商品描述,
  351.             </div>
  352.             <div class="price">
  353.               <span class="iconfont icon-rmb"></span>
  354.               <span class="price-num">89</span>
  355.               <span class="num">45人已购买</span>
  356.             </div>
  357.           </div>
  358.         </div>
  359.         <div class="unit">
  360.           <div class="img">
  361.             <img src="images/items/item20.webp" alt="" />
  362.           </div>
  363.           <div class="detail">
  364.             <div class="desc">
  365.               商品描述商品描述,商品描述商品描述,商品描述商品描述,
  366.             </div>
  367.             <div class="price">
  368.               <span class="iconfont icon-rmb"></span>
  369.               <span class="price-num">89</span>
  370.               <span class="num">45人已购买</span>
  371.             </div>
  372.           </div>
  373.         </div>
  374.       </div>
  375.     </main>
  376.     <!-- 底部 -->
  377.     <footer>
  378.       <div class="item active">
  379.         <a href="" class="iconfont icon-shejiaotubiao-44"></a>
  380.       </div>
  381.       <div class="item">
  382.         <a href="" class="iconfont icon-gouwuche"></a>
  383.         <a href="">购物车</a>
  384.       </div>
  385.       <div class="item">
  386.         <a href="" class="iconfont icon-wodetaobao"></a>
  387.         <a href="">我的淘宝</a>
  388.       </div>
  389.     </footer>
  390.   </body>
  391. </html>

CSS

footer.css

  1. footer {
  2.     width: 100vw;
  3.     height: 0.46rem;
  4.     background-color: #fff;
  5.     position: fixed;
  6.     bottom: 0;
  7.     left: 0;
  8.     right: 0;
  9.     display: grid;
  10.     grid-template-columns: repeat(3, 1fr);
  11.     place-items: center;
  12. }
  14. footer .item {
  15.     display: grid;
  16.     place-items: center;
  17. }
  19. footer .item .iconfont {
  20.     font-size: 0.2rem;
  21. }
  23. footer .item.active .iconfont {
  24.     font-size: 0.36rem;
  25.     color: coral;
  26. }

header.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. }
  34. /* 轮播图，用图片代替 */
  36. header .slider {
  37.     height: 1.25rem;
  38.     position: absolute;
  39.     top: 0.35rem;
  40. }
  42. header .slider img,
  43. header .nav img {
  44.     width: 100%;
  45.     height: 100%;
  46. }
  49. /* 导航组 */
  51. header .nav {
  52.     background-color: #fff;
  53.     position: absolute;
  54.     top: calc(0.35rem + 1.25rem);
  55.     display: grid;
  56.     grid-template-columns: repeat(5, 1fr);
  57.     font-size: 0.11rem;
  58.     padding: 0.2rem 0.1rem;
  59. }
  61. header .nav .item {
  62.     display: grid;
  63.     place-items: center;
  64.     padding: 0 0.05rem;
  65. }
  67. header .nav .item a {
  68.     padding: 0 0.05rem;
  69. }

main.css

  1. main {
  2.   position: relative;
  3.   top: calc(0.37rem + 1.25rem + 1.5rem);
  4.   padding: 0.1rem;
  5. }
  7. main img {
  8.   width: 100%;
  9.   height: 100%;
  10. }
  12. main .top {
  13.   background-color: #fff;
  14.   border-radius: 0.1rem;
  15.   min-height: 3rem;
  16.   /* 3行2列 */
  17.   display: grid;
  18.   grid-template-columns: repeat(2, 1fr);
  19.   gap: 0.1rem;
  20.   padding: 0.1rem;
  21. }
  23. /* 最后一行,跨2列 */
  25. main .top .item:last-of-type {
  26.   grid-column: span 2;
  27.   /* background-color: yellow; */
  28. }
  30. /* 左上角的聚划算 */
  32. main .top .item.jhs {
  33.   display: grid;
  34.   grid-template-columns: repeat(2, 1fr);
  35.   gap: 0.1rem;
  36. }
  38. main .top .item.jhs .box {
  39.   display: grid;
  40.   gap: 0.1rem;
  41. }
  43. main .top .item.jhs .box .desc {
  44.   display: grid;
  45.   background-color: rgb(243, 235, 236);
  46.   border-radius: 0.1rem;
  47.   padding: 0.1rem;
  48. }
  50. /* 右侧, 上下二组 */
  52. main .top .item.right {
  53.   display: grid;
  54.   gap: 0.1rem;
  55. }
  57. main .top .item.right .box {
  58.   display: grid;
  59. }
  61. main .top .item.right .box .title {
  62.   grid-column: span 2;
  63. }
  65. main .top .item.right .box .title .tag {
  66.   color: #fff;
  67.   font-weight: normal;
  68.   padding: 1px;
  69.   border-radius: 0.05rem;
  70.   font-size: smaller;
  71. }
  73. main .top .item.right .box .detail {
  74.   display: grid;
  75.   grid-template-columns: repeat(2, 1fr);
  76. }
  78. main .top .item.right .box .detail .left {
  79.   display: grid;
  80. }
  82. /* 底部公告 */
  84. main .item.footer {
  85.   display: grid;
  86.   grid-template-columns: 0.6rem 1fr;
  87.   padding: 0.1rem 0;
  88. }
  90. main .item.footer .type {
  91.   background-color: rgb(238, 202, 206);
  92.   color: darkorange;
  93.   padding: 2px 5px;
  94.   border-radius: 3px;
  95. }
  97. main .item.footer .title {
  98.   font-size: larger;
  99.   font-weight: bolder;
  100. }
  102. main .list {
  103.   display: grid;
  104.   grid-template-columns: repeat(2, 1fr);
  105.   gap: 0.1rem;
  106.   padding: 0.1rem 0 0.5rem 0;
  107. }
  109. main .list .title {
  110.   grid-column: span 2;
  111.   font-size: 0.15rem;
  112.   color: coral;
  113.   text-align: center;
  114. }
  115. main .list {
  116.   display: grid;
  117.   grid-template-columns: repeat(2, 1fr);
  118.   gap: 0.1rem;
  119.   padding: 0.1rem 0 0.5rem 0;
  120. }
  122. main .list .title {
  123.   grid-column: span 2;
  124.   font-size: 0.15rem;
  125.   color: coral;
  126.   text-align: center;
  127. }
  129. main .list .unit {
  130.   background-color: #fff;
  131.   border-radius: 0.1rem;
  132.   display: grid;
  133. }
  135. main .list .unit img {
  136.   border-radius: 0.1rem 0.1rem 0 0;
  137.   width: 100%;
  138.   height: 100%;
  139. }
  141. main .list .unit .detail {
  142.   padding: 0.1rem;
  143.   display: grid;
  144.   gap: 0.1rem;
  145. }
  147. main .list .unit .price .iconfont {
  148.   color: coral;
  149.   font-size: small;
  150. }
  151. main .list .unit .price .price-num {
  152.   font-size: large;
  153.   color: coral;
  154.   margin-right: 0.1rem;
  155. }
  156. main .list .unit .price .num {
  157.   color: #ccc;
  158. }

reset.css

  1. /* 样式重置 */
  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  10. /* 链接 */
  12. a {
  13.     text-decoration: none;
  14.     color: #555;
  15. }
  18. /* 列表 */
  20. li {
  21.     list-style: none;
  22. }
  24. :root {
  25.     font-size: calc(100vw / 3.75);
  26. }
  28. body {
  29.     font-size: 0.12rem;
  30.     color: #333;
  31.     max-width: 750px;
  32.     min-width: 320px;
  33.     margin: auto;
  34.     background-color: #f4f4f4;
  35. }
  37. @media screen and (max-width: 320px) {
  38.      :root {
  39.         font-size: 85px;
  40.     }
  41. }
  43. @media screen and (min-width: 640px) {
  44.      :root {
  45.         font-size: 170px;
  46.     }
  47. }

更多相关文章

  1. 淘宝移动端首页的商品列表
  2. 淘宝移动端首页的商品列表
  3. 移动布局原理、实战手机页面的基本整体架构页眉,页脚,主体。
  4. Android(安卓)四大组件 之 bindService流程
  5. 最强 Android(安卓)Studio 使用小技巧和快捷键总结
  6. android 简历 android 3年 上海.doc
  7. PHP危险函数禁用深入详解
  8. table 标签使用
  9. 图文列表与商品表的代码实现

随机推荐

  1. PHP中运用jQuery的Ajax跨域调用代码详解
  2. php array_chunk函数用法介绍（实例）
  3. php如何实现网页常见文件上传功能
  4. 学习PHP实现的曲线统计图表示例
  5. PHP filesize() 函数
  6. 基于PHP微信网页获取用户信息的实例分析
  7. 基于canvasJS在PHP中制作动态图表详解
  8. 一文读懂php设计模式之代理模式
  9. PHP下ajax跨域的解决方案之window.name实
  10. 解析PHP生成图表pChart的示例