Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > flex项目属性以及组件知识-Php第十期线上班
Blogger Information
Blog 22
fans 0
comment 0
visits 12071
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
flex项目属性以及组件知识-Php第十期线上班
迫
Original
520 people have browsed it

2019.12.25作业，由于工作原因，这几天未能完成作业，现开始补上作业。

flex项目的属性

flex的项目有6个属性：flex-basis,flex-grow,flex-shrink,flex,align-self,order,分别控制flex项目的宽度，扩展，收缩，单独对齐方式以及排序方式。

组件的开发

一个组件就是一个css样式表，通过样式表，像搭建积木一样将整个网页快速创建出来，分为公共组件和专用组件

使用的语法：@import

实现过程：
1、创建一个组件库components；
2、创建公共组件，例如：公共头部，公共底部，广告栏等等；
3、创建专用组件；

创建一个组件的过程

1、创建一个html文档，写好网页的元素
2、创建一个css文档，在css文档中写好html文档中元素的样式
3、在html文档中使用link导入css文档样式

默认导航页实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>title</title>
  6.     <link rel="stylesheet" href="components/public/public_header/public_header.css">
  7.     <link rel="stylesheet" href="components/public/public_headline/public_headline.css">
  8. </head>
  9. <body>
  10.     <div class="public-header">
  11.     <a href="">首页</a>
  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.     <div class="public_headline">
  23.         <span>二手交易</span>
  24.     </div>
  25. </body>
  26. </html>

公共页面重置

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  5.     /*参考线*/
  6.     /*outline:  1px dashed red;*/
  8. }
  10. body{
  11.     font-size: 14px;
  12.     color: #555555;
  13.     background-color: #efefef
  14. ;
  15. }
  17. a{
  18.     color: #404040;
  20.     text-decoration: none;
  21.     font-size: 13px;
  22. }

公共导航

  1. /*@import "pubilc_reset.css";*/
  2. @import url(../pubilc_reset.css);
  4. .public-header {
  5.     height: 44px;
  6.     background-color: black;
  7.     padding: 0 20px;
  9.     display: flex;
  10.     flex-flow: row nowrap;
  11. }
  13. .public-header a{
  14.     /*margin: auto 0;*/
  15.     line-height: 44px;
  16.     padding: 0 10px;
  17.     color: #cccccc;
  18. }
  20. .public-header > a:hover{
  21.     background-color: #fff;
  22.     color: black;
  23. }
  25. .public-header > span {
  26.     margin-left: auto;
  27. }
  29. .public-header> span i{
  30.     font-size: 16px;
  31.     color: #cccccc;
  32.     padding-right: 10px;
  33. }
  35. .public-header > span a{
  36.     /*margin: auto 0;*/
  37.     line-height: 44px;
  38.     padding: 0 10px;
  39.     color: #cccccc;
  40. }

公共大标题

  1. @import "../pubilc_reset.css";
  3. .public_headline{
  4.     padding: 30px;
  5.     text-align: center;
  6. }
  8. .public_headline span {
  9.     font-size: 30px;
  10.     font-weight: bolder;
  11.     padding-bottom: 7px;
  12.     border-bottom: 3px solid red;
  13. }

组件的开发要注意一个组件只能对应一个独一无二类名，写组件的时候，注意要将对象类作为起点，这样防止重复的类彼此覆盖。公共组件的书写要注意组件的复用性。

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