Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1225培训记录及作业
Blogger Information
Blog 7
fans 0
comment 0
visits 4339
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
484 people have browsed it

一、学习总结

flex项目上用的属性：

  • flex-basis：项目在分配主轴剩余空间之前所占的主轴空间的宽度。默认值为auto：取项目的原始宽度。可设置像素值、比例等，改变项目的显示宽度
  • flex-grow：将主轴上的剩余空间按照比例分配给项目。默认值为0：不分配；在0~1之间取值，设置每个项目分配的剩余空间的比例；为1时为平均分配
  • flex-shrink：将项目上多出来的空间按比例在项目之间进行分配。默认值为1：空间不足时按照比例进行收缩；设置为0时不收缩，会将容器撑开；在0~1之间取值，设置项目的收缩比例
  • flex：前三个属性的简写，默认值为0 1 auto，也可写为initial。可以设置三个参数，按顺序分别为：flex-grow、flex-shrink、flex-basis。flex:auto等价于flex:1 1 auto；flex:1等价于flex:1 1 auto；flex:2等价于flex:1 1 0；
  • align-self：单独定义某个项目在交叉轴上的对齐方式。默认值为flex-start，可选值：flex-end、center
  • order：自定义项目在主轴上排列顺序，默认为0：书写顺序。值越小越靠前

组件

  1. 公共组件：
    • 至少一个以上的页面会用到的组件
    • 事先将它们先写好，放入公共组件库，统一管理与调用
    • 组件复用

  2. 专用组件：

    • 只有一个特定页面使用的组件
  3. 使用方式：
    • 使用@import将组件样式引入css文件中
    • 一个组件必须使用一个独一无二的类名: class，防止类样式错乱
    • 垂直排列：@import基本就足够了
    • 水平排列：@import和Grid
  4. 组件感觉就像是一个个的零件，把各个零件先做出来，要做成品的时候，需要什么零件拿过来就行，搭建网页方便、快捷

二、实战：公共导航头

目录结构

  1. |-public
  2. |  |-public_header
  3. |  |  |-public_header.html
  4. |  |  |-public_header.css
  5. |  |
  6. |  |-public_reset.css
  7. |
  8. |-static
  9. |  |-font
  10. |  |  |-iconfont.css
  11. ......

html部分

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

css部分

  1. /*public_header.css*/
  2. @import "../public_reset.css";
  4. /*全站头部导航*/
  5. .public-header{
  6.     height: 44px;
  7.     background-color: #000000;
  8.     padding: 0 20px;
  9.     display: flex;
  10.     flex-flow: row nowrap;
  11. }
  13. .public-header a{
  14.     line-height: 44px;
  15.     color:#ccc;
  16.     padding: 0 10px;
  17. }
  19. .public-header > a:hover{
  20.     background-color: #fff;
  21.     color:black;
  22. }
  24. .public-header > span {
  25.     margin-left: auto;
  26. }
  28. /*字体图标*/
  29. .public-header > span i {
  30.     font-size: 16px;
  31.     color:#cccccc;
  32.     margin-right:10px;
  33. }
  1. /*public_reset.css*/
  2. *{
  3.     margin:0;
  4.     padding: 0;
  5. }
  7. body{
  8.     font-size:13px;
  9.     font-family: "Microsoft YaHei UI";
  10.     color:#555555;
  11.     background: #efefef;
  12. }
  14. a{
  15.     color: #404040;
  16.     text-decoration: none;
  17. }
  19. li{
  20.     list-style: none;
  21. }

三、总结：

  • flex项目上各参数的不同组合，显示结果千变万化，需要在实际使用中慢慢摸索，逐步熟悉

四、默写flex项目上的属性

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