search

博客列表 >1.flex项目上的三个属性、2。移动商城

1.flex项目上的三个属性、2。移动商城

愿情的博客
愿情的博客原创
2021年03月30日 12:53:58509浏览

一.flex项目上的三个属性

  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.     <title>项目上的flex属性</title>
  8.     <style>
  9.       * {
  10.         box-sizing: ;
  11.       }
  12.       :foot {
  13.         font-size: 10px;
  14.       }
  16.       body {
  17.         font-size: 1.6rem;
  18.       }
  20.       /* flex容器 */
  21.       .container {
  22.         display: flex;
  23.         height: 20rem;
  24.         border: 1px solid black;
  25.       }
  27.       /* /项目样式： */
  28.       .container > .item {
  29.         width: 10rem;
  30.         /* max-width: 10rem; */
  31.         background-color: lightcyan;
  32.         border: 1px solid black;
  33.         /* 设置项目是否允许放大 */
  34.         /* flex-grow: 1; */
  35.         /* 设置项目是否允许收缩 */
  36.         /* flex-shrink: 0; */
  37.         /* 设置项目在主轴空间的大小 */
  38.         /* flex-basis: 15rem; */
  39.         /* max-width>flex-basis>width */
  40.         /* flex: 放大因子 收缩因子 计算大小; */
  41.         /* flex: 1 0 15rem; */
  42.       }
  43.       /* flex属性 */
  44.       .container .item {
  45.         /* flex:默认值，禁止放大，允许缩小。宽度自动 */
  46.         /* flex: 0 1 auto; */
  47.         /* flex: initial; */
  48.         /* 允许放大与收缩 */
  49.         /* flex: 1 1 auto; */
  50.         /* flex: auto; */
  51.         /* 完全失去弹性：禁止放大和收缩 ,用于pc端 */
  52.         /* flex: 0 0 auto; */
  53.         /* flex: none; */
  54.         /* 单值：仅表示是否放大 */
  55.         /* flex: 1; */
  56.         /* flex: auto; */
  58.         /* felx: 2; */
  59.         /* flex: 300; */
  60.         /*无任何效果 */
  61.       }
  63.       .container > .item:first-of-type {
  64.         background-color: yellow;
  65.         /* flex: 1 1 auto; */
  66.         flex: 1;
  67.       }
  68.       .container > .item:first-of-type + * {
  69.         background-color: green;
  70.         /* flex: 2 1 auto; */
  71.         flex: 2;
  72.       }
  73.       .container > .item:last-of-type {
  74.         background-color: orange;
  75.         /* flex: 1 1 auto; */
  76.         flex: 1;
  77.       }
  78.     </style>
  79.   </head>
  80.   <body>
  81.     <div class="container">
  82.       <div class="item">item1</div>
  83.       <div class="item">item2</div>
  84.       <div class="item">item3</div>
  85.       <!-- <div class="item">item4</div> -->
  86.     </div>
  87.   </body>
  88. </html>

