Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1225作业
Blogger Information
Blog 7
fans 0
comment 0
visits 5119
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作业
孤心泪的博客
Original
917 people have browsed it

复习：flex容器上使用的6个属性

  • flex-direction:设置容器的主轴方向，水平/垂直排列
  • flex-wrap:是否允许容器换行，默认不换行
  • flex-flow:主轴方向 是否换行，简化flex-direction，flex-wrap属性
  • justify-cotent:设置flex项目在主轴上的对齐方式
  • align-items:设置flex项目在交叉轴上的对齐方式
  • align-conten:多行容器时，项目在交叉轴上的对齐方式

    手写flex项目上的6个属性

  • flex-basis:设置项目宽度，项目在分配主轴剩余空间之前，项目所在的主轴空间的宽度，默认值auto
  • flex-grow:设置主轴剩余空间分配给项目的比例（0 不分配，1平均分配）
  • flex-shrink:项目的宽度收缩（将项目上的多出来的空间按比例在项目之间进行缩减）
  • flex:上面三项的简写
    flex: flex-grow flex-shrink flex-basis(默认值：不扩展，自动收缩，宽度自动)
  • align-self:单独自定义某个项目在交叉轴上的对齐方式
  • order:自定义项目在主轴上的排列顺序，默认为0，值越小越靠前

    公共组件：多个地方调用的组件，类似网站顶部导航栏等

    专有组件：项目中只有一处使用的组件，定制化的组件

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

    1.首先判断组件的类型，该组件是公共组件还是专有组件？
    2.组件的样式必须和主体隔离开，避免影响其他组件或主体的样式
    4.使用时，在需要的地方复制组件的HTML，并在该页面中导入该组件对应的样式文件

    写导航代码并提交到作业

    reset.css 重置样式
    ```

  • {
    margin: 0;
    padding: 0;
    }
    body {
    font-size: 13px;
    color: #555;
    background-color: #efefef;
    }
    a {
    color: #404040;
    text-decoration: none;
    font-size: 13px;
    }
    li {
    list-style: none;
    }

    1. **组件HTML**
    2. ```html
    3. <!DOCTYPE html>
    4. <html lang="en">
    5. <head>
    6.   <meta charset="UTF-8">
    7.   <link rel="stylesheet" href="../../../../font/iconfont.css">
    8.   <link rel="stylesheet" href="public-header.css">
    9.   <title>网站头部导航</title>
    10. </head>
    11. <body>
    12. <!--文件名推荐下划线，类名推荐中划线-->
    13. <div class="public-header">
    14.   <a href="">网站首页</a>
    15.   <a href="">专题</a>
    16.   <a href="">网站导航</a>
    17.   <a href="">二手商品</a>
    18.   <a href="">讨论区</a>
    19.   <span>
    20.       <a href=""><i class="iconfont icon-huiyuan2"></i>登录</a>
    21.       <a href="">免费注册</a>
    22.   </span>
    23. </div>
    24. </body>
    25. </html>

    组件样式
    ```css
    / 导入 公共样式/
    /@import “../../public_reset.css”;/
    @import url(../../public_reset.css);
    /网站头部导航/
    .public-header {
    height: 44px;
    background-color: black;
    padding: 0 20px;

    /flex/
    display: flex;
    /水平不换行/
    flex-flow: row nowrap;
    }
    .public-header a {
    line-height: 44px;
    color: #ccc;
    padding: 0 10px;
    }
    .public-header > a:hover {
    background-color: #fff;
    color: black;
    }
    .public-header > span {
    margin-left: auto;
    }
    /自提图标/
    .public-header > span i {
    font-size: 16px;
    color: #ccc;
    padding-right: 10px;
    }

```

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