qidao123.com技术社区-IT企服评测·应用市场»论坛 › 数据库 › 分布式数据库 › [CSS3]Flex布局

[CSS3]Flex布局

[复制链接]
发表于 2025-5-25 16:37:19 | 显示全部楼层 |阅读模式
 

Flex布局

能够使用Flex布局模型灵活、快速的开辟网页

  • 是一种浏览器提倡的布局模型
  • 布局网页更简单、灵活
  • 避免浮动脱标的题目
  • 手机端放心用, pc端ie低版本不兼容
  • 技术兼容性查询网站: Can I use... Support tables for HTML5, CSS3, etc


Flex底子概念

  • 基于 Flex 精确灵活控制块级盒子的布局方式, 避免浮动布局中离开文档流现象发生
  • Flex布局非常适合布局化布局
  • 在父盒子(必须是亲爹)身上添加 display:flex; 就会开启flex布局
  • 构成部分


  • 弹性容器
  • 弹性盒子
  • 主轴
  • 侧轴/交叉轴



开启Flex布局
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>体验flex布局</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         .box {
  16.             /* 视觉效果: 子级在一行水平排列 */
  17.             /* 水平排列的原因: 默认主轴在水平方向, 弹性盒子都是沿着主轴排列 */
  18.             display: flex;
  19.             height: 200px;
  20.             border: 1px solid #000;
  21.         }
  23.         .box div {
  24.             width: 100px;
  25.             height: 100px;
  26.             background-color: pink;
  27.         }
  28.     </style>
  29. </head>
  31. <body>
  32.     <div class="box">
  33.         <div>1</div>
  34.         <div>2</div>
  35.         <div>3</div>
  36.     </div>
  37. </body>
  39. </html>v
复制代码


使用justify-content调治元素在主轴的对齐方式

  • 通过调解主轴的对其方式可以设置弹性盒子之间的间距

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>主轴对齐方式</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         .box {
  16.             display: flex;
  18.             /* 沿主轴居中排列 */
  19.             justify-content: center;
  21.             /* 空白在子集之间(两侧没有) */
  22.             justify-content: space-between;
  24.             /* 所有盒子的间距都相等 */
  25.             justify-content: space-evenly;
  27.             /* 间距加在子级的两侧 */
  28.             /* 视觉效果: 子集之间的空白是两侧空白的2倍 */
  29.             justify-content: space-around;
  31.             height: 200px;
  32.             margin: auto;
  33.             border: 1px solid #000;
  34.         }
  36.         .box div {
  37.             width: 100px;
  38.             height: 100px;
  39.             background-color: pink;
  40.         }
  41.     </style>
  42. </head>
  44. <body>
  45.     <div class="box">
  46.         <div>1</div>
  47.         <div>2</div>
  48.         <div>3</div>
  49.     </div>
  50. </body>
  52. </html>
复制代码






使用align-items调治元素在侧轴的对齐方式

  • 通过调解侧轴的对其方式设置弹性盒子之间的间距
  • 修改侧轴对齐方式的两种方法:


  • align-items (添加到弹性容器)(添加给父元素---控制全部儿子)
  • align-self (添加到弹性盒子 )(添加到儿子身上---控制某个子集)

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>侧轴对齐方式</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         .box {
  16.             display: flex;
  18.             /* 拉伸,默认值(子集不能设置高度, 否则不拉伸) */
  19.             /* 显示效果: 子集拉伸至撑满父盒子 */
  20.             align-items: stretch;
  22.             /* 居中 */
  23.             /* 由于子集没设置宽高, 就是内容的宽高 */
  24.             /* 没有拉伸效果, 是因覆盖了stretch默认值 */
  25.             align-items: center;
  28.             height: 300px;
  29.             margin: auto;
  30.             border: 1px solid #000;
  31.         }
  33.         .box div {
  34.             /*
  35.               flex布局下, 如果子集设置了宽高, 以设置的值为准
  36.               如果没有设置宽高, 默认会存在拉伸效果
  37.             */
  38.             /* width: 100px; */
  39.             /* height: 100px; */
  40.             background-color: pink;
  41.         }
  43.         /* 单独设置某个弹性盒子的侧轴对齐方式 */
  44.         .box div:nth-child(2) {
  45.             align-self: self-start;
  46.         }
  47.     </style>
  48. </head>
  50. <body>
  51.     <div class="box">
  52.         <div>1111</div>
  53.         <div>2</div>
  54.         <div>3</div>
  55.     </div>
  56. </body>
  58. </html>
