Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS基础flex属性与实战-PHP培训十期线上班 学号：510251 12月25日作业
Blogger Information
Blog 119
fans 3
comment 1
visits 94378
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
CSS基础flex属性与实战-PHP培训十期线上班 学号：510251 12月25日作业
赵大叔
Original
1180 people have browsed it

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

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

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>
  19.     <span> <!--单独区块-->
  20.         <a href=""><i class="iconfont icon-huiyuan2"></i>登录</a>
  21.         <a href="">免费注册</a>
  22.     </span>
  23. </div>
  24. </body>
  25. </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.  ```
  3.  ## 导行CSS样式
  5. ```CSS
  6. /*导入元素的公共初始化样式表*/

@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;
}
```

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

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