简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 《Flex实战操作》2019-12-25作业笔记
Blogger Information
Blog 26
fans 1
comment 1
visits 19655
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实战操作》2019-12-25作业笔记
杨凡的博客
Original
622 people have browsed it

flex项目属性笔记

组件

像搭积木一样将整个页面快速的创建出来
一般有：公共组件、专用组件
可以将页面的各部分都写成组件形式进行拼接

编程约定

使用@import实现页面组件的组装
一个组件必须使用一个独一无二的类名class
垂直排列：@import
水平排列：@import+Grid

老师课程案例实例代码

public_reset.css代码

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

public_header.css代码

  1. /*导入元素公共初始化样式表*/
  2. @import "../../public_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.     line-height: 44px;
  15.     color: #cccccc;
  16.     padding: 0 10px;
  17. }
  18. .public-header > a:hover {
  19.     background-color: #fff;
  20.     color: black;
  21. }
  22. .public-header > span {
  23.     margin-left: auto;
  24. }
  25. .public-header > span i {
  26.     font-size: 16px;
  27.     color: #cccccc;
  28.     padding-right: 10px;
  29. }

public_headline.css代码

  1. /*导入元素公共初始化样式表*/
  2. @import "../../public_reset.css";
  4. .public-headline {
  5.     padding: 30px;
  6.     text-align: center;
  7. }
  8. .public-headline span {
  9.      font-size: 30px;
  10.     font-weight: bolder;
  11.     padding-bottom: 7px;
  12.     border-bottom: 3px solid red;
  13. }

demo1.css代码

  1. @import "components/public_reset.css";
  3. @import "components/public/public_header/public_header.css";
  5. @import "components/public/public_headline/public_headline.css";

组装HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="static/font/iconfont.css">
  6.     <link rel="stylesheet" href="demo1.css">
  7.     <title>组件拼装</title>
  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.         <span>
  17.                 <a href=""><i class="iconfont icon-huiyuan2"></i>登陆</a>
  18.                 <a href="">免费注册</a>
  19.             </span>
  20.     </div>
  21.     <div class="public-headline">
  22.         <span>二手交易</span>
  23.     </div>
  24. </body>
  25. </html>

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
1 comments
Dusk 2020-01-03 15:59:15
你qq多少啊 看你写的有点问题
1 floor
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！