align-self属性

  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.     <title>项目上的align-self属性</title>
  8.     <style>
  9.       * {
  10.         box-sizing: ;
  11.       }
  12.       :foot {
  13.         font-size: 10px;
  14.       }
  16.       body {
  17.         font-size: 1.6rem;
  18.       }
  20.       /* flex容器 */
  21.       .container {
  22.         display: flex;
  23.         height: 20rem;
  24.         border: 1px solid black;
  25.         /* 设置所有的项目在交叉轴上的对齐方式 */
  26.         /* align-items: ; */
  27.       }
  28.       .container > .item {
  29.         width: 10rem;
  30.         /* max-width: 10rem; */
  31.         background-color: lightcyan;
  32.         border: 1px solid black;
  33.       }
  35.       .item.three {
  36.         background-color: yellow;
  37.         align-self: stretch;
  38.         align-self: flex-end;
  39.         align-self: flex-start;
  40.         align-self: center;
  41.       }
  42.       .container {
  43.         position: relative;
  44.       }
  45.       .container > .item:nth-of-type(3) {
  46.         position: relative;
  47.         left: 5rem;
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <div class="container">
  53.       <div class="item">item1</div>
  54.       <div class="item">item2</div>
  55.       <div class="item three">item3</div>
  56.       <div class="item">item4</div>
  57.     </div>
  58.   </body>
  59. </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.     <title>项目上的align-self属性</title>
  8.     <style>
  9.       * {
  10.         box-sizing: ;
  11.       }
  12.       :foot {
  13.         font-size: 10px;
  14.       }
  16.       body {
  17.         font-size: 1.6rem;
  18.       }
  20.       /* flex容器 */
  21.       .container {
  22.         display: flex;
  23.         height: 20rem;
  24.         border: 1px solid black;
  25.       }
  27.       .container > .item {
  28.         width: 10rem;
  29.         /* max-width: 10rem; */
  30.         background-color: lightcyan;
  31.         border: 1px solid black;
  32.         order: 0;
  33.       }
  34.       .item.one {
  35.         background-color: teal;
  36.         order: 90;
  37.       }
  38.       .item.two {
  39.         background-color: thistle;
  40.       }
  41.       .item.three {
  42.         background-color: tomato;
  43.         order: -1;
  44.       }
  45.       .item.four {
  46.         background-color: turquoise;
  47.       }
  48.       /* order的值越小越靠前。越大越靠后 */
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <div class="container">
  53.       <div class="item one">item1</div>
  54.       <div class="item two">item2</div>
  55.       <div class="item three">item3</div>
  56.       <div class="item four">item4</div>
  57.     </div>
  58.   </body>
  59. </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.     <title>页眉+页脚+主导航+秒杀区+推荐商品列表区</title>
  8.     <link rel="stylesheet" href="static/icon-font/iconfont.css" />
  9.     <link rel="stylesheet" href="static/css/index.css" />
  10.     <link rel="stylesheet" href="static//css/header.css" />
  11.     <link rel="stylesheet" href="static/css/footer.css" />
  12.     <link rel="stylesheet" href="static/css/nav.css" />
  13.     <link rel="stylesheet" href="static/css/ms.css" />
  14.     <link rel="stylesheet" href="static/css/tj.css" />
  17.     <!-- <link rel="stylesheet" href="static/css/reset.css" /> -->
  18.   </head>
  19.   <body>
  20.     <div class="header">
  22.       <!-- 菜单 -->
  23.       <div class="menu iconfont icon-menu"></div>
  24.       <!-- 搜索框 -->
  25.       <div class="search">
  26.         <div class="logo">JD</div>
  27.         <div class="zoom iconfont icon-search"></div>
  28.         <input type="text" class="words" value="移动硬盘500g" />
  29.       </div>
  30.       <!-- 登录 -->
  31.       <a href="" class="login">登录</a>
  32.     </div>
  34.     <div class="main">
  36. <!-- 主导航 -->
  37. <ul class="nav">
  38.   <li>
  39.     <a href=""><img src="static/images/dh/nav-1.png" alt=""></a>
  40.     <a href="">京东超市</a>
  41.   </li>
  42.   <li>
  43.     <a href=""><img src="static/images/dh/nav-2.png" alt=""></a>
  44.     <a href="">数码电器</a>
  45.   </li>
  46.   <li>
  47.     <a href=""><img src="static/images/dh/nav-3.png" alt=""></a>
  48.     <a href="">京东服饰</a>
  49.   </li>
  50.   <li>
  51.     <a href=""><img src="static/images/dh/nav-4.png" alt=""></a>
  52.     <a href="">京东生鲜</a>
  53.   </li>
  54.   <li>
  55.     <a href=""><img src="static/images/dh/nav-5.png" alt=""></a>
  56.     <a href="">京东缴费</a>
  57.   </li>
  58.   <li>
  59.     <a href=""><img src="static/images/dh/nav-6.png" alt=""></a>
  60.     <a href="">充值缴费</a>
  61.   </li>
  62.   <li>
  63.     <a href=""><img src="static/images/dh/nav-7.png" alt=""></a>
  64.     <a href="">9.9元拼</a>
  65.   </li>
  66.   <li>
  67.     <a href=""><img src="static/images/dh/nav-8.png" alt=""></a>
  68.     <a href="">领卷</a>
  69.   </li>
  70.   <li>
  71.     <a href=""><img src="static/images/dh/nav-9.png" alt=""></a>
  72.     <a href="">领金贴</a>
  73.   </li>
  74.   <li>
  75.     <a href=""><img src="static/images/dh/nav-10.png" alt=""></a>
  76.     <a href="">PLUS会员</a>
  77.   </li>
  78. </ul>
  82. <div class="ms" >
  83.    <!-- 秒杀区    -->
  84.  <div class="ms-top">
  85.   <div class="left">
  86.     <div class="title">京东秒杀</div>
  87.     <div class="notice">
  88.       <div class="tips">20点专场</div>
  89.       <div class="time">20:00: 00</div>
  90.     </div>
  92.   </div>
  93.   <div class="right">更多秒杀</div>
  94.   </div>
  96.   <!-- 主体秒杀区 -->
  98. <ul class="ms-body">
  100. <li class="item">
  101. <a href=""><img src="static/images/ms/ms-3.jpg" alt=""></a>
  102. <div class="iconfont icon-rmb">338</div>
  103. <div class="iconfont icon-rmb">558</div>
  104. </li>
  106. <li class="item">
  107.  <a href=""><img src="static/images/ms/ms-3.jpg" alt=""></a>
  109.  <div class="iconfont icon-rmb">338</div>
  110.  <div class="iconfont icon-rmb">558</div>
  111.   </li>
  113.   <li class="item">
  114.    <a href=""><img src="static/images/ms/ms-3.jpg" alt=""></a>
  115.    <div class="iconfont icon-rmb">338</div>
  116.    <div class="iconfont icon-rmb">558</div>
  117.     </li>
  118.     <li class="item">
  119.      <a href=""><img src="static/images/ms/ms-4.jpg" alt=""></a>
  120.      <div class="iconfont icon-rmb">338</div>
  121.      <div class="iconfont icon-rmb">558</div>
  122.       </li>
  123.       </ul>
  124. </div>
  126. <!-- 推荐商品列表区 -->
  127. <ul class="tj">
  128.   <li class="item">
  129.     <a href=""><img src="static/images/sp/sp-1.webp" alt="" /></a>
  130.     <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  131.     <div class="price">
  132.       <div class="iconfont icon-rmb">138</div>
  133.       <!-- <div>满减</div> -->
  134.       <div>看相似</div>
  135.     </div>
  136.   </li>
  137.   <li class="item">
  138.     <a href=""><img src="static/images/sp/sp-2.webp" alt="" /></a>
  139.     <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍
  141.     </p>
  142.     <div class="price">
  143.       <div class="iconfont icon-rmb">203</div>
  144.       <!-- <div>满减</div> -->
  145.       <div>看相似</div>
  146.     </div>
  147.   </li>
  148.   <li class="item">
  149.     <a href=""><img src="static/images/sp/sp-3.webp" alt="" /></a>
  150.     <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  151.     <div class="price">
  152.       <div class="iconfont icon-rmb">203</div>
  153.       <!-- <div>满减</div> -->
  154.       <div>看相似</div>
  155.     </div>
  156.   </li>
  157.   <li class="item">
  158.     <a href=""><img src="static/images/sp/sp-4.webp" alt="" /></a>
  159.     <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  160.     <div class="price">
  161.       <div class="iconfont icon-rmb">203</div>
  162.       <!-- <div>满减</div> -->
  163.       <div>看相似</div>
  164.     </div>
  165.   </li>
  166.   <li class="item">
  167.     <a href=""><img src="static/images/sp/sp-5.webp" alt="" /></a>
  168.     <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  169.     <div class="price">
  170.       <div class="iconfont icon-rmb">203</div>
  171.       <!-- <div>满减</div> -->
  172.       <div>看相似</div>
  173.     </div>
  174.   </li>
  175.   <li class="item">
  176.     <a href=""><img src="static/images/sp/sp-6.webp" alt="" /></a>
  177.     <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  178.     <div class="price">
  179.       <div class="iconfont icon-rmb">203</div>
  180.       <!-- <div>满减</div> -->
  181.       <div>看相似</div>
  182.     </div>
  183.   </li>
  185. </ul>
  188. </div>
  190.     <div class="footer">
  191.       <div>
  192.         <div class="iconfont icon-home"></div>
  193.         <span>首页</span>
  194.       </div>
  195.       <div>
  196.         <div class="iconfont icon-home"></div>
  197.         <span>分类</span>
  198.       </div>
  199.       <div>
  200.         <div class="iconfont icon-home"></div>
  201.         <span>惊喜<span>
  202.       </div>
  203.       <div>
  204.         <div class="iconfont icon-home"></div>
  205.         <span>购物车</span>
  206.       </div>
  207.       <div>
  208.         <div class="iconfont icon-home"></div>
  209.         <span>未登录</span>
  210.       </div>
  211.     </div>
  212.   </body>
  213. </html>
上一条：php facade与composer的使用下一条：遇见目录无法访问怎么解决？
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多