Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS Flex弹性盒子认识与实战
Blogger Information
Blog 12
fans 0
comment 0
visits 10110
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
CSS Flex弹性盒子认识与实战
星夜低语
Original
1018 people have browsed it

仿中文网移动端链接，请老师查看

flex 布局概述

1. flex 是什么

  • flex 是 Flexible Box 的缩写,意为弹性布局
  • flex 2009 年就已出现,浏览器兼容性很好,请放心使用

2. flex 解决了什么问题

  • 块元素的垂直居中, flex 可以轻松解决
  • 元素大小在容器中的自动伸缩,以适应容器的变化,特别适合移动端布局

3. flex 项目的布局方向是什么

  • 一个物体在一个平面中, 要么水平排列, 要么垂直排列, flex 借鉴了这个思想
  • flex 是一维布局, 项目任何时候只能沿一个方向排列,要么水平, 要么垂直
  • flex 项目排列的方向, 称为主轴, 水平和垂直二种
  • 与主轴垂直的称为交叉轴(有的教程也称之为副轴/侧轴)

4. flex 布局中常用术语有哪些(三个二)

序号 简记 术语
1 二成员 容器和项目(container / item)
2 二根轴 主轴与交叉轴(main-axis / cross-axis)
3 二根线 起始线与结束线(flex-start / flex-end)

5.flex 容器属性有哪些

序号 属性 描述
1 flex-direction 设置容器中的主轴方向: 行/水平方向, 列/垂直方向
2 flex-wrap 是否允许创建多行容器,即 flex 项目一行排列不下时, 是否允许换行
3 flex-flow 简化 flex-direction, flex-wrap 属性
4 justify-content 设置 flex 项目在主轴上对齐方式
5 align-items 设置 flex 项目在交叉轴上对齐方式
6 align-content 多行容器中,项目在交叉轴上的对齐方式

6. flex 项目属性有哪些

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

flex 容器与项目

1. display属性

序号 属性值 描述 备注
1 flex; 创建 flex 块级容器 内部子元素自动成为 flex 项目
2 inline-flex; 创建 flex 行内容器 内部子元素自动成为 flex 项目

2. flex 容器与项目特征

序号 容器/项目 默认行为
1 容器主轴 水平方向
2 项目排列 沿主轴起始线排列(当前起始线居左)
3 项目类型 自动转换”行内块级”元素,不管之前是什么类型
4 容器主轴空间不足时 项目自动收缩尺寸以适应空间变化,不会换行显示
5 容器主轴存在未分配空间时 项目保持自身大小不会放大并充满空间

flex 容器主轴方向

flex-direction属性

序号 属性值 描述
1 row默认值 主轴水平: 起始线居中,项目从左到右显示
2 row-reverse 主轴水平:起始线居右, 项目从右向左显示
3 column 主轴垂直: 起始线居上,项目从上向下显示
4 column-reverse 主轴垂直: 起始线居下,项目从下向上显示

flex 容器主轴项目换行

flex-wrap属性

序号 属性值 描述
1 nowrap默认值 项目不换行: 单行容器
2 wrap 项目换行: 多行容器,第一行在上方
3 wrap-reverse 项目换行: 多行容器,第一行在下方

flex 容器主轴项目对齐

justify-content属性

当容器中主轴方向上存在剩余空间时, 该属性才有意义

序号 属性值 描述
1 flex-start默认 所有项目与主轴起始线对齐
2 flex-end 所有项目与主轴终止线对齐
3 center 所有项目与主轴中间线对齐: 居中对齐
4 space-between 两端对齐: 剩余空间在头尾项目之外的项目间平均分配
5 space-around 分散对齐: 剩余空间在每个项目二侧平均分配
6 space-evenly 平均对齐: 剩余空间在每个项目之间平均分配

flex 容器交叉轴项目对齐

align-items属性

  • 该属性仅适用于: 单行容器
  • 当容器中交叉轴方向上存在剩余空间时, 该属性才有意义
