flex模拟移动商城首页页面布局

1.布局页面导航

大家可以看到图片上的红色边框，用了flex布局，布局了一个多行容器，采用的是无序列表ul。

css代码块

  1. /* 设置导航样式，定义flex容器 */
  2. .main {
  3.   background: rgba(223, 223, 223, 0.524);
  4. }
  5. .main .dh {
  6.   display: flex;
  7.   flex-flow: row wrap;
  8.   padding: 1rem;
  9.   text-align: center;
  10.   background: rgb(255, 255, 255);
  11.   border-radius: 3rem;
  12. }
  14. .main .dh img {
  15.   height: 4rem;
  16.   width: 4rem;
  17. }
  19. .main .dh li {
  20.   flex: 1 1 20%;
  21.   flex-flow: column nowrap;
  22.   /* 设置项目再交叉轴上的对齐方式 */
  23.   align-items: center;
  24. }
  26. .main .dh .dhtu span {
  27.   display: flex;
  28.   /* 定义文字再主轴上的对齐方式，居中 */
  29.   justify-content: center;
  30.   color: #666;
  31.   font-size: 1.2rem;
  32. }

2.布局秒杀商品

大家可以看到图片上的红色边框，框起来的就是每个项目，下面的特价商品使用ul无序列表做的，用了flex布局。

css代码块
  1. /* 定义秒杀区域样式 */
  2. .main .ms {
  3.   background: rgb(250, 250, 250);
  4.   border-radius: 1rem;
  5.   height: auto;
  6. }
  8. /* 设置ms头部样式 */
  9. .main .ms-top {
  10.   background: rgb(250, 250, 250);
  11.   /* 定义为flex容器 */
  12.   display: flex;
  13.   /* 把项目两端对齐 */
  14.   justify-content: space-between;
  15.   /* 把项目垂直居中 */
  16.   align-items: center;
  17.   /* 设置内边距 */
  18.   padding: 1rem;
  20.   border-radius: 4rem;
  21. }
  23. /* 定义左边的项目为flex容器 */
  24. .main .ms-top .ms-lefy {
  25.   display: flex;
  26. }
  28. /* 定义秒杀时间样式*/
  29. .main .ms .ms-top .ms-lefy .time {
  30.   display: flex;
  31.   flex-flow: row nowrap;
  32.   font-size: 1.1rem;
  33.   justify-content: center;
  34.   align-items: center;
  35.   padding-left: 1rem;
  36. }
  37. .main .ms .ms-top .ms-lefy .time :nth-of-type(1) {
  38.   background: red;
  39.   color: rgb(250, 250, 250);
  40.   border-radius: 2rem;
  41.   width: 5rem;
  42.   height: auto;
  43.   text-align: center;
  44.   font-weight: bolder;
  45. }
  46. .main .ms .ms-top .ms-lefy .time :nth-of-type(2) {
  47.   background: rgba(208, 206, 206, 0.5);
  48.   color: red;
  49.   font-weight: bolder;
  51.   border-radius: 2rem;
  52.   width: 6rem;
  53.   height: auto;
  54.   text-align: center;
  55. }
  57. /* 定义更多秒杀字体样式 */
  58. .main .ms .ms-top .ms-right .gdms a {
  59.   color: red;
  60. }
  62. /* 定义秒杀主体内容区 */
  63. .main .ms .ms-body ul {
  64.   display: flex;
  65.   flex-flow: row nowrap;
  66.   justify-content: space-around;
  67.   flex: auto;
  68. }
  70. .main .ms .ms-body img {
  71.   display: flex;
  72.   flex-flow: row nowrap;
  73.   width: 10rem;
  74.   height: 10rem;
  75. }
  77. .main .ms .ms-body .jdmstu .money1 {
  78.   text-align: center;
  79.   font-size: 1.2rem;
  80.   color: red;
  81. }
  83. .main .ms .ms-body .jdmstu .money2 {
  84.   text-align: center;
  85.   font-size: 1.2rem;
  86.   color: #666;
  87.   text-decoration: line-through;
  88. }

3.布局首页商品

这个也是一个flex布局，也是用的ul无序列表做的，但是每行项目要设置两个，才能这样排列。

