Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML 学习
Blogger Information
Blog 12
fans 0
comment 0
visits 5449
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
HTML 学习
。。。
Original
619 people have browsed it

HTML 学习

移动布局原理

1. 重要术语

(1) 术语

序号 名称 描述
1 像素 图像显示最小单位,PPI(像素分辨率)
2 DPR 设备像素比 = 设备像素 / 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" />

序号 属性值 描述
1 width=device-width 布局视图 = 视觉视图
2 initial-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 总结

序号 属性值 描述
1 1vw = 3.75px 以iPhone6/11屏幕宽度为基准
2 1rem = 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. }
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