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.           } */
  31.       /* .box {
  32.             允许放大，允许收缩，宽度自动
  33.             flex: 1 1 auto;
  34.           } */
  35.       /* .box {
  36.             禁止放大 禁止收缩 宽度自动
  37.             flex: 0 0 auto;
  38.           } */
  39.       /* .box:nth-of-type(3) {
  40.           单个项目垂直方向居中
  41.         align-self: center;
  42.       } */
  43.       /* 项目在主轴上的排列顺序 order */
  44.       /* order数值越大排在越后面， order数值越小排列在越前 */
  45.       .box:nth-of-type(1) {
  46.         order: 100;
  47.       }
  48.       .box:nth-of-type(2) {
  49.         order: 2;
  50.       }
  51.       .box:nth-of-type(3) {
  52.         order: 0;
  53.       }
  54.     </style>
  55.   </head>
  56.   <body>
  57.     <div id="box1">
  58.       <div class="box" style="background: red">项目1</div>
  59.       <div class="box" style="background: lightpink">项目2</div>
  60.       <div class="box">项目3</div>
  61.       <!-- <div class="box">项目4</div>
  62.       <div class="box">项目5</div>
  63.       <div class="box">项目6</div> -->
  64.     </div>
  65.   </body>
  66. </html>
  67. 移动商城首页的页眉和页脚的布局
  68. 1.先定位一个网页页面布局然后建立一个css文件给网页页面初始化并且用到媒体检查器设置好文字大小。
  71. * {
  72.   padding: 0;
  73.   margin: 0;
  74.   box-sizing: border-box;
  75. }
  76. a {
  77.   text-decoration: none;
  78.   color: #7b7b7b;
  79. }
  80. li {
  81.   list-style: none;
  82. }
  83. html {
  84.   font-size: 10px;
  85. }
  86. /* 设置媒体查询改变字体大小 */
  87. @media screen and (min-width: 480px) {
  88.   html {
  89.     font-size: 12px;
  90.   }
  91. }
  92. @media screen and (min-width: 640px) {
  93.   html {
  94.     font-size: 14px;
  95.   }
  96. }
  97. @media screen and (min-width: 720px) {
  98.   html {
  99.     font-size: 16px;
  100.   }
  101. }
  102. 2.接下来用绝对定位和固定定位，定位好页眉，主体，页脚三个部分
  105. /* 初始化样式表 */
  106. @import url(lnitialize.css);
  107. /* 网页页眉 */
  108. .header {
  109.   background: #ce001f;
  110.   color: #fff;
  111.   height: 4.4rem;
  112.   /* 采用固定定位，把页眉定位到顶端 */
  113.   position: fixed;
  114.   top: 0;
  115.   right: 0;
  116.   left: 0;
  117.   font-size: 1.4rem;
  118. }
  119. /* 网页主体 */
  120. .main {
  121.   background: #fff;
  122.   font-size: 1.4rem;
  123.   /* 采用绝对定位定位到中间部位 */
  124.   position: absolute;
  125.   top: 4.4rem;
  126.   right: 0;
  127.   bottom: 4.4rem;
  128.   left: 0;
  129. }
  130. /* 网页页脚 */
  131. .footer {
  132.   background: #ccc;
  133.   color: #fff;
  134.   height: 4.4rem;
  135.   font-size: 1.4rem;
  136.   /* 采用固定定位，定位到底部 */
  137.   position: fixed;
  138.   right: 0;
  139.   bottom: 0;
  140.   left: 0;
  141. }
  142. 3.页眉设置样式，采用字体图标和flex布局
  145. 这是设置html页眉的字体图标
  146. <!DOCTYPE html>
  147. <html lang="en">
  148.   <head>
  149.     <meta charset="UTF-8" />
  150.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  151.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  152.     <title>页眉</title>
  153.     <link
  154.       rel="stylesheet"
  155.       href="style/css/my-key tubiao/font123/iconfont.css"
  156.     />
  157.     <style type="text/css">
  158.       @import url(style/css/index.css);
  159.       @import url(style/css/header.css);
  160.     </style>
  161.   </head>
  162.   <body>
  163.     <!-- 网页页眉 -->
  164.     <div class="header">
  165.       <!-- 字体图标菜单 -->
  166.       <div class="menu iconfont icon-category"></div>
  167.       <!-- logo和放大镜和搜索框 -->
  168.       <div class="search">
  169.         <div class="logo">JD</div>
  170.         <div class="glass iconfont icon-search"></div>
  171.         <input type="text" class="words" value="立式空调柜" />
  172.       </div>
  173.       <!-- 登录按钮 -->
  174.       <div class="login"><a href="" class="login">登录</a></div>
  175.     </div>
  176.     <!-- 网页主体 -->
  177.     <div class="main">main</div>
  178.     <!-- 网页页脚 -->
  179.     <div class="footer">footer</div>
  180.   </body>
  181. </html>
  182. 这是页眉的css样式
  183. /* 获取到页眉的类，可以模块化选择子元素 */
  184. .header {
  185.   display: flex;
  186.   align-items: center;
  187. }
  188. /* 菜单和搜索框还有登录按钮分区域 */
  189. /* 菜单一份 */
  190. .header .menu {
  191.   flex: 1;
  192.   text-align: center;
  193.   font-size: 3rem;
  194. }
  195. /* 设置菜单的触摸样式 */
  196. .header .menu:hover {
  197.   cursor: pointer;
  198. }
  199. /* 搜索框六份 */
  200. .header .search {
  201.   flex: 6;
  202.   display: flex;
  203.   /* 设置背景颜色为白色 */
  204.   background: rgb(255, 255, 255);
  205.   /* 定义背景圆角 */
  206.   border-radius: 3rem;
  207.   /* 设置内边距 */
  208.   padding: 0.3rem;
  209. }
  210. /* 设置logo样式 */
  211. .header .search .logo {
  212.   color: #e43130;
  213.   font-size: 2rem;
  214.   flex: 0 1 4rem;
  215.   text-align: center;
  216.   /* 设置字体型号 */
  217.   font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  218. }
  219. /* 设置放大镜样式 */
  220. .header .search .glass {
  221.   color: #ccc;
  222.   flex: 0 1 4rem;
  223.   font-size: 2rem;
  224.   /* 设置左边框 */
  225.   border-left: 1px solid;
  226.   text-align: center;
  227. }
  228. /* 搜索框样式 */
  229. .header .search .words {
  230.   border: none;
  231.   outline: none;
  232.   color: #ccc;
  233.   flex: 0 0 auto;
  234. }
  235. /* 登录1份 */
  236. .header .login {
  237.   flex: 1;
  238.   /* 设置字体颜色 */
  239.   color: rgb(255, 255, 255);
  240.   /* 设置居中 */
  241.   text-align: center;
  242.   /* 设置文本加粗 */
  243.   font-weight: 600;
  244. 设置页脚样式
  247. 这是设置html页脚的字体图标
  248. <!DOCTYPE html>
  249. <html lang="en">
  250.   <head>
  251.     <meta charset="UTF-8" />
  252.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  253.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  254.     <title>页脚</title>
  255.     <link
  256.       rel="stylesheet"
  257.       href="style/css/my-key tubiao/font123/iconfont.css"
  258.     />
  259.     <link rel="stylesheet" href="style/css/my-key tubiao/iconfont.css" />
  260.     <style type="text/css">
  261.       @import url(style/css/index.css);
  262.       @import url(style/css/header.css);
  263.       @import url(style/css/footer.css);
  264.     </style>
  265.   </head>
  266.   <body>
  267.     <!-- 网页页眉 -->
  268.     <div class="header">
  269.       <!-- 字体图标菜单 -->
  270.       <div class="menu iconfont icon-category"></div>
  271.       <!-- logo和放大镜和搜索框 -->
  272.       <div class="search">
  273.         <div class="logo">JD</div>
  274.         <div class="glass iconfont icon-search"></div>
  275.         <input type="text" class="words" value="立式空调柜" />
  276.       </div>
  277.       <!-- 登录按钮 -->
  278.       <div class="login"><a href="" class="login">登录</a></div>
  279.     </div>
  280.     <!-- 网页主体 -->
  281.     <div class="main">main</div>
  282.     <!-- 网页页脚 -->
  283.     <div class="footer">
  284.       <div>
  285.         <div class="iconfont icon-smile"></div>
  286.         <span>首页</span>
  287.       </div>
  288.       <div>
  289.         <div class="iconfont icon-all-fill"></div>
  290.         <span>分类</span>
  291.       </div>
  292.       <div>
  293.         <div class="iconfont icon-gift"></div>
  294.         <span>惊喜</span>
  295.       </div>
  296.       <div>
  297.         <div class="iconfont icon-cart-Empty"></div>
  298.         <span>购物车</span>
  299.       </div>
  300.       <div>
  301.         <div class="iconfont icon-account-fill"></div>
  302.         <span>未登录</span>
  303.       </div>
  304.     </div>
  305.   </body>
  306. </html>
  307. 这是页脚的css样式
  308. .footer {
  309.   display: flex;
  310.   background: rgb(250, 250, 250);
  311.   color: #666;
  312.   flex: 1 1 auto;
  313.   /* 设置再主轴方向分散对齐 */
  314.   justify-content: space-around;
  315.   /* 设置交叉轴居中对齐 */
  316.   align-items: center;
  317. }
  318. /* 设置div子元素 */
  319. .footer > div {
  320.   display: flex;
  321.   flex-flow: column nowrap;
  322.   align-items: center;
  323. }
  324. /* 设置首页图标样式 */
  325. .footer .iconfont {
  326.   font-size: 2.5rem;
  327. }
  328. /* 设置字体大小 */
  329. .footer div span {
  330.   font-size: 1rem;
  331. }

更多相关文章

  1. jQuery常用方法
  2. 实例演示flex容器和项目属性设置
  3. 字体图标引用、无序列表颜色设置、盒模型
  4. 伪类选择器+盒模型+icon的使用方法+百分比设置元素大小
  5. mysql优化器追踪示例
  6. 7.【商城后台管理系统】基于TP6开发友情链接增删改查以及网站基
  7. PHP:【商城后台管理系统】部署友情链接，网站基础设置
  8. 微信抽奖小程序如何制作？
  9. TP6之多数据库，路由设置与多应用模式

随机推荐

  1. Android(安卓)UmengShareSDK第三方登录
  2. 【Android】Android的JNI基础编程
  3. android开发初学建议
  4. Android(安卓)Push 开源方案解析
  5. Android初级教程小案例之单选框RadioGrou
  6. 使用Beetle.NetPackage简单实现android和
  7. Android豆瓣图书查询Demo
  8. Android构建时报错： java.io.IOException:
  9. Android开发者的Ane简单入门
  10. android底层开发－android基础架构