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

程序员文章站 2022-04-17 18:49:33

...

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

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

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

公共组件:

一个以上的页面都会用到的组件
事先写好放入公共组件库,统一管理与调用
组件复用
专用组件:
仅供一个特定页面使用的组件
实现过程:
一个组件必须使用一个独立无二的类名:class
@import语法,实现页面组件的组装
垂直排列:@import基本上可以完成了
水平排列: @import + Grid

创建组件库：
components

导航代码

创建组件库：components

创建一个公共组件：public_header

html css

HTML代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    导入CSS样式表-->
    <link rel="stylesheet" href="public_header.css">
<!--    导入字体图标素材库-->
    <link rel="stylesheet" href="../../../static/font/iconfont.css">
    <title>全栈头部导航</title>
</head>
<body>
<div class="public-header">
    <a href="">网站首页</a>
    <a href="">专题</a>
    <a href="">网站导航</a>
    <a href="">二手商品</a>
    <a href="">讨论区</a>

    <span> <!--单独区块-->
        <a href=""><i class="iconfont icon-huiyuan2"></i>登录</a>
        <a href="">免费注册</a>
    </span>
</div>
</body>
</html>

公共CSS样式


 初始化
 ``` CSS
 /*初始化组件*/

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

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

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


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

}

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

}


 ```

 ## 导行CSS样式

```CSS
/*导入元素的公共初始化样式表*/

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

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


display: flex; /*转为flex盒子*/
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;
}
```

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

上一篇： 1 PHP 设计模式---工厂模式

下一篇： jquery中隐藏元素用什么方法

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