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

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

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

元素属性含义
flex0 1 auto / initial默认的，禁止放大，允许收缩，宽度自动
flex1 1 auto / auto允许放大和收缩
flex0 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-selfflex-start起始线
align-selfflex-end终止线
align-selfstretch默认拉伸
align-selfcenter居中
①align-self flex-start演示

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

②align-self flex-end演示

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

③align-self stretch演示

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

④align-self center演示

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

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

元素属性含义
order0-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. }

更多相关文章

  1. 【案例】学习flex项目上的三个属性并尝试制作移动端京东首页
  2. 传统定位布三行三列和flex布局
  3. flex项目上的三个属性
  4. 程序员被拖欠工资，怒将项目开源！居然登上GitHub TOP1。
  5. 登顶GitHub大热项目 | 非监督GAN算法U-GAT-IT大幅改进图像转换
  6. 前端基础设施-封装项目路由模块
  7. 本周AI开源项目精选 | 时间序列预测模型、用于对图像进行自我监
  8. 开源项目，动作识别的开源框架Sense + 多对象目标跟踪神器火热出炉
  9. PyTorch入门到进阶 实战计算机视觉与自然语言处理项目

随机推荐

  1. Android(安卓)中 Intent 的使用
  2. android listview 的一些属性
  3. 怀恋Button 样式 怕再次忘记
  4. 软键盘的相关设置
  5. android ListView实现圆角实例教程一
  6. Android SQLite数据库操作
  7. android的liveview装载数据
  8. Android 将从网络获取的数据缓存到私有文
  9. Qt on Android(安卓)核心编程
  10. Android市场或存在“解体”危险