Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 使用flex方法实现网站导航组件化的实例写法--PHP线上培训第十期20191225
Blogger Information
Blog 25
fans 1
comment 1
visits 20685
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方法实现网站导航组件化的实例写法--PHP线上培训第十期20191225
高的PHP十期培训学习笔记
Original
672 people have browsed it

组件的开发与使用方法

组件是什么

*组件相当于将网页中的元素按块分割，将整个网页分成一块一块的小区域

组件有什么用

*组件分为复用组件和专用组件

*组件可以节省大量重复代码和写代码的时间，同时减少出错及排查时间

组件的使用方法

*将一个个组件按照约定语法拼接即可组成一个完整的网页界面

*垂直排列用:@import

*水平排列用: @import + Grid

flex项目上的6个属性

一个网站顶部导航的例子

最终效果

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. <!--网页头部开始-->
  11. <div class="public-header">
  12.     <a href="" class="on">网站首页</a>
  13.     <a href="">网站专题</a>
  14.     <a href="">网站地图</a>
  15.     <a href="">网站商城</a>
  16.     <a href="">讨论区</a>
  17.     <a href="">联系我们</a>
  18.     <span>
  19.         <a href=""><i class="iconfont icon-huiyuan21"></i>登陆</a>
  20.         <a href="">免费注册</a>
  21.     </span>
  22. </div>
  23. </body>
  24. </html>

添加公共样式表代码后的显示效果

公共样式代码:public_reset.css

  1. /*初始化浏览器*/
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     /*添加一个参考线，方便 调整,调整完后需要删掉或注释掉*/
  6.     /*outline: 1px dashed greenyellow;*/
  8. }
  9. body {
  10.     font-size: 14px;
  11.     color: #282c31;
  12.     background-color: #cccccc;
  13. }
  15. a {
  16.     color: #EBEBEB;
  17.     /*去掉字体下划线*/
  18.     text-decoration: none;
  19.     font-size: 14px;
  20. }

添加头部导航组件的样式代码后的显示效果

头部导航组件的样式代码

  1. /*引入公共样式表*/
  2. @import "../public_reset.css";
  4. /*定义头部导航*/
  5. .public-header {
  6.     height: 44px;
  7.     background-color: #282c31;
  8.     padding: 0 20px;
  9.     /*转为flex，这样里面的元素就可以设置宽度了*/
  10.     display: flex;
  11.     /*设置里面的行内块元素水平不换行*/
  12.     /*这是默认值可以不写，但写了方便理解,并且对新手熟悉代码有帮助*/
  13.     flex-flow: row nowrap;
  14. }
  16. /*定义导航链接的样式*/
  17. .public-header a{
  18.     /*设置a链接的行高，一般同父元素同高，设置垂直居中显示*/
  19.     line-height: 44px;
  20.     color: #EBEBEB;
  21.     padding: 0 10px;
  22. }
  24. /*定义鼠标经过a链接时的显示效果*/
  25. /*a 标签前面用 > 表示这个样式只对flex子元素中的 a 标签起作用*/
  26. .public-header >a:hover{
  27.     background-color: #EBEBEB;
  28.     color: #282c31;
  29. }
  31. /*添加网站首页显示样式*/
  32. .public-header .on {
  33.     background-color: #EBEBEB;
  34.     color: #282c31;
  35. }
  37. /*定义会员登录链接样式*/
  38. .public-header > span {
  39.     /*margin-right 不设置的话默认是0，下面margin-left取值为 auto ，则自动占据了剩余的全部宽度*/
  40.     margin-left: auto;
  41. }
  43. /*设置会员登陆的字体图标*/
  44. .public-header > span i {
  45.     font-size: 16px;
  46.     color: #EBEBEB;
  47.     padding-right: 10px;
  48. }

注意事项

*新手刚学习时多添加备注信息方便查找

*参照老师写法时要思考为什么这样设置架构

*组件的命名应当是一个HTML对应一个同名的CSS，并放在同名文件夹内

*HTML内的类名应当同组件文件名称一致（下划线改为中横）

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：html的结构有多种写法, 标签并不一定必须要与老师一致, 因为我们已经将标签的默认样式干掉了, 任何一个标签对于你来说, 长得都差不多, 只是语义不同罢了
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