Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 使用position、flex弹性盒子仿写京东移动端
Blogger Information
Blog 37
fans 1
comment 0
visits 32625
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
使用position、flex弹性盒子仿写京东移动端
Jason Pu?
Original
745 people have browsed it

前言

经过一段时间的学习，掌握了盒子模型，弹性盒子的知识，为了验证成果，我使用前面学习到的知识来做一个仿写京东移动端的页面，主要仿写了页眉，页脚，导航，秒杀四个区块的内容

思路及心得：

1.header页眉及footer页脚可以使用position:fixed固定定位。
2.maion主体使用position:absolute实现定位，top:header的高度，bottom：footer的高度，right:0,lift:0，实现三大区块相互独立，互不相犯。
3.内部小组件使用flex弹性盒子实现

容易忽略的知识点：

flex属性:
flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto;
第一个值是：放大比例，默认为0，即如果存在剩余空间，也不放大。
第二个值是：缩小比例，默认为1，即如果空间不足，该项目将缩小。
第三个值是：项目占据的主轴空间

项目成果：

HTML代码：

  1.  <title>JD手机端</title>
  2.     <link rel="stylesheet" href="jdicon/iconfont.css">
  3.     <link rel="stylesheet" href="css/index.css">
  4. </head>
  5. <body>
  6.     <!-- 页眉 -->
  7.     <div class="header">
  8.         <!-- 三条杠： -->
  9.         <span class="iconfont icon-daohang"></span>
  10.         <!-- 搜索框 -->
  11.         <div class="searchbar">
  12.             <p class="jd">JD</p>
  13.             <span class="iconfont icon-fangdajing"></span>
  14.             <input type="text" class="search_input" value="罗技鼠标">
  15.         </div>
  16.         <div class="login">登录</div>
  17.     </div>
  19.     <!-- 主体： -->
  20.     <div class="main">
  21.         <!-- 导航区 -->
  22.         <div class="nav">
  23.             <div class="nav_items">
  24.                 <img src="jdimg/jdnav1.png" alt="">
  25.                 <p>京东超市</p>
  26.             </div>
  27.             <div class="nav_items">
  28.                 <img src="jdimg/jdnav2.png" alt="">
  29.                 <p>数码电器</p>
  30.             </div>
  31.             <div class="nav_items">
  32.                 <img src="jdimg/jdnav3.png" alt="">
  33.                 <p>京东服饰</p>
  34.             </div>
  35.             <div class="nav_items">
  36.                 <img src="jdimg/jdnav4.png" alt="">
  37.                 <p>京东生鲜</p>
  38.             </div>
  39.             <div class="nav_items">
  40.                 <img src="jdimg/jdnav5.png" alt="">
  41.                 <p>京东到家</p>
  42.             </div>
  43.             <div class="nav_items">
  44.                 <img src="jdimg/jdnav6.png" alt="">
  45.                 <p>充值缴费</p>
  46.             </div>
  47.             <div class="nav_items">
  48.                 <img src="jdimg/jdnav7.png" alt="">
  49.                 <p>9.9元拼</p>
  50.             </div>
  51.             <div class="nav_items">
  52.                 <img src="jdimg/jdnav8.png" alt="">
  53.                 <p>领券</p>
  54.             </div>
  55.             <div class="nav_items">
  56.                 <img src="jdimg/jdnav9.png" alt="">
  57.                 <p>领金贴</p>
  58.             </div>
  59.             <div class="nav_items">
  60.                 <img src="jdimg/jdnav10.png" alt="">
  61.                 <p>PLUS会员</p>
  62.             </div>
  63.         </div>
  64.         <!-- 秒杀区  -->
  65.         <div class="ms">
  66.             <div class="msbar">
  67.                 <div class="msslogon">京东秒杀</div>
  68.                 <div class="notice">
  69.                     <div class="mstime">10点场</div>
  70.                     <div class="msreverstime">00</div>
  71.                     <span>:</span>
  72.                     <div class="msreverstime">00</div>
  73.                     <span>:</span>
  74.                     <div class="msreverstime">00</div>
  75.                 </div>
  76.                 <div class="morems">更多秒杀</div>
  77.             </div>
  78.             <div class="msbody">
  79.                 <div class="content">
  80.                     <img src="jdimg/jdms1.jpg" alt="">
  81.                     <div class="newprice">¥100</div>
  82.                     <div class="oldprice">¥199</div>
  83.                 </div>
  84.                 <div class="content">
  85.                     <img src="jdimg/jdms2.jpg" alt="">
  86.                     <div class="newprice">¥100</div>
  87.                     <div class="oldprice">¥199</div>
  88.                 </div>
  89.                 <div class="content">
  90.                     <img src="jdimg/jdms3.jpg" alt="">
  91.                     <div class="newprice">¥100</div>
  92.                     <div class="oldprice">¥199</div>
  93.                 </div>
  94.                 <div class="content">
  95.                     <img src="jdimg/jdms4.jpg" alt="">
  96.                     <div class="newprice">¥100</div>
  97.                     <div class="oldprice">¥199</div>
  98.                 </div>
  99.             </div>
  101.         </div>
  104.     </div>
  109.     <!-- 页脚 -->
  110.     <div class="footer">
  111.         <div id="fist">
  112.             <span class="iconfont icon-shouye"></span>
  113.             <p>首页</p>
  114.         </div>
  115.         <div>
  116.             <span class="iconfont icon-leimupinleifenleileibie2"></span>
  117.             <p>分类</p>
  118.         </div>
  119.         <div>
  120.             <span class="iconfont icon-jingxi"></span>
  121.             <p>京喜</p>
  122.         </div>
  123.         <div>
  124.             <span class="iconfont icon-gouwucheman"></span>
  125.             <p>购物车</p>
  126.         </div>
  127.         <div>
  128.             <span class="iconfont icon-denglu"></span>
  129.             <p>未登陆</p>
  130.         </div>
  131.     </div>
  133. </body>

