search

博客列表 >移动商城首页的页眉和页脚的布局和flex项目三个属性

移动商城首页的页眉和页脚的布局和flex项目三个属性

JiaJieChen
JiaJieChen原创
2021年03月26日 16:48:43870浏览

移动商城首页的页眉和页脚的布局

先来演示一下flex项目三个属性

1.项目的缩放比例与基准宽度

元素 属性 含义
flex 0 1 auto / initial 默认的，禁止放大，允许收缩，宽度自动
flex 1 1 auto / auto 允许放大和收缩
flex 0 0 auto / none 禁止放大和收缩/pc布局
①flex 0 1 auto / initial 演示

flex项目flex 0 1 auto属性默认的就是可以禁止放大，允许收缩，宽度自动，动态图我们可以看出效果

②flex 1 1 auto / auto 演示

flex项目flex 1 1 auto属性,在动态图里我们可以看出，项目在里面允许被放大，项目会随着页面的宽度大小而变化。

③flex 0 0 auto / none 演示

flex项目flex 0 0 auto属性，禁止放大，禁止收缩，不会随着页面的变化而变化，只会固定自己的值

2.单个项目在交叉轴上的对齐方式

元素 属性 含义
align-self flex-start 起始线
align-self flex-end 终止线
align-self stretch 默认拉伸
align-self center 居中
①align-self flex-start演示

默认起始线就不说了，就是默认的样式，跳过到第二个对齐方式。

②align-self flex-end演示

align-self flex-end参数，可以调动选择好的单个项目移动到交叉轴终止线上。

③align-self stretch演示

这个原理也是一样。都是默认拉伸，跳过到第四个对齐方式

④align-self center演示

align-self center参数，可以把选择到的项目在垂直线上居中，效果非常的好。

3.项目在主轴上的排列顺序

元素 属性 含义
order 0-100数值 数值越大排列在越后，数值越小排列在越前
①order演示

这里我们可以看到，颜色区分了项目，然后再代码块中给每个项目都设置了值，项目数值越大排列在越后，数值越小排列在越前。

代码块

  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 type="text/css">
  9.       * {
  10.         box-sizing: border-box;
  11.       }
  12.       #box1 {
  13.         border: 1px solid;
  14.         background: lightgreen;
  15.         /* width: 30em; */
  16.         height: 30em;
  17.       }
  18.       #box1 .box {
  19.         border: 1px solid;
  20.         background: lightblue;
  21.         width: 10em;
  22.         height: 10em;
  23.       }
  24.       #box1 {
  25.         display: flex;
  26.       }
  27.       /* .box {
  28.               默认的，禁止放大，允许收缩，宽度自动
  29.             flex: 0 1 auto;
  30.           } */
  32.       /* .box {
  33.             允许放大，允许收缩，宽度自动
  34.             flex: 1 1 auto;
  35.           } */
  37.       /* .box {
  38.             禁止放大 禁止收缩 宽度自动
  39.             flex: 0 0 auto;
  40.           } */
  42.       /* .box:nth-of-type(3) {
  43.           单个项目垂直方向居中
  44.         align-self: center;
  45.       } */
  47.       /* 项目在主轴上的排列顺序 order */
  48.       /* order数值越大排在越后面， order数值越小排列在越前 */
  49.       .box:nth-of-type(1) {
  50.         order: 100;
  51.       }
  53.       .box:nth-of-type(2) {
  54.         order: 2;
  55.       }
  57.       .box:nth-of-type(3) {
  58.         order: 0;
  59.       }
  60.     </style>
  61.   </head>
  62.   <body>
  63.     <div id="box1">
  64.       <div class="box" style="background: red">项目1</div>
  65.       <div class="box" style="background: lightpink">项目2</div>
  66.       <div class="box">项目3</div>
  67.       <!-- <div class="box">项目4</div>
  68.       <div class="box">项目5</div>
  69.       <div class="box">项目6</div> -->
  70.     </div>
  71.   </body>
  72. </html>

