移动端布局知识点

序号名称描述
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>        
  150.         </div>
  151.         <div class="bottom">
  152.             <div class="context">
  153.                 <span style="font-size: 0.2rem; font-weight:0.5rem;margin:0.1rem;">淘宝头条</span>
  154.                 <span><em style="background-color: coral;color: aliceblue;font-size: normal;border-radius: 0.05rem;padding: auto;margin: auto;">摄影</em>摄影xxxxxxx</span>
  155.             </div>
  156.         </div>
  158.     </main>
  159.     <footer>
  160.         <div class="item active">
  161.             <a href="" class="iconfont icon-shejiaotubiao-44"></a>
  162.         </div>
  163.         <div class="item">
  164.             <a href="" class="iconfont icon-gouwuche"></a>
  165.             <a href="">购物车</a>
  166.         </div>
  167.         <div class="item">
  168.             <a href="" class="iconfont icon-wodetaobao"></a>
  169.             <a href="">我的淘宝</a>
  170.         </div>
  171.     </footer>
  172. </body>
  173. </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:auto;
  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. }
  158. main  .bottom {
  159.     margin: auto;
  160.     position: relative;
  161.     top:7.03rem;
  162.     background-color: #fff;
  163.     width: 100%;
  164.     height: 0.42rem;
  165.     border-radius: 0 0 0.1rem 0.1rem;
  166. }
  167. main  .bottom .context{
  168.     display: flex;
  169.     place-content: start;
  170.     place-items: center;
  171. }

效果：

更多相关文章

  1. 移动端布局思路与三种视口的关系 ,仿淘宝首页基本布局
  2. Android(安卓)仿淘宝广告条滚动
  3. 安卓 跳转淘宝、京东app,并打开商品详情页
  4. 关于android的webview打开淘宝天猫链接问题
  5. 淘宝 NPM 镜像站切换新域名啦
  6. 开发提效小技巧分享（一）
  7. android 仿淘宝的加载刷新效果
  8. 淘宝 NPM 镜像站切换新域名啦(转载)
  9. 基于Android的淘宝网手机客户端开发见解(配完整视频教程讲解)

随机推荐

  1. 在android studio 2.1 实现简单的ndk
  2. Android(安卓)liveData 和ViewModel 使用
  3. android万能驱动制作方法
  4. Android从文件目录中写入和读取图片
  5. Android 电话的反射调用机制实现静默接听
  6. android Intent用法归纳
  7. 我使用过的 控件的一些特性（layout_weight
  8. 2011.09.21——— android 动态壁纸开发
  9. RubyMotion 3发布，支持Android和WatchKit
  10. Android访问本地服务器（localhost）的解决方