CSS代码：

  1. @import 'reset.css';
  2. /* 页眉部分开始 */
  3. .header{
  4.     width: 100%;
  5.     height: 4.5rem;
  6.     color:#fff;
  7.     background-color: #E43130;
  8.     position: fixed;
  9.     top: 0;
  10.     font-size: 1.4rem;
  11.     display: flex;
  12.     align-items: center;
  13.     z-index: 100;
  15. }
  16. /* 搜索框整体 */
  17. .header .searchbar{
  18.     flex:6;
  19.     text-align: center;
  20.     display:flex;
  21.     justify-content: flex-start;
  22.     border-radius: 3rem;
  23.     background-color: #fff;
  24.     padding: 0.5rem;
  25. }
  26. /* 三条杠： */
  27. .header .icon-daohang{
  28.     font-size: 2.5rem;
  29.     flex:1;
  30.     flex: 0 1 4rem;
  31.     text-align: center;
  32. }
  33. /* JD */
  34. .header .searchbar .jd{
  35.     font-size: 2rem;
  36.     color: #E43130;
  37.     flex: 0 1 4rem;
  38.     line-height: 2rem;
  39.     text-align: center;  
  40. }
  41. /* 放大镜 */
  42. .header .searchbar .icon-fangdajing{
  43.     font-size: 1.8rem;
  44.     color:gray;
  45.     text-align: center;
  46.     border-left: 1px solid gray;
  47.     flex: 0 1 4rem;
  48.     line-height: 1.8rem;
  49. }
  50. /* 输入框 */
  51. .header .searchbar .search_input {
  52.     outline: none;
  53.     flex: auto;
  54.     border:none;
  55.     color: gray;
  56. }
  58. /* 登录 */
  59. .header .login{
  60.     flex:1;
  61.     text-align: center;
  62. }
  63. /* 页眉部分结束 */
  65. /* 主体部分开始： */
  66. .main{
  67.     position: absolute;
  68.     top:4.5rem;
  69.     bottom:4.5rem;
  70.     left: 0;
  71.     right: 0;
  72.     font-size:1.4rem;
  73. }
  75. /* 导航区开始 */
  76. .main .nav{
  77.     padding-top:1rem;
  78.     display: flex;
  79.     flex-flow: row wrap;
  80.     align-content: space-between;
  82. }
  83. .main .nav img{
  84.     width:4rem;
  85.     height: 4rem;
  86. }
  87. .main .nav .nav_items{
  88.     flex: 1 1 20%;
  89.     text-align: center;
  90. }
  91. .main .nav .nav_items p{
  92.     color:gray;
  93.     font-size: 1rem;
  94. }
  96. /* 导航区结束 */
  98. /* 秒杀活动开始 */
  99. .main .ms{
  100.     padding:1rem;
  101.     margin: 0.1rem 0;
  102. }
  103. .main .ms .msbar {
  104.     display:flex;
  105.     justify-content: space-between;
  106.     align-items: center;
  107.     height: 3rem;
  108. }
  110. .main .ms .msbar .morems {
  111.     font-size:1.5rem;
  112.     color:#FB3522;
  113. }
  114. .main .ms .msbar .msslogon {
  115.     font-size: 1.6rem;
  116. }
  117. .main .ms .msbar .notice{
  118.     display: flex;
  119.     line-height: 2rem;
  120.     text-align: center;
  121. }
  122. .main .ms .msbar .notice .time{
  123.     font-size:1.5rem;
  124. }
  125. .main .ms .msbar .notice .msreverstime{
  126.     background-color: #E43130;
  127.     color:white;
  128.     border-radius: 0.5rem;
  129. }
  130. /* 秒杀展示主体开始 */
  132. .main .ms .msbody {
  133.     display: flex;
  134.     justify-content:space-between;
  135. }
  136. .main .ms .msbody .content{
  137.     text-align: center;
  138. }
  139. .main .ms .msbody .content img{
  140.    width:calc( 25vw - 1rem );
  141. }
  142. .main .ms .msbody .content .newprice {
  143.     color:#E43130;
  144.     font-size: 1.5rem;
  145. }
  146. .main .ms .msbody .content .oldprice{
  147.     color:gray;
  148.     text-decoration: line-through;
  149. }
  151. /* 秒杀展示主体结束 */
  154. /* 秒杀活动结束 */
  156. /* 主体部分结束： */
  159. /* 页脚部分开始 */
  160. .footer{
  161.     width: 100%;
  162.     height: 4.5rem;
  163.     background-color: #fff;
  164.     position: fixed;
  165.     bottom: 0;
  166.     display: flex;
  167.     justify-content: space-around;
  168.     align-items: center;
  169.     text-align: center;
  170. }
  172. .footer > div > .iconfont {
  173.     font-size: 2.5rem;
  174.     color:#8B8B8B;
  175. }
  177. .footer > div > p {
  178.     font-size: 1rem;
  179.     color:#8B8B8B;
  181. }
  182. /* 页脚部分结束 */
Correcting teacher：天蓬老师天蓬老师

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