search

博客列表 >CSS Flex弹性盒子认识与实战

CSS Flex弹性盒子认识与实战

星夜低语
星夜低语原创
2020年04月12日 17:46:091019浏览

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

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>
上一条：仿php.cn移动端下一条：flex弹性布局主要用法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多