Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1225-flex项目上的6个属性
Blogger Information
Blog 13
fans 0
comment 0
visits 10312
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
1225-flex项目上的6个属性
Original
650 people have browsed it

flex项目上的6个属性

flex-basis: 项目宽度
flex-grow:项目扩展
flex-shrink:项目的宽度收缩
flex:0 1 auto:简化 默认值
align-self:自定义在交叉轴上的对齐
order:定义项目在主轴的排列顺序

页面组件开发的思路与实现过程

首先按找布局拆解的思路，东西拆成小块，在根据小块的物件调整，复用组件，单独组件，相互拼接

导航例子

HTML
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="../../../static/font/iconfont.css">
  8.     <link rel="stylesheet" href="public-header.css">
  9.     <title>通用头部</title>
  10. </head>
  11. <body>
  12.     <div class="public-header">
  13.         <a href="">首页</a>
  14.         <a href="">博客</a>
  15.         <a href="">学院</a>
  16.         <a href="">下载</a>
  17.         <a href="">论坛</a>
  18.         <span>
  19.             <a href=""><i class="iconfont icon-huiyuan3"></i>登录</a>
  20.             <a href="">注册</a>
  21.         </span>
  22.     </div>
  23. </body>
  24. </html>
CSS
公用CSS
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     /* outline: 1px dashed red; */
  5. }
  6. body{
  7.     font-size: 13px;
  8.     color: cdcdcd;
  9.     background-color: efefef;
  10. }
  11. a{
  12.     color: #404040;
导航样式
  1.     text-decoration: none;
  2.     font-size: 13px;
  3. }
  4. li{
  5.     list-style: none;
  6. }
  9. /* 导入公共样式表 */
  10. @import "../../public-reset.css";
  12. .public-header{
  13.     height: 50px;
  14.     background-color: black;
  15.     padding: 0 20px;
  17.     /* 弹性布局 */
  18.     display: flex;
  19.     flex-flow: row nowrap;
  20. }
  22. .public-header a {
  23.     line-height: 50px;
  24.     color: #ccc;
  25.     padding: 0 10px;
  26. }
  27. .public-header > a:hover{
  28.     background-color: #fff;
  29.     color: black;
  30. }
  32. .public-header > span{
  33.     margin-left: auto;
  34. }
  36. .public-header > span i{
  37.     font-size: 16px;
  38.     color: #ccc;
  39.     padding-right: 10px;
  40. }

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 with News Comment Service Agreement
0 comments
Author's latest blog post