css代码块

  1. /* 定义显示主体 */
  2. .main .xs {
  3.   background: rgb(250, 250, 250);
  4.   border-radius: 3rem;
  5.   margin: 0.2rem;
  6. }
  8. /* 定义显示主体无序列表 */
  10. .main .xs .xstu {
  11.   display: flex;
  12.   flex-flow: row wrap;
  13.   margin-bottom: 4.4rem;
  14. }
  16. /* 定义显示主体无序子列表 */
  17. .main .xs .xstu li {
  18.   display: flex;
  19.   flex-flow: column wrap;
  20.   flex: 1 1 50%;
  21.   align-items: center;
  22. }
  24. /* 定义显示主体图片大小 */
  26. .main .xs .xstu img {
  27.   width: 16rem;
  28.   height: 10rem;
  29.   padding: 0.5rem;
  30.   background: rgb(250, 250, 250);
  31.   border-radius: 1rem;
  32. }
  34. /* 定义显示图片内容简介*/
  35. .main .xs .xstu .neirong {
  36.   display: flex;
  37.   font-size: 1rem;
  38.   flex-flow: row wrap;
  39.   padding: 0.5rem;
  40. }
  42. /* 定义显示主体图片金额 */
  44. .prompt :nth-of-type(1) {
  45.   color: red;
  46.   font-size: 1.2rem;
  47.   font-weight: 600;
  48. }
  50. .prompt a:nth-of-type(1) {
  51.   background: #ccc;
  52.   font-size: 1rem;
  53.   border-radius: 3rem;
  54.   padding: 0.2rem;
  55.   color: rgb(250, 250, 250);
  56. }
  58. .prompt {
  59.   width: 15rem;
  60.   display: flex;
  61.   justify-content: space-between;
  62. }

最后布局完是呈现的是这样

采用flex布局，模块化开发。

grid布局的相关属性

1.基本属性

元素含义
grid-template-columns定义网络轨道中的列宽，可以定义为px绝对值，但是不能自适应宽度，定义auto 和 fr都可以自适应宽度
grid-remplate-rows定义网格轨道中的行高，第一个值定义第一行，第二个值定义第二行，如果只有一个值是定义全部网格项目的行高
gap网格轨道间距，第一个值上下间距 第二个值左右间距，如果只有一个值，是上下左右间距
grid-auto-flow项目在容器中的排列方向，column垂直方向，dense水平方向

2.代码块

  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>grid布局技术</title>
  8.     <style type="text/css">
  9.       .grid {
  10.         border: 1px solid;
  11.         padding: 0.5em;
  12.         /* 定义一个grid网格容器 */
  13.         display: grid;
  14.         /* 定义网格轨道中的列宽 */
  15.         /* 可以定义为px绝对值，但是不能自适应宽度，定义auto 和 fr都可以自适应宽度 */
  16.         grid-template-columns: 1fr 1fr 1fr;
  17.         /* 定义网格轨道中的行高 */
  18.         /* 5em 第一行，2em第二行 */
  19.         grid-template-rows: 5em 2em;
  20.         /* 网格轨道间距 */
  21.         /* 10px上下间距 20px 左右间距，如果是一个值，是上下左右间距 */
  22.         gap: 10px 20px;
  23.         /* 项目在容器中的排列方向 */
  24.         /* column垂直排列 */
  25.         /* grid-auto-flow: column; */
  26.         /* dense水平排列 */
  27.         grid-auto-flow: dense;
  28.       }
  30.       .grid .itme {
  31.         background: lightgreen;
  32.         border: 1px solid;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <div class="grid">
  38.       <div class="itme">itme1</div>
  39.       <div class="itme">itme2</div>
  40.       <div class="itme">itme3</div>
  41.       <div class="itme">itme4</div>
  42.       <div class="itme">itme5</div>
  43.       <div class="itme">itme6</div>
  44.     </div>
  45.   </body>

更多相关文章

  1. 利用flex布局模仿某商城首页
  2. 2021-03-28：定义一种数：可以表示成若干（数量>1）连续正数和的数 。比
  3. 是德科技：高速数字化仪上自定义信号实时处理应用
  4. flex项目上的三个属性及移动商城首页的页眉和页脚的布局
  5. 函数的声明和定义
  6. 210325 CSS flex布局 项目属性
  7. 【案例】使用flex弹性布局仿写移动端苏宁首页并了解grid布局的相
  8. 210324 CSS flex 布局
  9. css之flex项目属性与商城首页布局实战

随机推荐

  1. Android中的xml解析
  2. 五个XML技巧
  3. 怎样让Asp与XML交互
  4. XML的快速入门教程
  5. 利用xml实现rss订阅
  6. XML解析基础
  7. 四种获取RSS源xml文件的方法
  8. XML文档类型声明
  9. 解说xml中的空格
  10. XML基本语法介绍