欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS基础flex属性与实战-PHP培训十期线上班 学号:510251 12月25日作业

程序员文章站 2022-03-27 08:25:14
...

默写flex项目6个属性及功能

CSS基础flex属性与实战-PHP培训十期线上班 学号:510251 12月25日作业

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

1.通过组件——css样式表,像搭积木一样快速创建网页

公共组件:

  • 一个以上的页面都会用到的组件
  • 事先写好放入公共组件库,统一管理与调用
  • 组件复用

    专用组件:

  • 仅供一个特定页面使用的组件

    实现过程:

  • 一个组件必须使用一个独立无二的类名:class
  • @import语法,实现页面组件的组装
  • 垂直排列:@import基本上可以完成了
  • 水平排列: @import + Grid

创建组件库:
components

导航代码

创建组件库:components

创建一个公共组件:public_header

html css

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <!-- 导入CSS样式表-->
  6. <link rel="stylesheet" href="public_header.css">
  7. <!-- 导入字体图标素材库-->
  8. <link rel="stylesheet" href="../../../static/font/iconfont.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-huiyuan2"></i>登录</a>
  20. <a href="">免费注册</a>
  21. </span>
  22. </div>
  23. </body>
  24. </html>

公共CSS样式

  1. 初始化
  2. ``` CSS
  3. /*初始化组件*/

{
margin: 0; /
外边距/
padding: 0; /
内边距/
/
outline: 1px dashed red;/ /轮廓线*/
}

body{
font-size: 13px;
font-family: Arial; /字体/
color: #555555;
background-color: #efefef;
}

a{
color: #404040; /前景色/

  1. text-decoration: none; /*下划线*/
  2. font-size: 13px;

}

li{
list-style: none; /黑点去掉/

}

  1. ```
  2. ## 导行CSS样式
  3. ```CSS
  4. /*导入元素的公共初始化样式表*/

@import “../../public_reset.css”;

.public-header{
height: 44px;
background-color: black;
padding: 0 20px; /左右不要太靠边/

  1. display: flex; /*转为flex盒子*/
  2. flex-flow: row nowrap; /*水平,不换行*/

}

.public-header a{ /.public-header a,防止重复类名/
line-height: 44px; /行高/
color: #cccccc;
padding: 0 10px; /公开/
}

.public-header > a:hover{ /鼠标/
background-color: #fff;
color: black;
}

.public-header span{
margin-left: auto; /右对齐,flex内float无效/
}

.public-header > span i{
font-size: 16px;
color: #cccccc;
padding-right: 10px;
}
```

第一次在上课前完成上节课作业,加油。
抽空还需要多联系。