博客列表 >flex项目属性以及组件知识-Php第十期线上班

flex项目属性以及组件知识-Php第十期线上班

迫
原创
2019年12月30日 16:21:04510浏览

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;
  4. /*参考线*/
  5. /*outline: 1px dashed red;*/
  6. }
  7. body{
  8. font-size: 14px;
  9. color: #555555;
  10. background-color: #efefef
  11. ;
  12. }
  13. a{
  14. color: #404040;
  15. text-decoration: none;
  16. font-size: 13px;
  17. }

公共导航

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

公共大标题

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

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议