search

博客列表 >flex模拟移动商城首页页面布局/grid布局的相关属性

flex模拟移动商城首页页面布局/grid布局的相关属性

JiaJieChen
JiaJieChen原创
2021年03月28日 20:13:15781浏览

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>
上一条：box-sizing功能、相对定位与绝对定位下一条：移动端滚动条去掉！！！
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多