Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1225作业
Blogger Information
Blog 32
fans 2
comment 2
visits 23325
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
1225作业
暴风战斧
Original
676 people have browsed it

flex项目6个属性

组件开发总结

思路：组件是一个个样式表，通过分析把页面上的样式分类，分成公共组件（可复用），专用组件（专门给某个特定页面使用）；
实现方法：样式一个一个写，看着html从上往下写；公共组件放一起，统一管理方便调用！

默认导航代码

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="public_header.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. </body>
  22. </html>

css

  1. /*导入元素的公共初始化样式表*/
  2. @import "../../public_reset.css";
  4. /*全部头部导航*/
  5. .public-header {
  6.     height:44px;
  7.     background-color:black;
  8.     padding:0 20px;
  9.     display:flex;
  10.     flex-flow:row nowrap;
  11. }
  12. .public-header a {
  13.     line-height:44px;
  14.     color:#cccccc;
  15.     padding:0 10px;
  16. }
  17. .public-header > a:hover {
  18.     background-color:#ffffff;
  19.     color:black;
  20. }
  21. /*字体图标*/
  22. .public-header > span i {
  23.     font-size:16px;
  24.     color:#cccccc;
  25.     padding-right:10px;
  26. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：这6个属性, 必须全部精通, 非常常用
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