复制代码





使用flex属性修改弹性盒子伸缩比

  • 通过修改弹性盒子的伸缩比控制子集的尺寸
  • flex: 值; (取值为整数, 体现占用父级剩余尺寸的比例)
  • 属性要添加给儿子
4. 代码示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         .box {
  16.             display: flex;
  18.             height: 300px;
  19.             border: 1px solid #000;
  20.         }
  22.         .box div {
  23.             height: 200px;
  24.             margin: 0 20px;
  25.             background-color: pink;
  26.         }
  28.         .box div:nth-child(1) {
  29.             width: 50px;
  30.         }
  32.         .box div:nth-child(2) {
  33.             /* 占用父级剩余尺寸的份数 */
  34.             flex: 2;
  35.         }
  37.         .box div:nth-child(3) {
  38.             flex: 1;
  39.         }
  40.     </style>
  41. </head>
  43. <body>
  44.     <div class="box">
  45.         <div>1</div>
  46.         <div>2</div>
  47.         <div>3</div>
  48.     </div>
  49. </body>
  51. </html>
复制代码



使用flex-direction改变元素分列方向

  • 思考: Flex布局模型中，弹性盒子默认沿着哪个方向分列?
  • 答: 水平方向, 由于主轴默认是水平方向，侧轴默认是垂直方向
  • 思考: 怎样实现内容垂直分列 ? 答: 修改主轴方向
  • 修改主轴方向属性: flex-direction


  • 示例代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>主轴方向</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         li {
  16.             list-style: none;
  17.         }
  19.         .box li {
  20.             display: flex;
  21.             /* 1. 先确定主轴方向; 2. 再选择对应的属性实现主轴或侧轴的对齐方式 */
  22.             /* 修改主轴方向: 列 */
  23.             flex-direction: column;
  25.             /* 视觉效果: 实现元素水平居中 */
  26.             align-items: center;
  28.             /* 视觉效果: 实现元素垂直居中 */
  29.             justify-content: center;
  32.             width: 80px;
  33.             height: 80px;
  34.             border: 1px solid #ccc;
  35.         }
  37.         .box img {
  38.             width: 32px;
  39.             height: 32px;
  40.         }
  41.     </style>
  42. </head>
  44. <body>
  45.     <div class="box">
  46.         <ul>
  47.             <li>
  48.                 <img src="./images/media.png" alt="">
  49.                 <span>媒体</span>
  50.             </li>
  51.         </ul>
  52.     </div>
  53. </body>
  55. </html>
复制代码


使用flex-wrap实现弹性盒子多行分列结果

  • 思考: 默认环境下，多个弹性盒子怎样显示 ?
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性盒子换行</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         .box {
  16.             /* 了解flex布局下, 多行内容的默认展示效果 */
  17.             display: flex;
  18.             height: 500px;
  19.             border: 1px solid #000;
  20.         }
  22.         .box div {
  23.             /* flex布局模型下 */
  24.             /* 元素的尺寸没有超过父元素, 按设置的尺寸展示  */
  25.             /* 元素的尺寸超过父元素, 默认不会换行, 而是压缩子元素, 直到不超过父元素  */
  26.             /* 这就是弹性盒子的特点 */
  27.             width: 100px;
  28.             height: 100px;
  29.             background-color: pink;
  30.         }
  31.     </style>
  32. </head>
  34. <body>
  35.     <div class="box">
  36.         <div>1</div>
  37.         <div>2</div>
  38.         <div>3</div>
  39.         <div>4</div>
  40.         <div>5</div>
  41.         <div>6</div>
  42.         <div>7</div>
  43.         <div>8</div>
  44.     </div>
  45. </body>
  47. </html>
复制代码


  • 弹性盒子换行显示: flex-wrap:wrap;
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性盒子换行</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         .box {
  16.             display: flex;
  18.             /* 默认值, 不换行 */
  19.             /* flex-wrap: nowrap; */
  20.          
  21.             /* 让弹性盒子换行 */
  22.             flex-wrap: wrap;
  24.             height: 500px;
  25.             border: 1px solid #000;
  26.         }
  28.         .box div {
  29.             width: 100px;
  30.             height: 100px;
  31.             background-color: pink;
  32.             border: 2px solid green;
  33.         }
  34.     </style>
  35. </head>
  37. <body>
  38.     <div class="box">
  39.         <div>1</div>
  40.         <div>2</div>
  41.         <div>3</div>
  42.         <div>4</div>
  43.         <div>5</div>
  44.         <div>6</div>
  45.         <div>7</div>
  46.         <div>8</div>
  47.     </div>
  48. </body>
  50. </html>