序号 属性值 描述
1 flex-start默认 与交叉轴起始线对齐
2 flex-end 与交叉轴终止线对齐
3 center 与交叉轴中间线对齐: 居中对齐

flex 多行容器交叉轴项目对齐

align-content属性

  • 该属性仅适用于: 多行容器
  • 多行容器中, 交叉轴会有多个项目, 剩余空间在项目之间分配才有意义
序号 属性值 描述
1 stretch默认 项目拉伸占据整个交叉轴
1 flex-start 所有项目与交叉轴起始线(顶部)对齐
2 flex-end 所有项目与交叉轴终止线对齐
3 center 所有项目与交叉轴中间线对齐: 居中对齐
4 space-between 两端对齐: 剩余空间在头尾项目之外的项目间平均分配
5 space-around 分散对齐: 剩余空间在每个项目二侧平均分配
6 space-evenly 平均对齐: 剩余空间在每个项目之间平均分配

提示: 多行容器中通过设置flex-wrap: wrap | wrap-reverse实现

flex 项目交叉轴单独对齐

align-self属性

  • 该属性可覆盖容器的align-items, 用以自定义某个项目的对齐方式
序号 属性值 描述
1 auto默认值 继承 align-items 属性值
2 flex-start 与交叉轴起始线对齐
3 flex-end 与交叉轴终止线对齐
4 center 与交叉轴中间线对齐: 居中对齐
5 stretch 在交叉轴方向上拉伸
6 baseline 与基线对齐(与内容相关用得极少)

flex 项目放大因子

flex-grow属性

  • 在容器主轴上存在剩余空间时, flex-grow才有意义
  • 该属性的值,称为放大因子, 常见的属性值如下:
序号 属性值 描述
1 0默认值 不放大,保持初始值
2 initial 设置默认值,与0等效
3 n 放大因子: 正数

flex 项目收缩因子

flex-shrink属性

  • 当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义
  • 该属性的值,称为收缩因子, 常见的属性值如下:
序号 属性值 描述
1 1默认值 允许项目收缩
2 initial 设置初始默认值,与 1 等效
3 0 禁止收缩,保持原始尺寸
4 n 收缩因子: 正数

flex 项目计算尺寸

flex-basis属性

  • 在分配多余空间之前,项目占据的主轴空间
  • 浏览器根据这个属性，计算主轴是否有多余空间
  • 该属性会覆盖项目原始大小(width/height)
  • 该属性会被项目的min-width/min-height值覆盖
序号 属性值 描述
1 auto 默认值: 项目原来的大小
2 px 像素
3 % 百分比

优先级: 项目大小 < flex-basis < min-width/height

flex 项目缩放的简写

1. flex属性

  • 项目放大,缩小与计算尺寸,对于项目非常重要,也很常用
  • 每次都要写这三个属性,非常的麻烦,且没有必要
  • flex属性,可以将以上三个属性进行简化:
  • 语法: flex: flex-grow flex-shrink flex-basis

1.1 三值语法

序号 属性值 描述
1 第一个值: 整数 flex-grow
2 第二个值: 整数 flex-shrink
3 第三个值: 有效宽度 flex-basis

举例:

序号 案例 描述
1 flex: 0 1 auto 默认值: 不放大,可收缩, 初始宽度
2 flex: 1 1 auto 项目自动放大或收缩适应容器
3 flex: 0 0 100px 按计算大小填充到容器中

1.2 双值语法

序号 属性值 描述
1 第一个值: 整数 flex-grow
3 第二个值: 有效宽度 flex-basis

举例:

案例 描述
flex: 0 180px 禁止放大,按计算大小填充到容器中

1.3 单值语法

序号 属性值 描述
1 整数 flex-grow
2 有效宽度 flex-basis
3 关键字 `initial auto none`

举例:

序号 案例 描述
1 flex: 1 flex: 1 1 auto
2 flex: 180px flex: 1 1 180px
3 initial flex: 0 1 auto
4 auto flex: 1 1 auto
5 none flex: 0 0 auto

推荐使用flex, 就像推荐使用flex-grow设置主轴与换行一样

个人总结

