简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> List of blog posts> flex模拟移动商城首页页面布局/grid布局的相关属性
Blogger Information
Blog 70
fans 4
comment 5
visits 103858
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex模拟移动商城首页页面布局/grid布局的相关属性
JiaJieChen
Original
762 people have browsed it

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

1.布局页面导航

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

css代码块

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

2.布局秒杀商品

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

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

3.布局首页商品

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

css代码块

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

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

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

grid布局的相关属性

1.基本属性

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

2.代码块

       
    
        
    2. 
        
  2. lang="en">
    3. 
        
    4. 
        
  4. charset="UTF-8"/>
    5. 
        
  5. http-equiv="X-UA-Compatible"content="IE=edge"/>
    6. 
        
  6. name="viewport"content="width=device-width, initial-scale=1.0"/>
    7. 
        
  7. </span><span class="pln">grid布局技术</span><span class="tag">
    8. 
        
  8. type="text/css">
    9. 
        
  9. .grid{
    10. 
        
  10. border:1pxsolid;
    11. 
        
  11. padding:0.5em;
    12. 
        
  12. /* 定义一个grid网格容器 */
    13. 
        
  13. display:grid;
    14. 
        
  14. /* 定义网格轨道中的列宽 */
    15. 
        
  15. /* 可以定义为px绝对值，但是不能自适应宽度，定义auto 和 fr都可以自适应宽度 */
    16. 
        
  16. grid-template-columns:1fr1fr1fr;
    17. 
        
  17. /* 定义网格轨道中的行高 */
    18. 
        
  18. /* 5em 第一行，2em第二行 */
    19. 
        
  19. grid-template-rows:5em2em;
    20. 
        
  20. /* 网格轨道间距 */
    21. 
        
  21. /* 10px上下间距 20px 左右间距，如果是一个值，是上下左右间距 */
    22. 
        
  22. gap:10px20px;
    23. 
        
  23. /* 项目在容器中的排列方向 */
    24. 
        
  24. /* column垂直排列 */
    25. 
        
  25. /* grid-auto-flow: column; */
    26. 
        
  26. /* dense水平排列 */
    27. 
        
  27. grid-auto-flow:dense;
    28. 
        
  28. }
    29. 
        
    30. 
        
  30. .grid.itme{
    31. 
        
  31. background:lightgreen;
    32. 
        
  32. border:1pxsolid;
    33. 
        
  33. }
    34. 
        
    35. 
        
  35. 

    36. 
        
    37. 
        
  37. class="grid">
    38. 
        
  38. class="itme">itme1
  • class="itme">itme2
  • class="itme">itme3
  • class="itme">itme4
  • class="itme">itme5
  • class="itme">itme6
    • Correcting teacher：天蓬老师天蓬老师

    Correction status：qualified

    Teacher's comments：
    Statement of this Website
    The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
    All comments Speak rationally on civilized internet, please comply withNews Comment Service Agreement
    0 comments
    Author's latest blog post
    About us Disclaimer Sitemap
    php.cn：Public welfare online PHP training，Help PHP learners grow quickly！