Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 用flex弹性盒子仿一个淘宝手机端练习
Blogger Information
Blog 53
fans 3
comment 0
visits 46761
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
用flex弹性盒子仿一个淘宝手机端练习
emagic
Original
1258 people have browsed it

0624作业

仿一个网站（就拿手机淘宝练习一下，对标业界标杆）

源网站图片

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>flex弹性盒子布局仿站（淘宝）</title>
  7.     <link rel="stylesheet" href="static/css/iconfont.css" />
  8.     <link rel="stylesheet" href="simulator.css" />
  9.   </head>
  10.   <body>
  11.     <!-- 页眉 -->
  12.     <header>
  13.       <a href=""><img src="static/images/logo.png" alt="" /></a>
  14.       <input type="text" placeholder="寻找店铺宝贝" value="" />
  15.       <a href=""><span class="iconfont"></span></a>
  16.       <a href=""><span class="iconfont"></span></a>
  17.     </header>
  19.     <!-- 轮播广告图 -->
  20.     <section class="slider">
  21.       <img src="static/images/banner.jpg" alt="" />
  22.     </section>
  24.     <!-- 导航区 -->
  25.     <nav>
  26.       <div>
  27.         <!-- 注意，图片是可以点击的，所以要放到a标签里面去 -->
  28.         <a href=""><img src="static/images/nav1.png" alt="" /></a>
  29.         <a href="">天狗新品</a>
  30.       </div>
  31.       <div>
  32.         <!-- 注意，图片是可以点击的，所以要放到a标签里面去 -->
  33.         <a href=""><img src="static/images/nav2.png" alt="" /></a>
  34.         <a href="">今日爆款</a>
  35.       </div>
  36.       <div>
  37.         <!-- 注意，图片是可以点击的，所以要放到a标签里面去 -->
  38.         <a href=""><img src="static/images/nav3.png" alt="" /></a>
  39.         <a href="">天狗国际</a>
  40.       </div>
  41.       <div>
  42.         <!-- 注意，图片是可以点击的，所以要放到a标签里面去 -->
  43.         <a href=""><img src="static/images/nav4.png" alt="" /></a>
  44.         <a href="">流口水么</a>
  45.       </div>
  46.       <div>
  47.         <!-- 注意，图片是可以点击的，所以要放到a标签里面去 -->
  48.         <a href=""><img src="static/images/nav5.png" alt="" /></a>
  49.         <a href="">天狗超市</a>
  50.       </div>
  51.       <div>
  52.         <!-- 注意，图片是可以点击的，所以要放到a标签里面去 -->
  53.         <a href=""><img src="static/images/nav6.png" alt="" /></a>
  54.         <a href="">充值中心</a>
  55.       </div>
  56.       <div>
  57.         <!-- 注意，图片是可以点击的，所以要放到a标签里面去 -->
  58.         <a href=""><img src="static/images/nav7.png" alt="" /></a>
  59.         <a href="">机票酒店</a>
  60.       </div>
  61.       <div>
  62.         <!-- 注意，图片是可以点击的，所以要放到a标签里面去 -->
  63.         <a href=""><img src="static/images/nav8.png" alt="" /></a>
  64.         <a href="">金币矿场</a>
  65.       </div>
  66.       <div>
  67.         <!-- 注意，图片是可以点击的，所以要放到a标签里面去 -->
  68.         <a href=""><img src="static/images/nav9.png" alt="" /></a>
  69.         <a href="">阿狗拍卖</a>
  70.       </div>
  71.       <div>
  72.         <!-- 注意，图片是可以点击的，所以要放到a标签里面去 -->
  73.         <a href=""><img src="static/images/nav10.png" alt="" /></a>
  74.         <a href="">吃货品尝</a>
  75.       </div>
  76.     </nav>
  78.     <!-- 火爆商品区域 -->
  80.     <div class="hot-goods">
  81.       <div class="goods-img">
  82.         <h2>
  83.           聚划算
  84.         </h2>
  85.         <div class="list-goods">
  86.           <div>
  87.             <a href="">品牌折扣</a>
  88.             <a href=""><img src="static/images/sec1.webp" alt="" /></a>
  89.           </div>
  90.           <div>
  91.             <a href="">去抢福利</a>
  92.             <a href=""><img src="static/images/sec2.webp" alt="" /></a>
  93.           </div>
  94.         </div>
  95.       </div>
  96.       <div class="goods-img">
  97.         <h2>
  98.           有好货
  99.         </h2>
  100.         <div class="list-goods">
  101.           <div>
  102.             <a>全民口碑推荐</a>
  103.             <a href=""><img src="static/images/sec3.webp" alt="" /></a>
  104.           </div>
  105.           <div>
  106.             <a href="">        </a>
  107.             <a href=""><img src="static/images/sec4.webp" alt="" /></a>
  108.           </div>
  109.         </div>
  110.       </div>
  112.       <div class="goods-img">
  113.         <h2>
  114.           淘抢购
  115.         </h2>
  116.         <div class="list-goods">
  117.           <div>
  118.             <a href="">限时半价</a>
  119.             <a href=""><img src="static/images/sec5.webp" alt="" /></a>
  120.           </div>
  121.           <div>
  122.             <a href="">天天特卖</a>
  123.             <a href=""><img src="static/images/sec6.webp" alt="" /></a>
  124.           </div>
  125.         </div>
  126.       </div>
  127.       <div class="goods-img">
  128.         <h2>
  129.           狗狗直播
  130.         </h2>
  131.         <div class="list-goods">
  132.           <div>
  133.             <a href="">夏日满减</a>
  134.             <a href=""><img src="static/images/sec7.webp" alt="" /></a>
  135.           </div>
  136.           <div>
  137.             <a href="">        </a>
  138.             <a href=""><img src="static/images/sec8.webp" alt="" /></a>
  139.           </div>
  140.         </div>
  141.       </div>
  142.     </div>
  144.     <!-- 猜你喜欢 -->
  145.     <h2 class="iconfont maybelike">
  146.          你可能还喜欢   
  147.     </h2>
  148.     <div class="list-goods">
  149.       <div class="goods-desc">
  150.         <a href=""><img src="static/images/goods1.jpg_.webp" alt="" /></a>
  151.         <a href=""
  152.           >实木相框挂墙
  153.           <span class="iconfont hotboom" style="vertical-align: middle;"
  154.             ></span
  155.           >
  156.         </a>
  157.       </div>
  158.       <div class="goods-desc">
  159.         <a href=""><img src="static/images/goods2.jpg_.webp" alt="" /></a>
  160.         <a href=""
  161.           >啥地方感叹号挂墙
  162.           <span class="iconfont hotboom" style="vertical-align: middle;"
  163.             ></span
  164.           >
  165.         </a>
  166.       </div>
  167.       <div class="goods-desc">
  168.         <a href=""><img src="static/images/goods3.jpg_.webp" alt="" /></a>
  169.         <a href=""
  170.           >布艺沙发<span
  171.             class="iconfont hotboom"
  172.             style="vertical-align: middle;"
  173.             ></span
  174.           >
  175.         </a>
  176.       </div>
  177.       <div class="goods-desc">
  178.         <a href=""><img src="static/images/goods4.jpg_.webp" alt="" /></a>
  179.         <a href=""
  180.           >家具饰品<span
  181.             class="iconfont hotboom"
  182.             style="vertical-align: middle;"
  183.             ></span
  184.           >
  185.         </a>
  186.       </div>
  187.     </div>
  188.     <div class="apptop">
  189.       <!-- app和返回顶部 -->
  191.       <span class="iconfont"></span>
  192.       <span class="iconfont"></span>
  193.     </div>
  194.     <!-- 页脚 -->
  195.     <footer>
  196.       <a href="">
  197.         <!-- 因为图片是可以点进去的，所以要放入a标签内 -->
  198.         <span class="iconfont hotboom"></span>
  199.         <span>首页</span>
  200.       </a>
  202.       <a href="">
  203.         <span class="iconfont hotboom"></span>
  204.         <span>购物车</span>
  205.       </a>
  207.       <a href="">
  208.         <span class="iconfont hotboom"></span>
  209.         <span>消息</span>
  210.       </a>
  212.       <a href="">
  213.         <span class="iconfont hotboom"></span>
  214.         <span>订单列表</span>
  215.       </a>
  217.       <a href="">
  218.         <span class="iconfont hotboom"></span>
  219.         <span>我的淘宝</span>
  220.       </a>
  221.     </footer>
  222.   </body>
  223. </html>
  1. /* 样式初始化三板斧 */
  2. * {
  3.   padding: 0;
  4.   margin: 0;
  5.   box-sizing: border-box;
  6. }
  7. /* a链接初始化双雄 */
  8. a {
  9.   text-decoration: none;
  10.   color: #666;
  11. }
  12. /* html中要设置宽度自适应视口 */
  13. html {
  14.   /* vw：可视区宽度，100指的是100份 ，vh是可视区的高度*/
  15.   width: 100vw;
  16.   height: 100vh;
  17.   font-size: 15px;
  18.   color: #666;
  19. }
  21. body {
  22.   display: flex;
  23.   flex-flow: column nowrap;
  24.   min-width: 380px;
  25. }
  27. body > header {
  28.   /* 文本设置为白色 */
  29.   color: white;
  30.   background-color: orange;
  31.   height: 30px;
  32.   display: flex;
  33.   align-items: center;
  34.   justify-content: space-between;
  35.   /* 头部滚动条滚动的时候不要动 */
  36.   position: fixed;
  37.   /* 注意，固定定位后会缩回去，所以要设置一下宽度 */
  38.   width: 100vw;
  39.   padding: 10px;
  40. }
  42. body > header > a:first-of-type {
  43.   display: flex;
  44.   justify-content: center;
  45. }
  47. body > header > input {
  48.   border-radius: 5px;
  49.   margin: 0 2px;
  50.   cursor: pointer;
  51.   opacity: 0.8;
  52. }
  54. body > header span {
  55.   color: orangered;
  56. }
  58. .slider {
  59.   height: 180px;
  60. }
  62. section > img {
  63.   width: 100vw;
  64.   padding: 20px 0px;
  65. }
  67. /* 主导航区 */
  68. nav {
  69.   height: 150px;
  70.   /* margin-top: 3px; */
  71.   display: flex;
  72.   /* 允许换行，转为多行容器 */
  73.   flex-flow: row wrap;
  74.   align-content: space-around;
  75. }
  76. nav div {
  77.   /* 每排5个，一个就是20% */
  78.   width: 20vw;
  79.   display: flex;
  80.   flex-flow: column nowrap;
  81.   align-items: center;
  82. }
  84. /* 图片是第一个a标签 */
  85. nav > div > a:first-of-type {
  86.   text-align: center;
  87. }
  89. nav > div > a:last-of-type {
  90.   text-align: center;
  91.   font-size: 0.8rem;
  92. }
  94. nav > div img {
  95.   width: 75%;
  96. }
  98. /* 火爆商品区 */
  99. .hot-goods {
  100.   border: 2px solid lightgrey;
  101.   border-radius: 10px;
  102.   box-sizing: border-box;
  103.   /* border: radius 10px; */
  104.   margin: 3px 5px;
  105.   font-size: 0.8rem;
  106.   display: flex;
  107.   /* 水平多行容器 */
  108.   flex-flow: row wrap;
  109.   align-content: center;
  110.   padding: 10px;
  111. }
  113. .hot-goods .goods-img {
  114.   /* 每排2组，一个就是不到50% */
  115.   width: 45vw;
  116.   display: flex;
  117.   flex-flow: row wrap;
  118.   align-items: center;
  119.   /* padding: 15px; */
  120.   align-content: space-around;
  121. }
  123. .hot-goods > .goods-img > .list-goods {
  124.   display: flex;
  125.   flex-flow: row nowrap;
  126. }
  128. .goods-img > .list-goods > div > a > img {
  129.   width: 20vw;
  130. }
  132. /* 列表中每个项目的样式,加些间距 */
  133. .goods-img > .list-goods > div > a {
  134.   padding: 5px;
  135.   box-sizing: border-box;
  136. }
  138. .goods-img > .list-goods > div > a:first-of-type {
  139.   color: red;
  140.   font-size: 0.8rem;
  141. }
  142. /* .list-goods > div {
  143.   display: flex;
  144.   flex-flow: column nowrap;
  145. } */
  146. /* 你可能还喜欢 */
  147. .maybelike {
  148.   color: coral;
  149.   text-align: center;
  150. }
  152. /* 每个项目也转为flex */
  153. .list-goods > .goods-desc {
  154.   margin: 10px 0;
  155.   display: flex;
  156. }
  158. .list-goods .goods-desc {
  159.   width: 35vw;
  160.   display: flex;
  161.   flex-flow: row wrap;
  162.   align-items: center;
  163.   align-content: space-between;
  164. }
  166. .list-goods > .goods-desc img {
  167.   width: 100%;
  168. }
  170. /* 列表中每个项目的样式,加些间距 */
  171. .list-goods > .goods-desc > a {
  172.   padding: 10px;
  173.   box-sizing: border-box;
  174. }
  176. .list-goods > .goods-desc > a:last-of-type {
  177.   padding: 10px;
  178.   box-sizing: border-box;
  179.   color: #777;
  180. }
  182. .apptop {
  183.   position: fixed;
  184.   height: 70px;
  185.   width: 35px;
  186.   bottom: 150px;
  187.   right: 15px;
  188.   color: coral;
  189. }
  191. .apptop > span {
  192.   font-size: 1.8rem;
  193. }
  195. body > footer {
  196.   color: #666;
  197.   background-color: #efefef;
  198.   border-top: 1px solid #ccc;
  199.   height: 60px;
  200.   /* 页脚要固定显示，否则滚动下来就不见了 */
  201.   position: fixed;
  202.   bottom: 0;
  203.   width: 100vw;
  204.   display: flex;
  205.   justify-content: space-around;
  206.   /* 这里用space-evently也行 */
  207. }
  208. body > footer a {
  209.   margin-top: 5px;
  210.   /* font-size: 0.8rem; */
  211.   display: flex;
  212.   /* 垂直排列不换行 */
  213.   flex-flow: column nowrap;
  214.   /* 交叉轴项目居中显示 */
  215.   align-items: center;
  216. }
  217. body > footer a > span:first-of-type {
  218.   font-size: 1.5rem;
  219. }

效果图

小结

弹性盒子flex的嵌套要灵活掌握，另外就是主轴方向是垂直还是水平，分别对应着不同的效果和分布参数，要多练习，另外部分效果还没有仿出来

比如交界处的弧形效果暂时没搞明白，后续继续仿

如：

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