移动商城首页的页眉和页脚的布局

1.先定位一个网页页面布局然后建立一个css文件给网页页面初始化并且用到媒体检查器设置好文字大小。

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  6. a {
  7.   text-decoration: none;
  8.   color: #7b7b7b;
  9. }
  10. li {
  11.   list-style: none;
  12. }
  13. html {
  14.   font-size: 10px;
  15. }
  17. /* 设置媒体查询改变字体大小 */
  19. @media screen and (min-width: 480px) {
  20.   html {
  21.     font-size: 12px;
  22.   }
  23. }
  25. @media screen and (min-width: 640px) {
  26.   html {
  27.     font-size: 14px;
  28.   }
  29. }
  31. @media screen and (min-width: 720px) {
  32.   html {
  33.     font-size: 16px;
  34.   }
  35. }

2.接下来用绝对定位和固定定位，定位好页眉，主体，页脚三个部分

  1. /* 初始化样式表 */
  2. @import url(lnitialize.css);
  4. /* 网页页眉 */
  5. .header {
  6.   background: #ce001f;
  7.   color: #fff;
  8.   height: 4.4rem;
  10.   /* 采用固定定位，把页眉定位到顶端 */
  11.   position: fixed;
  12.   top: 0;
  13.   right: 0;
  14.   left: 0;
  15.   font-size: 1.4rem;
  16. }
  18. /* 网页主体 */
  19. .main {
  20.   background: #fff;
  21.   font-size: 1.4rem;
  23.   /* 采用绝对定位定位到中间部位 */
  24.   position: absolute;
  25.   top: 4.4rem;
  26.   right: 0;
  27.   bottom: 4.4rem;
  28.   left: 0;
  29. }
  31. /* 网页页脚 */
  32. .footer {
  33.   background: #ccc;
  34.   color: #fff;
  35.   height: 4.4rem;
  36.   font-size: 1.4rem;
  38.   /* 采用固定定位，定位到底部 */
  39.   position: fixed;
  40.   right: 0;
  41.   bottom: 0;
  42.   left: 0;
  43. }

3.页眉设置样式，采用字体图标和flex布局

这是设置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
  9.       rel="stylesheet"
  10.       href="style/css/my-key tubiao/font123/iconfont.css"
  11.     />
  12.     <style type="text/css">
  13.       @import url(style/css/index.css);
  14.       @import url(style/css/header.css);
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <!-- 网页页眉 -->
  19.     <div class="header">
  20.       <!-- 字体图标菜单 -->
  21.       <div class="menu iconfont icon-category"></div>
  22.       <!-- logo和放大镜和搜索框 -->
  23.       <div class="search">
  24.         <div class="logo">JD</div>
  25.         <div class="glass iconfont icon-search"></div>
  26.         <input type="text" class="words" value="立式空调柜" />
  27.       </div>
  28.       <!-- 登录按钮 -->
  29.       <div class="login"><a href="" class="login">登录</a></div>
  30.     </div>
  31.     <!-- 网页主体 -->
  32.     <div class="main">main</div>
  33.     <!-- 网页页脚 -->
  34.     <div class="footer">footer</div>
  35.   </body>
  36. </html>