复制代码


调解行对齐方式: align-content

  • 调解换行后, 行的布局(针对换行的盒子)
  • 取值与justify-content基本相同
  • 示例代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性盒子换行</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         .box {
  16.             display: flex;
  17.             flex-wrap: wrap;
  19.             /* 调节行对齐方式 */
  20.             align-content: center;
  21.             /* align-content: space-around; */
  22.             /* align-content: space-between; */
  24.             height: 500px;
  25.             border: 1px solid #000;
  26.         }
  28.         .box div {
  29.             width: 100px;
  30.             height: 100px;
  31.             background-color: pink;
  32.             border: 2px solid green;
  33.         }
  34.     </style>
  35. </head>
  37. <body>
  38.     <div class="box">
  39.         <div>1</div>
  40.         <div>2</div>
  41.         <div>3</div>
  42.         <div>4</div>
  43.         <div>5</div>
  44.         <div>6</div>
  45.         <div>7</div>
  46.         <div>8</div>
  47.     </div>
  48. </body>
  50. </html>
复制代码


弹性盒子特点

  • 设置宽高就是宽高的尺寸, 不设置宽高就由内容撑起宽高,
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     .box {
  10.       background-color: pink;
  11.       display: flex;
  13.       span {
  14.         /* width: 20px; */
  15.         /* height: 20px; */
  16.         background-color: aquamarine;
  17.       }
  18.     }
  19.   </style>
  20. </head>
  22. <body>
  23.   <div class="box">
  24.     <span>1</span>
  25.     <span>2</span>
  26.     <span>3</span>
  27.     <span>4</span>
  28.   </div>
  29. </body>
  31. </html>
复制代码


  • 侧轴设置了主动拉伸并没有设置高度时,会撑满父级
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     .box {
  10.       display: flex;
  11.       background-color: pink;
  12.       height: 500px;
  14.       span {
  15.         /* 自动拉伸 */
  16.         flex: 1;
  17.         /* 如果设置高度, 以设置的为准, 不设置高度, 就撑满父盒子 */
  18.         /* height: 50px; */
  19.         background-color: aquamarine;
  20.       }
  21.     }
  22.   </style>
  23. </head>
  25. <body>
  26.   <div class="box">
  27.     <span>1</span>
  28.     <span>2</span>
  29.     <span>3</span>
  30.     <span>4</span>
  31.   </div>
  32. </body>
  34. </html>
复制代码


  • 行内元素设置宽高也可以生效
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     .box {
  10.       background-color: pink;
  11.       display: flex;
  13.       span {
  14.         margin: 10px;
  15.         padding: 10px;
  16.         width: 50px;
  17.         height: 50px;
  18.         background-color: aquamarine;
  19.       }
  20.     }
  21.   </style>
  22. </head>
  24. <body>
  25.   <div class="box">
  26.     <span>1</span>
  27.     <span>2</span>
  28.     <span>3</span>
  29.     <span>4</span>
  30.   </div>
  31. </body>
  33. </html>
复制代码

小兔鲜-订单页

准备环境

新建orders.html作为页面, 引入字体图标文件, base.css用于扫除默认样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>确认订单</title>
  9.     <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
  10.     <link rel="stylesheet" href="./css/base.css">
  11.     <link rel="stylesheet" href="./css/orders.css">
  12. </head>
  14. <body>
  16. </body>
  18. </html>
复制代码
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. body {
  7.   font: 16px/1.5 sans-serif;
  8.   color: #333;
  9.   background-color: #fff;
  10. }
  11. li {
  12.   list-style: none;
  13. }
  14. em,
  15. i {
  16.   font-style: normal;
  17. }
  18. a {
  19.   text-decoration: none;
  20.   color: #333;
  21. }
  22. a:hover {
  23.   color: #5eb69c;
  24. }
  25. img {
  26.   width: 100%;
  27.   vertical-align: middle;
  28. }
  29. input {
  30.   padding: 0;
  31.   border: none;
  32.   outline: none;
  33.   color: #333;
  34. }
  35. button {
  36.   cursor: pointer;
  37. }
  38. /* 清除浮动 */
  39. .clearfix:before,
  40. .clearfix:after {
  41.   content: '';
  42.   display: table;
  43. }
  44. .clearfix:after {
  45.   clear: both;
  46. }
  47. .clearfix {
  48.   *zoom: 1;
  49. }
