search

博客列表 >用flex弹性盒子仿一个淘宝手机端练习

用flex弹性盒子仿一个淘宝手机端练习

emagic
emagic原创
2020年06月28日 17:16:231257浏览

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的嵌套要灵活掌握，另外就是主轴方向是垂直还是水平，分别对应着不同的效果和分布参数，要多练习，另外部分效果还没有仿出来

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

如：

上一条：laravel--IM即时通讯--客服与客户一对一通讯下一条：PC 和移动端 flex 通用布局解决方案
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多