Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2019-12-25 flex容器项目上6个属性、组件开发思路及导航代码-PHP培训十期
Blogger Information
Blog 12
fans 0
comment 0
visits 7916
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
2019-12-25 flex容器项目上6个属性、组件开发思路及导航代码-PHP培训十期
ys899
Original
537 people have browsed it

1、 可以应用到flex项目上的属性有哪些

  • flex-basis: 项目宽度: 项目分配主轴剩余空间之前, 项目所占据的主轴空间宽度
  • flex-grow: 项目的宽度扩展: 将主轴上的剩余空间按比例分配给指定项目
  • flex-shrink: 项目的宽度收缩: 将项目上多出空间按比例在项目间进行缩减
  • flex: 是上面三个属性的简化缩写: flex: flex-grow flex-shrink flex-basis
  • align-self: 单独自定义某个项目在交叉轴上的对齐方式
  • order: 自定义项目在主轴上的排列顺序,默认为0,书写顺序,值越小位置越靠前

    总结：需注意使用flex容器内元素，即flex item的float，clear、vertical-align属性将失效。Flex交叉轴其实就是侧轴。

2、组件开发思路

第一：将网站公用的地方提取成立基础框架，也就是public部分；

第二：将网站页面板块单独编写成组件，也可以成为小页面，单独文件夹单独CSS样式单独HTML页面，样式名使用下划线’_’，页面元素类名使用中划线’-‘进行连接;

第三：网站每个页面组建时，灵活调用各个组件完成，减少页面的整体调整时间。

  • 一个组件就是一个css样式表, 通过样式表,像搭积木一样将整个网页快速创建出来
  • 一个以上的页面都会用到的组件
  • 事先将他们先写好放入公共组件库,统一管理与调用

3.导航代码

```HTML Code
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../../static/font/iconfont.css">
<link rel="stylesheet" href="public_header.css">
<title>头部导航</title>
</head>

<body>

<div class="public-header">
<a href="">网站首页</a>
<a href="">专题</a>
<a href="">网站导航</a>
<a href="">二手商品</a>
<a href="">讨论区</a>
<span>
<a href=""><i class="iconfont icon-huiyuan2"></i>登录</a>
<a href="">免费注册</a>
</span>
</div>
</body>
</html>

  1. ```CSS Code
  2. /*导入元素的公共初始化样式表*/
  3. @import url(../../public_reset.css);
  5. /*全部头部导航*/
  6. .public-header {
  7.     height: 44px;
  8.     background-color: black;
  9.     padding: 0 20px;
  11.     /*flex*/
  12.     display: flex;
  13.     /*水平不换行*/
  14.     /*flex-flow: row nowrap;*/
  15. }
  17. .public-header a {
  18.     line-height: 44px;
  19.     color: #cccccc;
  20.     padding: 0 10px;
  21. }
  23. .public-header > a:hover {
  24.     background-color: #fff;
  25.     color: black;
  26. }
  28. .public-header > span {
  29.     margin-left: auto;
  30. }
  32. /*字体图标*/
  33. .public-header > span i {
  34.     font-size: 16px;
  35.     color: #cccccc;
  36.     padding-right: 10px;
  37. }
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