复制代码

使用像素大厨, 打开移动端设计稿, 调解到2倍图模式, 用于测量尺寸

团体布局

主体内容从上往下, 付出按钮固定在页面底部
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>确认订单</title>
  9.     <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
  10.     <link rel="stylesheet" href="./css/base.css">
  11.     <link rel="stylesheet" href="./css/orders.css">
  12. </head>
  14. <body>
  15.     <!-- 主体内容: 滑动查看 -->
  16.     <div class="main">
  17.         1
  18.     </div>
  19.     <!-- 主体内容: 滑动查看 -->
  21.     <!-- 底部支付: 固定定位 -->
  22.     <div class="pay">
  23.         2
  24.     </div>
  25.     <!-- 底部支付: 固定定位 -->
  26. </body>
  28. </html>
复制代码
  1. body {
  2.     background-color: #f7f7f8;
  3. }
  6. /* 主体内容 */
  7. .main {
  8.     /* 80px: 为了内容不被底部区域盖住 */
  9.     padding: 12px 11px 80px;
  10. }
  12. /* 主体内容 */
  16. /* 底部支付 */
  17. .pay {
  18.     position: fixed;
  19.     left: 0;
  20.     bottom: 0;
  22.     /* 定位脱标后, 默认宽度100%失效, 所以重新设置 */
  23.     width: 100%;
  24.     height: 80px;
  26.     background-color: pink;
  27.     border-top: 1px solid #ededed;
  28. }
  30. /* 底部支付 */
复制代码

底部付出

完成底部付出模块
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>确认订单</title>
  9.     <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
  10.     <link rel="stylesheet" href="./css/base.css">
  11.     <link rel="stylesheet" href="./css/orders.css">
  12. </head>
  14. <body>
  15.     <!-- 主体内容: 滑动查看 -->
  16.     <div class="main">
  17.         1
  18.     </div>
  19.     <!-- 主体内容: 滑动查看 -->
  21.     <!-- 底部支付: 固定定位 -->
  22.     <div class="pay">
  23.         <div class="left">
  24.             合计: <span class="red">￥<i>266.00</i></span>
  25.         </div>
  26.         <div class="right">
  27.             <a href="#">去支付</a>
  28.         </div>
  29.     </div>
  30.     <!-- 底部支付: 固定定位 -->
  31. </body>
  33. </html>
