Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12.25 手写flex项目上的六个属性-页面组件开发思路和总结-导航代码-php10期线上班
Blogger Information
Blog 4
fans 0
comment 0
visits 2247
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
12.25 手写flex项目上的六个属性-页面组件开发思路和总结-导航代码-php10期线上班
天津饭
Original
574 people have browsed it

手写flex项目上的六个属性

组件效果图

头部html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>全站头部导航</title>
  6.     <link rel="stylesheet" href="public-header.css">
  7.     <link rel="stylesheet" href="../../../static/font/iconfont.css">
  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.     <a href="">讨论区</a>
  17.     <span>
  18.         <a href=""><i class="iconfont icon-icon_group"></i>登录</a>
  19.         <a href=""><i class="iconfont icon-icon_group"></i>注册</a>
  20.     </span>
  21. </div>
  22. </body>
  23. </html>

头部组件css代码

  1. .public-header{
  2.     height:50px;
  3.     background-color: #282c31;
  4.     padding:0 30px;
  5.     display:flex;
  6. }
  7. .public-header a{
  8.     line-height:50px;
  9.     padding:0 20px;
  10. }
  11. .public-header>a:hover{
  12.     background-color:#3a87ad;
  13.     color: #55a532;
  14. }
  15. .public-header>span{
  16.     margin-left:auto;
  17. }
  18. .public-header>span i{
  19.     padding-right: 15px;
  21. }

初始化全局

  1. @import"../public-reset.css";
  2. *{
  3.     margin:0;
  4.     padding:0;
  5.     /*outline:1px dashed rosybrown;*/
  6. }
  7. body{
  8.     font-size:20px;
  9.     color:#282c31;
  10.     background-color:#55ce9f;
  11.     /*height:60px;*/
  12. }
  13. a{
  14.     color:lavender;
  15.     /*text-decoration: none;*/
  16.     font-size:15px;
  17. }

二手交易

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="piblic-headerline.css">
  7. </head>
  8. <body>
  9. <div class="public-headline">
  10.     <span>二手交易</span>
  11. </div>
  13. </body>
  14. </html>

二手交易组件css代码

  1. @import"../public-reset.css";
  2. .public-headline span{
  3.     font-size:60px;
  4.     font-weight:bolder;
  5.     padding-bottom:10px;
  6.     border-bottom:3px solid #bd2c00;
  8. }
  9. .public-headline{  text-align:center;}

总结

页面组件开发，先建立一个初始化全局的css文件，在建立一个与html文档名称相同的css文件，把初始化全局的css文件引入，开始写布局，，再把写好的布局放入html文档，写好的组件可以方便进行复用，新建的html css文件名称一致

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