通过学习 CSS 的 Flex弹性布局，是我能更加熟练与快速的进行页面布局，首先要明白什么是弹性盒子；flex 是一维平面上的布局，要么沿着水平方向，要么就是垂直方向,而且布局只针对子元素.子元素自动收缩尺寸适应窗口大小的变化而不会自动换行.

特别注意 需要熟练掌握

flex共有12大属性，其中6个容器属性6个项目属性

1.容器属性
flex-direction（方向）
flex-wrap（换行）
flex-flow（方向、换行的简写）
justify-content(水平方向对齐)
align-items(竖直方向对齐)
align-content（多行对齐）

可以不用前两个 直接用flex-flow进行缩写

2.项目属性
flex-basis（宽）
flex-grow（放大）
flex-shrink（缩小）
flex align-self（单个竖直方向对齐）
order（顺序）
flex（放大、缩小、宽的简写）

可以不用前三个属性，直接用flex进行缩写

实操项目问题

1.文本溢出隐藏解决方法

  1.  div{
  2.   display: flex;
  3.   flex-flow: column nowrap;
  4. /*父元素设置为弹性盒子，垂直且不允许换行*/
  5. }
  6.  div >  a {
  7.   white-space: nowrap; /*设置文字禁止换行*/
  8.   overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  9.   text-overflow: ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
  10. }

2.注意如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用 就是说这个子元素的上面的元素必须是 display: flex
3.vh给线下测试可以用这个高度显示正常，可是线上pc显示有问题需要进一步理解