复制代码
  1. body {
  2.     background-color: #f7f7f8;
  3. }
  5. /* 公共样式 */
  6. .red {
  7.     color: #cf4444;
  8. }
  11. /* 主体内容 */
  12. .main {
  13.     /* 80px: 为了内容不被底部区域盖住 */
  14.     padding: 12px 11px 80px;
  15. }
  17. /* 主体内容 */
  21. /* 底部支付 */
  22. .pay {
  23.     position: fixed;
  24.     left: 0;
  25.     bottom: 0;
  27.     display: flex;
  28.     /* 主轴对齐方式 */
  29.     justify-content: space-between;
  30.     /* 侧轴对齐方式 */
  31.     align-items: center;
  33.     /* 定位脱标后, 默认宽度100%失效, 所以重新设置 */
  34.     width: 100%;
  35.     height: 80px;
  37.     padding: 0 11px;
  38.     /* background-color: pink; */
  39.     border-top: 1px solid #ededed;
  40. }
  42. .pay .left {
  43.     font-size: 12px;
  44. }
  46. .pay .left i {
  47.     font-size: 20px;
  48. }
  50. .pay .right a {
  51.     display: block;
  52.     width: 90px;
  53.     height: 35px;
  54.     background-image: linear-gradient(90deg,
  55.             #6fc2aa 5%,
  56.             #54b196 100%);
  57.     border-radius: 3px;
  58.     text-align: center;
  59.     line-height: 35px;
  60.     font-size: 13px;
  61.     color: #fff;
  63. }
  65. /* 底部支付 */
复制代码

地点区域

完成地点模块的布局
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>确认订单</title>
  9.     <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
  10.     <link rel="stylesheet" href="./css/base.css">
  11.     <link rel="stylesheet" href="./css/orders.css">
  12. </head>
  14. <body>
  15.     <!-- 主体内容: 滑动查看 -->
  16.     <div class="main">
  17.         <!-- 用户信息 -->
  18.         <div class="pannel user_msg">
  19.             <div class="location">
  20.                 <i class="iconfont icon-location"></i>
  21.             </div>
  22.             <div class="user">
  23.                 <div class="top">
  24.                     <h5>林丽</h5>
  25.                     <p>18500667882</p>
  26.                 </div>
  27.                 <div class="bottom">北京市 海淀区 中关村软件园 信息科技大厦1号
  28.                     楼410# </div>
  29.             </div>
  30.             <div class="more">
  31.                 <i class="iconfont icon-more"></i>
  32.             </div>
  33.         </div>
  34.         <!-- 用户信息 -->
  35.     </div>
  36.     <!-- 主体内容: 滑动查看 -->
  38.     <!-- 底部支付: 固定定位 -->
  39.     ... ...
  40.     <!-- 底部支付: 固定定位 -->
  41. </body>
  43. </html>
复制代码
  1. body {
  2.     background-color: #f7f7f8;
  3. }
  5. /* 公共样式 */
  6. .red {
  7.     color: #cf4444;
  8. }
  10. .pannel {
  11.     margin-bottom: 10px;
  12.     background-color: #fff;
  13.     border-radius: 5px;
  14. }
  17. /* 主体内容 */
  18. .main {
  19.     /* 80px: 为了内容不被底部区域盖住 */
  20.     padding: 12px 11px 80px;
  21. }
  23. /* 主体内容 */
  24. .main {
  25.     /* 80px: 为了内容不被底部区域盖住 */
  26.     padding: 12px 11px 80px;
  27. }
  29. /* 用户信息 */
  30. .user_msg {
  31.     display: flex;
  32.     align-items: center;
  33.     padding: 15px 0 15px 11px;
  34. }
  36. .user_msg .location {
  37.     width: 30px;
  38.     height: 30px;
  39.     margin-right: 10px;
  40.     background-image: linear-gradient(90deg,
  41.             #6fc2aa 5%,
  42.             #54b196 100%);
  43.     border-radius: 50%;
  44.     text-align: center;
  45.     line-height: 30px;
  46.     color: #fff;
  47. }
  49. .user_msg .user {
  50.     flex: 1;
  51. }
  53. .user_msg .user .top {
  54.     display: flex;
  55. }
  57. .user_msg .user .top h5 {
  58.     width: 55px;
  59.     font-size: 15px;
  60.     font-weight: 400;
  61. }
  63. .user_msg .user .top p {
  64.     font-size: 13px;
  65. }
  67. .user_msg .user .bottom {
  68.     margin-top: 5px;
  69.     font-size: 12px;
  70. }
  72. .user_msg .more {
  73.     width: 44px;
  74.     height: 44px;
  75.     /* background-color: pink; */
  76.     text-align: center;
  77.     line-height: 44px;
  78.     color: #808080;
  79. }
  81. /* 主体内容 */
复制代码

商品区域

完成商品区域的布局
  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="./lib/iconfont/iconfont.css">
  9.     <link rel="stylesheet" href="./css/base.css">
  10.     <link rel="stylesheet" href="./css/orders.css">
  11. </head>
  12. <body>
  13.     <!-- 主体内容: 滑动查看 -->
  14.     <div class="main">
  15.         <!-- 用户信息 -->
  16.         ... ...
  17.         <!-- 用户信息 -->
  19.         <!-- 商品 -->
  20.         <div class="pannel goods">
  21.             <div class="pic">
  22.                 <a href="#"><img src="./uploads/pic.png" alt=""></a>
  23.             </div>
  24.             <div class="info">
  25.                 <h5>康尔贝 非接触式红外体温仪
  26.                     领券立减30元 婴儿级材质 测温…</h5>
  27.                 <p><span>粉色</span>   <span>红外体温计</span></p>
  28.                 <div class="price">
  29.                     <span class="red">¥ <i>266</i> </span>
  30.                     <span>¥299</span>
  31.                 </div>
  32.             </div>
  33.             <div class="count">
  34.                 <i class="iconfont icon-x"></i>
  35.                 <span>1</span>
  36.             </div>
  37.         </div>
  38.         <!-- 商品 -->
  39.     </div>
  40.     <!-- 主体内容: 滑动查看 -->
  42.     <!-- 底部支付: 固定定位 -->
  43.     ...
  44.     <!-- 底部支付: 固定定位 -->
  45. </body>
  46. </html>
复制代码
  1. body {
  2.     background-color: #f7f7f8;
  3. }
  5. /* 公共样式 */
  6. .red {
  7.     color: #cf4444;
  8. }
  10. .pannel {
  11.     margin-bottom: 10px;
  12.     background-color: #fff;
  13.     border-radius: 5px;
  14. }
  16. /* 主体内容 */
  17. .main {
  18.     /* 80px: 为了内容不被底部区域盖住 */
  19.     padding: 12px 11px 80px;
  20. }
  23. /* 商品 */
  24. .goods {
  25.     display: flex;
  26.     padding: 11px 0 11px 11px;
  27. }
  29. .goods .pic {
  30.     width: 85px;
  31.     height: 85px;
  32.     margin-right: 10px;
  33. }
  35. .goods .info {
  36.     flex: 1;
  37. }
  39. .goods .info h5 {
  40.     font-size: 13px;
  41.     color: #262626;
  42.     font-weight: 400;
  43. }
  45. .goods .info p {
  46.     width: 95px;
  47.     height: 20px;
  48.     margin: 5px 0;
  49.     background-color: #f7f7f8;
  50.     font-size: 12px;
  51.     color: #888;
  52. }
  54. .goods .info p span:first-child {
  55.     margin-right: 5px;
  56. }
  58. .goods .info .price {
  59.     font-size: 12px;
  60. }
  62. .goods .info .price i {
  63.     font-size: 16px;
  64. }
  66. .goods .info .price span:last-child {
  67.     margin-left: 5px;
  68.     color: #999;
  69.     text-decoration: line-through;
  70. }
  72. .goods .count {
  73.     width: 44px;
  74.     height: 44px;
  75.     /* background-color: pink; */
  76.     text-align: center;
  77.     line-height: 44px;
  78. }
  80. /* 主体内容 */
复制代码

配送信息

完成配送信息的布局
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>确认订单</title>
  9.     <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
  10.     <link rel="stylesheet" href="./css/base.css">
  11.     <link rel="stylesheet" href="./css/orders.css">
  12. </head>
  14. <body>
  15.     <!-- 主体内容: 滑动查看 -->
  16.     <div class="main">
  17.         <!-- 用户信息 -->
  18.         ... ...
  19.         <!-- 用户信息 -->
  21.         <!-- 商品 -->
  22.         ... ...
  23.         <!-- 商品 -->
  25.         <!-- 其他信息 -->
  26.         <!-- div.pannel   rest   -->
  27.         <!-- header  nav  section footer -->
  28.         <section class="pannel rest">
  29.             <div>
  30.                 <h5>配送方式</h5>
  31.                 <p>顺丰快递</p>
  32.             </div>
  33.             <div>
  34.                 <h5>配送方式</h5>
  35.                 <p>顺丰快递</p>
  36.             </div>
  37.             <div>
  38.                 <h5>配送方式</h5>
  39.                 <p>顺丰快递</p>
  40.             </div>
  42.         </section>
  43.         <!-- 其他信息 -->
  44.     </div>
  45.     <!-- 主体内容: 滑动查看 -->
  47.     <!-- 底部支付: 固定定位 -->
  48.      ... ...
  49.     <!-- 底部支付: 固定定位 -->
  50. </body>
  52. </html>
复制代码
  1. body {
  2.     background-color: #f7f7f8;
  3. }
  5. /* 公共样式 */
  6. .red {
  7.     color: #cf4444;
  8. }
  10. .pannel {
  11.     margin-bottom: 10px;
  12.     background-color: #fff;
  13.     border-radius: 5px;
  14. }
  17. /* 其他信息 */
  18. .rest {
  19.     padding: 15px;
  20. }
  22. .rest div {
  23.     display: flex;
  24.     margin-bottom: 30px;
  25. }
  27. .rest div:last-child {
  28.     margin-bottom: 0;
  29. }
  31. /* 找到第一个和第三个div设置主轴对齐方式 */
  32. .rest div:nth-child(2n+1) {
  33.     justify-content: space-between;
  34. }
  36. /* 第二行标题和p之间的距离 */
  37. .rest div:nth-child(2) h5 {
  38.     margin-right: 20px;
  39. }
  41. .rest h5,
  42. .rest p{
  43.     font-size: 13px;
  44.     color: #262626;
  45.     font-weight: 400;
  46. }
  48. /* .rest p {
  49.     font-size: 13px;
  50.     color: #262626;
  51. } */
  53. .rest div:nth-child(2) p {
  54.     font-size: 12px;
  55.     color: #989898;
  56. }
  58. /* 主体内容 */
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
继续阅读请点击广告

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表

种地
+ 我要发帖
快速回复 返回顶部 返回列表