这是页眉的css样式

  1. /* 获取到页眉的类，可以模块化选择子元素 */
  2. .header {
  3.   display: flex;
  4.   align-items: center;
  5. }
  7. /* 菜单和搜索框还有登录按钮分区域 */
  8. /* 菜单一份 */
  9. .header .menu {
  10.   flex: 1;
  11.   text-align: center;
  12.   font-size: 3rem;
  13. }
  15. /* 设置菜单的触摸样式 */
  16. .header .menu:hover {
  17.   cursor: pointer;
  18. }
  20. /* 搜索框六份 */
  21. .header .search {
  22.   flex: 6;
  23.   display: flex;
  24.   /* 设置背景颜色为白色 */
  25.   background: rgb(255, 255, 255);
  26.   /* 定义背景圆角 */
  27.   border-radius: 3rem;
  28.   /* 设置内边距 */
  29.   padding: 0.3rem;
  30. }
  32. /* 设置logo样式 */
  33. .header .search .logo {
  34.   color: #e43130;
  35.   font-size: 2rem;
  36.   flex: 0 1 4rem;
  37.   text-align: center;
  39.   /* 设置字体型号 */
  40.   font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  41. }
  43. /* 设置放大镜样式 */
  44. .header .search .glass {
  45.   color: #ccc;
  46.   flex: 0 1 4rem;
  47.   font-size: 2rem;
  48.   /* 设置左边框 */
  49.   border-left: 1px solid;
  50.   text-align: center;
  51. }
  53. /* 搜索框样式 */
  54. .header .search .words {
  55.   border: none;
  56.   outline: none;
  57.   color: #ccc;
  58.   flex: 0 0 auto;
  59. }
  61. /* 登录1份 */
  62. .header .login {
  63.   flex: 1;
  64.   /* 设置字体颜色 */
  65.   color: rgb(255, 255, 255);
  66.   /* 设置居中 */
  67.   text-align: center;
  68.   /* 设置文本加粗 */
  69.   font-weight: 600;

设置页脚样式

这是设置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
  9.       rel="stylesheet"
  10.       href="style/css/my-key tubiao/font123/iconfont.css"
  11.     />
  12.     <link rel="stylesheet" href="style/css/my-key tubiao/iconfont.css" />
  14.     <style type="text/css">
  15.       @import url(style/css/index.css);
  16.       @import url(style/css/header.css);
  17.       @import url(style/css/footer.css);
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <!-- 网页页眉 -->
  22.     <div class="header">
  23.       <!-- 字体图标菜单 -->
  24.       <div class="menu iconfont icon-category"></div>
  25.       <!-- logo和放大镜和搜索框 -->
  26.       <div class="search">
  27.         <div class="logo">JD</div>
  28.         <div class="glass iconfont icon-search"></div>
  29.         <input type="text" class="words" value="立式空调柜" />
  30.       </div>
  31.       <!-- 登录按钮 -->
  32.       <div class="login"><a href="" class="login">登录</a></div>
  33.     </div>
  34.     <!-- 网页主体 -->
  35.     <div class="main">main</div>
  36.     <!-- 网页页脚 -->
  37.     <div class="footer">
  38.       <div>
  39.         <div class="iconfont icon-smile"></div>
  40.         <span>首页</span>
  41.       </div>
  42.       <div>
  43.         <div class="iconfont icon-all-fill"></div>
  44.         <span>分类</span>
  45.       </div>
  46.       <div>
  47.         <div class="iconfont icon-gift"></div>
  48.         <span>惊喜</span>
  49.       </div>
  50.       <div>
  51.         <div class="iconfont icon-cart-Empty"></div>
  52.         <span>购物车</span>
  53.       </div>
  54.       <div>
  55.         <div class="iconfont icon-account-fill"></div>
  56.         <span>未登录</span>
  57.       </div>
  58.     </div>
  59.   </body>
  60. </html>

这是页脚的css样式

  1. .footer {
  2.   display: flex;
  3.   background: rgb(250, 250, 250);
  4.   color: #666;
  5.   flex: 1 1 auto;
  6.   /* 设置再主轴方向分散对齐 */
  7.   justify-content: space-around;
  8.   /* 设置交叉轴居中对齐 */
  9.   align-items: center;
  10. }
  11. /* 设置div子元素 */
  12. .footer > div {
  13.   display: flex;
  14.   flex-flow: column nowrap;
  15.   align-items: center;
  16. }
  18. /* 设置首页图标样式 */
  19. .footer .iconfont {
  20.   font-size: 2.5rem;
  21. }
  23. /* 设置字体大小 */
  24. .footer div span {
  25.   font-size: 1rem;
  26. }
上一条：flex的属性描述下一条：第三课 选择器、模块化组件、伪类选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多