作业代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta
  6.       name="viewport"
  7.       content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"
  8.     />
  9.     <meta name="applicable-device" content="mobile" />
  10.     <title>php中文网-教程_手册_视频-免费php在线学习平台</title>
  11.     <link rel="stylesheet" href="static/css/font-icon.css" />
  12.     <style>
  13.       * {
  14.         margin: 0;
  15.         padding: 0;
  16.       }
  17.       a {
  18.         text-decoration: none;
  19.         color: #666;
  20.       }
  22.       html {
  23.         /* vw: 可视区宽度,100vw:表示占满100份 */
  24.         width: 100vw;
  25.         height: 100vh;
  26.         /* 在html中设置字体大小, 给后的rem单位用 */
  27.         font-size: 14px;
  28.       }
  29.       .hot {
  30.         color: coral;
  31.       }
  33.       body {
  34.         min-width: 360px;
  35.         max-width: 768px;
  36.         margin: 0 auto;
  37.         background: #edeff0;
  38.         display: flex;
  39.         flex-flow: column nowrap;
  40.       }
  42.       header {
  43.         background-color: #2d353c;
  44.         box-shadow: 0 0 10px 1px rgba(7, 17, 27, 0.1);
  45.         color: white;
  46.         height: 50px;
  47.         display: flex;
  48.         align-items: center;
  49.         justify-content: space-between;
  50.         padding: 0 15px;
  51.         box-sizing: border-box;
  52.         position: fixed;
  53.         top: 0;
  54.         width: 100%;
  55.       }
  57.       header > a:first-of-type > img {
  58.         width: 30px;
  59.         height: 30px;
  60.         border-radius: 50%;
  61.         margin-top: 7px;
  62.       }
  64.       header > a:last-of-type > img {
  65.         height: 45px;
  66.         width: 94px;
  67.       }
  68.       .slider {
  69.         height: 200px;
  70.         margin-top: 50px;
  71.       }
  72.       .slider > img {
  73.         width: 100%;
  74.         height: 100%;
  75.       }
  77.       nav {
  78.         height: 30vh;
  79.         display: flex;
  80.         /* 变成多行容器 */
  81.         flex-flow: row wrap;
  82.         background-color: #fff;
  83.       }
  85.       nav > div {
  86.         /* 占宽度四分之一 */
  87.         width: 25vw;
  88.         display: flex;
  89.         flex-flow: column nowrap;
  90.         align-items: center;
  91.         justify-content: center;
  92.       }
  94.       nav > div > a:first-of-type {
  95.         text-align: center;
  96.       }
  98.       nav > div img {
  99.         width: 50%;
  100.       }
  102.       h2 {
  103.         margin: 20px 10px;
  104.         color: #888;
  105.       }
  107.       .course-list {
  108.         display: flex;
  109.         flex-flow: column nowrap;
  110.       }
  111.       .course-list > div:first-of-type {
  112.         display: flex;
  113.         justify-content: space-around;
  114.         margin: 10px;
  115.       }
  116.       .course-list > div:first-of-type > a img {
  117.         height: 90px;
  118.         width: 98%;
  119.       }
  121.       .course-list > div:last-of-type {
  122.         padding: 10px;
  123.         box-sizing: border-box;
  124.         display: flex;
  125.         flex-flow: column nowrap;
  126.       }
  127.       .course-intro {
  128.         padding: 10px;
  129.         margin: 10px;
  130.         box-sizing: border-box;
  131.         display: flex;
  133.         background-color: #fff;
  134.       }
  135.       .course-intro a {
  136.         width: 40%;
  137.         height: 80px;
  138.       }
  139.       .course-intro img {
  140.         width: 100%;
  141.         height: 80px;
  142.       }
  144.       .course-intro div {
  145.         display: flex;
  146.         flex-flow: column nowrap;
  147.       }
  149.       .course-intro div > h3,
  150.       .course-intro div > p {
  151.         margin: 10px;
  152.         color: #888;
  153.       }
  154.       .level {
  155.         background: #595757;
  156.         border-radius: 8px;
  157.         color: #fff;
  158.         font-size: 10px;
  159.         padding: 3px;
  160.       }
  161.       .left {
  162.         margin-right: 0 10px;
  163.       }
  164.       .new-list {
  165.         display: flex;
  166.         flex-flow: column nowrap;
  167.         margin: 0 10px;
  168.       }
  170.       .new-list .new-intro {
  171.         margin: 0 10px 10px;
  172.         padding: 10px;
  173.         background-color: #fff;
  174.         display: flex;
  175.         justify-content: space-between;
  176.       }
  178.       .new-intro a {
  179.         width: 40%;
  180.         height: 80px;
  181.       }
  182.       .new-intro img {
  183.         width: 100%;
  184.         height: 80px;
  185.       }
  186.       .new-intro div {
  187.         display: flex;
  188.         flex-flow: column nowrap;
  189.         margin-left: 10px;
  190.         box-sizing: border-box;
  191.         height: 80px;
  193.         width: 50%;
  194.         color: #888;
  195.       }
  197.       .new-list .new-intro div > .ld {
  198.         display: flex;
  199.         justify-content: space-between;
  200.       }
  201.       .new-intro div > a {
  202.         width: 100%;
  203.         color: #888;
  204.         font-size: 0.8rem;
  205.         white-space: nowrap;
  206.         overflow: hidden;
  207.         text-overflow: ellipsis;
  208.       }
  209.       .more {
  210.         display: block;
  211.         margin: 0 auto;
  212.         /* line-height: 30px; */
  213.         line-height: 10px;
  214.         text-align: center;
  215.         background: #fff;
  216.         padding: 10px 0;
  217.         width: 100%;
  219.         margin: 10px;
  220.       }
  221.       .new-intro-port {
  222.         margin: 0 10px 10px;
  223.         padding: 10px;
  224.         background-color: #fff;
  225.         display: flex;
  226.       }
  227.       .new-intro-port > div {
  228.         display: flex;
  229.         width: 100%;
  230.         justify-content: space-between;
  231.       }
  232.       .new-intro-port > div > a:last-of-type {
  233.         width: 40%;
  234.       }
  235.       .new-intro-port > div > a:first-of-type {
  236.         width: 60%;
  237.       }
  238.       .new-intro-port > div > a {
  239.         margin-left: 10px;
  240.         white-space: nowrap;
  241.         overflow: hidden;
  242.         text-overflow: ellipsis;
  243.       }
  244.       /* 页脚 */
  245.       body > footer {
  246.         color: #666;
  247.         background-color: #efefef;
  248.         border-top: 1px solid #ccc;
  249.         height: 55px;
  251.         position: fixed;
  252.         bottom: 0;
  253.         width: 100vw;
  255.         display: flex;
  256.         justify-content: space-around;
  257.       }
  259.       body > footer > a {
  260.         margin-top: 10px;
  261.         font-size: 0.8rem;
  262.         display: flex;
  263.         flex-flow: column nowrap;
  264.         align-items: center;
  265.       }
  267.       body > footer > a > span:first-of-type {
  268.         font-size: 1.6rem;
  269.       }
  270.     </style>
  271.   </head>
  272.   <body>
  273.     <!-- 页面头部 -->
  274.     <header>
  275.       <a href="/"
  276.         ><img src="static/images/user_avatar.jpg" alt="php中文网"
  277.       /></a>
  279.       <a href=""
  280.         ><img
  281.           src="static/images/logo.png"
  282.           title="培训视频、在线学习、学习视频网站、网络学习平台"
  283.       /></a>
  285.       <span class="iconfont" style="font-size: 1.5rem;">&#xe61f;</span>
  286.     </header>
  287.     <!-- banner图 -->
  288.     <div class="slider">
  289.       <img src="static/images/ico/11.png" alt="" />
  290.     </div>
  291.     <!-- 主导航区 -->
  292.     <nav>
  293.       <div>
  294.         <a href=""><img src="static/images/ico/html.png" /></a>
  295.         <a href="">HTML/CSS</a>
  296.       </div>
  297.       <div>
  298.         <a href=""><img src="static/images/ico/JavaScript.png" alt="" /></a>
  299.         <a href="">JavaScript</a>
  300.       </div>
  301.       <div>
  302.         <a href=""><img src="static/images/ico/code.png" alt="" /></a>
  303.         <a href="">服务端</a>
  304.       </div>
  305.       <div>
  306.         <a href=""><img src="static/images/ico/sql.png" alt="" /></a>
  307.         <a href="">数据库</a>
  308.       </div>
  309.       <div>
  310.         <a href=""><img src="static/images/ico/app.png" alt="" /></a>
  311.         <a href="">移动端</a>
  312.       </div>
  313.       <div>
  314.         <a href=""><img src="static/images/ico/manual.png" alt="" /></a>
  315.         <a href="">手册</a>
  316.       </div>
  317.       <div>
  318.         <a href=""><img src="static/images/ico/tool2.png" alt="" /></a>
  319.         <a href="">工具</a>
  320.       </div>
  321.       <div>
  322.         <a href=""><img src="static/images/ico/live.png" alt="" /></a>
  323.         <a href="">直播</a>
  324.       </div>
  325.     </nav>
  327.     <!-- 推荐课程 -->
  328.     <h2>推荐课程</h2>
  330.     <div class="course-list">
  331.       <div>
  332.         <a href=""
  333.           ><img
  334.             src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg"
  335.             alt="PHP实战天龙八部之微信支付视频教程"
  336.         /></a>
  337.         <a href=""
  338.           ><img
  339.             src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg"
  340.             alt="PHP实战天龙八部之仿爱奇艺电影网站"
  341.         /></a>
  342.       </div>
  343.       <div>
  344.         <div class="course-intro">
  345.           <a href=""
  346.             ><img
  347.               src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg"
  348.               alt=""
  349.           /></a>
  350.           <div>
  351.             <h3><a href="">h3CI框架30分钟极速入门</a></h3>
  352.             <p><span class="level">中级</span><span>61263次播放</span></p>
  353.           </div>
  354.         </div>
  355.         <div class="course-intro">
  356.           <a href=""
  357.             ><img
  358.               src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg"
  359.               alt=""
  360.           /></a>
  361.           <div>
  362.             <h3><a href="">2018前端入门_HTML5</a></h3>
  363.             <p><span class="level">初级</span><span>310347次播放</span></p>
  364.           </div>
  365.         </div>
  366.       </div>
  367.     </div>
  369.     <!-- 最近更新 -->
  370.     <h2>最近更新</h2>
  372.     <div class="new-list">
  373.       <div class="new-intro">
  374.         <a href=""
  375.           ><img
  376.             src="https://img.php.cn/upload/course/000/000/015/5e0d6387e45cc764.png"
  377.             alt=""
  378.         /></a>
  379.         <div>
  380.           <a href="" style="font-size: 1.2rem; font-weight: bolder;"
  381.             >PHP快速操控Excel之PhpSpreadsheet</a
  382.           >
  384.           <a
  385.             >老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，用纯
  386.             php
  387.             编写的库，它提供了一组类，允许您读取和写入不同的电子表格文件格式！php中文网欧阳克老师原创课程！注：PHP运行环境需要PHP7.1以上</a
  388.           >
  390.           <p class="ld">
  391.             <span class="level">中级</span><span>15088次播放</span>
  392.           </p>
  393.         </div>
  394.       </div>
  395.       <div class="new-intro">
  396.         <a href=""
  397.           ><img
  398.             src="https://img.php.cn/upload/course/000/000/015/5e0d82773b4fe808.png"
  399.             alt=""
  400.         /></a>
  401.         <div>
  402.           <a href="" style="font-size: 1.2rem; font-weight: bolder;"
  403.             >Thinkphp6.0正式版视频教程</a
  404.           >
  406.           <a
  407.             >Thinkphp6.0从2019年10月24日正式发布，相对测试版，有很多变动，目前TP6已经相对比较稳定了，所以php中文网在2020年再次重新录制课程，帮助快速入门！相关推荐：
  408.             ThinkPHP6.0完全开发手册(注解版)
  409.             https://www.php.cn/course/1049.html</a
  410.           >
  412.           <p class="ld">
  413.             <span class="level">中级</span><span>48933次播放</span>
  414.           </p>
  415.         </div>
  416.       </div>
  417.       <div class="new-intro">
  418.         <a href=""
  419.           ><img
  420.             src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg"
  421.             alt=""
  422.         /></a>
  423.         <div>
  424.           <a href="" style="font-size: 1.2rem; font-weight: bolder;"
  425.             >2019python自学视频</a
  426.           >
  428.           <a
  429.             >本课程适合想从零开始学习 Python
  430.             编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</a
  431.           >
  433.           <p class="ld">
  434.             <span class="level">初级</span><span>36485次播放</span>
  435.           </p>
  436.         </div>
  437.       </div>
  438.       <div class="new-intro">
  439.         <a href=""
  440.           ><img
  441.             src="https://img.php.cn/upload/course/000/000/015/5da7e9b7895ed229.png"
  442.             alt=""
  443.         /></a>
  444.         <div>
  445.           <a href="" style="font-size: 1.2rem; font-weight: bolder;"
  446.             >PHP开发免费公益直播课</a
  447.           >
  449.           <a
  450.             >主讲：php中文网-朱老师( Peter Zhu) 时间：2019.10.17 晚 20:00-22:00
  451.             主题：如何高效的学习一门新技术？ 具体内容：1. 2020了,
  452.             还有哪些值得学习的新技术? 2.如何高效的学习前端开发?
  453.             3.如果高效的学习PHP开发?4.phpStudy V8 新功能介绍与演示
  454.             5.小皮面板功能介绍</a
  455.           >
  457.           <p class="ld">
  458.             <span class="level">初级</span><span>6821次播放</span>
  459.           </p>
  460.         </div>
  461.       </div>
  462.       <div class="new-intro">
  463.         <a href=""
  464.           ><img
  465.             src="https://img.php.cn/upload/course/000/000/014/5da6a50535529903.jpg"
  466.             alt=""
  467.         /></a>
  468.         <div>
  469.           <a href="" style="font-size: 1.2rem; font-weight: bolder;"
  470.             >从零开始到WEB响应式布局</a
  471.           >
  473.           <a
  474.             >重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点</a
  475.           >
  477.           <p class="ld">
  478.             <span class="level">初级</span><span>29212次播放</span>
  479.           </p>
  480.         </div>
  481.       </div>
  482.       <div class="new-intro">
  483.         <a href=""
  484.           ><img
  485.             src="https://img.php.cn/upload/course/000/000/015/5da51b8ff1224244.png"
  486.             alt=""
  487.         /></a>
  488.         <div>
  489.           <a href="" style="font-size: 1.2rem; font-weight: bolder;"
  490.             >PHP文件基础操作</a
  491.           >
  493.           <a
  494.             >好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家来学习PHP文件的基础操作，PHP操作文件主要用到的就是PHP文件相关的函数，那么我们主要讲的也就是PHP文件相关的各种函数，相信本节课程会让你对PHP更感兴趣哦！</a
  495.           >
  497.           <p class="ld">
  498.             <span class="level">中级</span><span>8888次播放</span>
  499.           </p>
  500.         </div>
  501.       </div>
  502.     </div>
  504.     <!-- 最新文章 -->
  505.     <h2>最新文章</h2>
  506.     <div class="new-list">
  507.       <div class="new-intro">
  508.         <div>
  509.           <a href="" style="font-size: 1.2rem; font-weight: bolder;"
  510.             >sublime正则搜索替换修改数据的方法</a
  511.           >
  513.           <a><span>发布时间：2020-04-11</span></a>
  514.         </div>
  515.         <a href=""
  516.           ><img
  517.             src="https://img.php.cn/upload/article/000/000/020/5e91923747dab842.jpg"
  518.             alt=""
  519.         /></a>
  520.       </div>
  521.       <div class="new-intro">
  522.         <div>
  523.           <a href="" style="font-size: 1.2rem; font-weight: bolder;"
  524.             >为什么我的电脑只有c盘</a
  525.           >
  527.           <a><span>发布时间：2020-04-11</span></a>
  528.         </div>
  529.         <a href=""
  530.           ><img
  531.             src="https://img.php.cn/upload/article/000/000/020/5e918fffe166f364.jpg"
  532.             alt="为什么我的电脑只有c盘"
  533.         /></a>
  534.       </div>
  535.       <div class="new-intro">
  536.         <div>
  537.           <a href="" style="font-size: 1.2rem; font-weight: bolder;"
  538.             >dedecms如何添加并引入php文件</a
  539.           >
  541.           <a><span>发布时间：2020-04-11</span></a>
  542.         </div>
  543.         <a href=""
  544.           ><img
  545.             src="https://img.php.cn/upload/article/000/000/041/5e918a4ac6da9826.jpg"
  546.             alt="dedecms如何添加并引入php文件"
  547.         /></a>
  548.       </div>
  549.       <div class="new-intro">
  550.         <div>
  551.           <a href="" style="font-size: 1.2rem; font-weight: bolder;"
  552.             >扩展分区转主分区的方法</a
  553.           >
  555.           <a><span>发布时间：2020-04-11</span></a>
  556.         </div>
  557.         <a href=""
  558.           ><img
  559.             src="https://img.php.cn/upload/article/000/000/020/5e9179096b985669.jpg"
  560.             alt="扩展分区转主分区的方法"
  561.         /></a>
  562.       </div>
  563.       <div class="new-intro">
  564.         <div>
  565.           <a href="" style="font-size: 1.2rem; font-weight: bolder;"
  566.             >2020全新Java面试题——容器（二）</a
  567.           >
  569.           <a><span>发布时间：2020-04-11</span></a>
  570.         </div>
  571.         <a href=""
  572.           ><img
  573.             src="https://img.php.cn/upload/article/000/000/041/5e9172bb26057270.jpg"
  574.             alt="2020全新Java面试题——容器（二）"
  575.         /></a>
  576.       </div>
  577.     </div>
  579.     <!-- 最新博文 -->
  580.     <h2>最新文章</h2>
  581.     <div class="new-list">
  582.       <div class="new-intro-port">
  583.         <div>
  584.           <a href="" style="font-size: 1rem; font-weight: bolder;"
  585.             >CSS3：弹性盒子flex布局</a
  586.           >
  588.           <a><span>2020-04-11</span></a>
  589.         </div>
  590.       </div>
  591.     </div>
  592.     <div class="new-list">
  593.       <div class="new-intro-port">
  594.         <div>
  595.           <a href="" style="font-size: 1rem; font-weight: bolder;"
  596.             >Jquery+AJAX上传文件，无刷新上传并重命名文件</a
  597.           >
  599.           <a><span>2020-04-11</span></a>
  600.         </div>
  601.       </div>
  602.     </div>
  603.     <div class="new-list">
  604.       <div class="new-intro-port">
  605.         <div>
  606.           <a href="" style="font-size: 1rem; font-weight: bolder;"
  607.             >thinkphp5.6源码阅读1</a
  608.           >
  610.           <a><span>2020-04-11</span></a>
  611.         </div>
  612.       </div>
  613.     </div>
  614.     <div class="new-list">
  615.       <div class="new-intro-port">
  616.         <div>
  617.           <a href="" style="font-size: 1rem; font-weight: bolder;"
  618.             >Composer windows安装详细介绍</a
  619.           >
  621.           <a><span>2020-04-11</span></a>
  622.         </div>
  623.       </div>
  624.     </div>
  625.     <div class="new-list">
  626.       <div class="new-intro-port">
  627.         <div>
  628.           <a href="" style="font-size: 1rem; font-weight: bolder;"
  629.             >AI智能电销机器人源码 源码解读（1）—基础</a
  630.           >
  632.           <a><span>2020-04-11</span></a>
  633.         </div>
  634.       </div>
  635.     </div>
  637.     <!-- 最新问答 -->
  638.     <h2>最新问答</h2>
  639.     <div class="new-list">
  640.       <div class="new-intro-port">
  641.         <div>
  642.           <a href="" style="font-size: 1rem; font-weight: bolder;"
  643.             >不出现tp6.0页面</a
  644.           >
  646.           <a><span>2020-04-11</span></a>
  647.         </div>
  648.       </div>
  649.     </div>
  650.     <div class="new-list">
  651.       <div class="new-intro-port">
  652.         <div>
  653.           <a href="" style="font-size: 1rem; font-weight: bolder;"
  654.             >数据库密码··</a
  655.           >
  657.           <a><span>2020-04-11</span></a>
  658.         </div>
  659.       </div>
  660.     </div>
  661.     <div class="new-list">
  662.       <div class="new-intro-port">
  663.         <div>
  664.           <a href="" style="font-size: 1rem; font-weight: bolder;"
  665.             >制定的学习计划在哪能找到 咋找不到呢?</a
  666.           >
  668.           <a><span>2020-04-11</span></a>
  669.         </div>
  670.       </div>
  671.     </div>
  672.     <div class="new-list">
  673.       <div class="new-intro-port">
  674.         <div>
  675.           <a href="" style="font-size: 1rem; font-weight: bolder;"
  676.             >数据库链接后怎么知道用哪个表啊</a
  677.           >
  679.           <a><span>2020-04-11</span></a>
  680.         </div>
  681.       </div>
  682.     </div>
  683.     <div class="new-list">
  684.       <div class="new-intro-port">
  685.         <div>
  686.           <a href="" style="font-size: 1rem; font-weight: bolder;"
  687.             >这个同步的东西</a
  688.           >
  690.           <a><span>2020-04-11</span></a>
  691.         </div>
  692.       </div>
  693.     </div>
  695.     <!-- 页脚 -->
  696.     <footer>
  697.       <a href="">
  698.         <span class="iconfont hot">&#xe60c;</span>
  699.         <span>首页</span>
  700.       </a>
  701.       <a href="">
  702.         <span class="iconfont hot">&#xe60a;</span>
  703.         <span>视频</span>
  704.       </a>
  705.       <a href="">
  706.         <span class="iconfont hot">&#xe675;</span>
  707.         <span>社区</span>
  708.       </a>
  709.       <a href="">
  710.         <span class="iconfont hot">&#xe600;</span>
  711.         <span>我的</span>
  712.       </a>
  713.     </footer>
  714.   </body>
  715. </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
0 comments
Author's latest blog post