Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Flex布局案例：实现php中文网首页
Blogger Information
Blog 2
fans 0
comment 0
visits 1047
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中文网首页
一米阳光♡
Original
285 people have browsed it

演示地址：https://www.myloong.top/html/index/index.html

源码如下：

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="static/font_icon/iconfont.css" />
  8.     <title>php中文网</title>
  9.   </head>
  11.   <style>
  12.     * {
  13.       padding: 0;
  14.       margin: 0;
  15.     }
  17.     /* 字体颜色样式 */
  18.     .color888 {
  19.       color: #888;
  20.     }
  22.     h3 {
  23.       font-weight: 400;
  24.     }
  26.     body {
  27.       background-color: #edeff0;
  28.     }
  30.     h2 {
  31.       color: #888;
  32.       margin-left: 10px;
  33.       font-size: 16px;
  34.     }
  36.     /* ---------- header样式设置 ---------- */
  37.     header {
  38.       background-color: #666;
  39.       display: flex;
  40.       /* 默认行显示，禁止换行 */
  41.       flex-flow: row nowrap;
  42.       align-items: center;
  43.       /* 分散对齐 */
  44.       justify-content: space-between;
  45.       height: 46px;
  46.       width: 98%;
  47.       margin-left: 1%;
  48.       position: fixed;
  49.       top: 0;
  50.       right: 0;
  51.       left: 0;
  52.     }
  54.     /* 设置header标签中子元素a的样式 */
  55.     header > a {
  56.       /* 去除a标签装饰即下划线 */
  57.       text-decoration: none;
  58.       color: #fff;
  59.       /* 设置字体样式：斜体 */
  60.       font-style: italic;
  61.       /* 设置字体粗细：加粗*/
  62.       font-weight: bold;
  63.     }
  65.     /* 重写header标签中使用的字体图标的部分样式 */
  66.     header > a > span.iconfont {
  67.       font-size: 32px;
  68.     }
  70.     /* 设置header标签中第二个a标签即顶部导航栏中间title的样式 */
  71.     header > a:nth-of-type(2) {
  72.       font-size: 18px;
  73.       align-content: center;
  74.       display: flex;
  75.       flex-flow: row nowrap;
  76.       align-items: center;
  77.     }
  79.     header > a:nth-of-type(2) .iconfont {
  80.       height: 100%;
  81.       color: red;
  82.       font-size: 3rem;
  83.       /* background-color: #fff; */
  84.     }
  86.     /* 设置白色背景有问题 */
  87.     /* header > a:nth-last-of-type(2) > span {
  88.       background-color: white;
  89.     } */
  91.     /* 设置banner样式 */
  92.     body > div:first-of-type {
  93.       margin-top: 46px;
  94.       width: 98%;
  95.       margin-left: 1%;
  96.     }
  97.     body > div:first-of-type > a > img {
  98.       height: 160px;
  99.       width: 100%;
  100.     }
  102.     /* ---------- 功能导航区样式设置 ---------- */
  103.     nav {
  104.       margin-top: 20px;
  105.       height: 200px;
  106.       /* 将nav标签下所有的div设置为flex布局 */
  107.       display: flex;
  108.       /* 横向排列（主轴为水平方向），允许换行 */
  109.       flex-flow: row wrap;
  110.     }
  112.     nav > div {
  113.       /* 将每个单独的导航区（div标签中）设置为一个flex盒子，导航块的图片和文字的作为flex盒子的两个项目进行布局 */
  114.       display: flex;
  115.       /* 设置主轴为垂直方向（即垂直方向排列），不允许换行 */
  116.       flex-flow: column nowrap;
  117.       /* 让flex中的项目在交叉轴居中，当前交叉轴为横轴，即为水平居中 */
  118.       align-items: center;
  119.       /* 设置每个flex项目的宽度为25% */
  120.       width: 25%;
  121.     }
  123.     nav > div :first-of-type > img {
  124.       /* 设置每个img的宽度为当前flex项目的50%，即deviceWidth的25% 的 50%  = deviceWidth/8 */
  125.       width: 50%;
  126.     }
  128.     nav > div > a {
  129.       text-align: center;
  130.       /* text-decoration-line: none; */
  131.       text-decoration: none;
  132.       color: #777;
  133.       font-weight: bold;
  134.       font-size: 14px;
  135.     }
  137.     .course {
  138.       margin-top: 20px;
  139.     }
  141.     /* 统一去掉列表前面的 ·  */
  142.     ul {
  143.       list-style: none;
  144.     }
  145.     /* ---------- 推荐课程板块样式设置 ---------- */
  146.     /* 水平方向的 */
  147.     .course-horizontal-list {
  148.       display: flex;
  149.       flex-flow: row nowrap;
  150.       /* 设置宽度96% 左侧便宜2%，右侧也就剩下2% ，为了留下左右边框 */
  151.       width: 96%;
  152.       margin-left: 2%;
  153.       /* 两端对齐 */
  154.       justify-content: space-between;
  155.       margin-top: 10px;
  156.       /* 设置flex项目不放大，可收缩，默认宽度 */
  157.       flex: 0 1 auto;
  158.     }
  160.     .course-horizontal-list > a {
  161.       /* a标签留1%的宽度，两端对齐的情况下中间就是2%的宽度，会好看些 */
  162.       width: 49%;
  163.       height: 100%;
  164.     }
  166.     .course-horizontal-list > a > img {
  167.       width: 100%;
  168.     }
  169.     /* 垂直方向的 */
  170.     .course-vertical-list {
  171.       margin-top: 10px;
  172.       margin-left: 2%;
  173.       width: 96%;
  174.     }
  175.     .course-vertical-list > ul {
  176.       display: flex;
  177.       flex-flow: column nowrap;
  178.       flex: 0 1 auto;
  179.       align-content: space-evenly;
  180.       /* height: 120px; */
  181.     }
  182.     .course-vertical-list > ul > li > div {
  183.       height: 120px;
  184.       display: flex;
  185.       flex-flow: row nowrap;
  186.       /* 设置主轴方向上的对齐使用 justify-content 属性 */
  187.       justify-content: flex-start;
  188.       flex: 0 1 auto;
  189.       width: 100%;
  190.       background-color: #fff;
  191.       /* 设置交叉轴方向上的居中显示 */
  192.       align-items: center;
  193.     }
  194.     /* 左侧图片内容区 */
  195.     .course-vertical-list > ul > li > div > a {
  196.       height: 90%;
  197.       width: 40%;
  198.     }
  199.     /* 设置img在a标签中的具体大小及左侧偏移量 */
  200.     .course-vertical-list > ul > li > div > a > img {
  201.       height: 100%;
  202.       width: 90%;
  203.       margin-left: 4%;
  204.     }
  205.     /* 右侧文字介绍区 */
  206.     .course-vertical-list > ul > li > div > div {
  207.       /* 右侧文字区域，强制制定高度与左侧一致，解决flex布局交叉轴居中导致的文字在中间显示问题 */
  208.       height: 90%;
  209.       width: 55%;
  210.     }
  211.     /* 等级的文字显示样式 */
  212.     .course-vertical-list > ul > li > div > div > p > span:first-of-type {
  213.       font-size: 11px;
  214.       background-color: #666;
  215.       color: #fff;
  216.       border: 3px solid #666;
  217.       border-radius: 10px;
  218.     }
  220.     /* 播放次数的文字显示样式 */
  221.     .course-vertical-list > ul > li > div > div > p > span:last-of-type {
  222.       font-size: 10px;
  223.     }
  225.     /* 每行下方间隔的灰色区域、写完上面的才发现这个区域没办法设置。
  226.        如果用flex布局需要将前面写的进行调整。
  227.        大概思路：将每行内容拆分为上部分内容区和下方的灰色区域作为一个flex布局中的两个项目，再将每行作为一个flex的项目这样来布局。
  229.        或者在现有布局上进行调整，即单独设置左右两个flex项目的背景色，把当前行的div背景色设置浅灰色，
  230.        通过调整行内项目size让flex项目内容高度撑不起总高度。应该同样可以实现。
  231.        由于时间关系，暂时以这种添加div的方式解决吧。。。
  232.     */
  233.     .course-vertical-list > ul > li > div:last-of-type {
  234.       height: 22px;
  235.     }
  237.     /* ---------- 最新更新板块样式设置 ---------- */
  238.     /* 列表部分的样式直接复用了推荐课程中的部分样式，仅对右侧内容区域单独做了设置*/
  239.     .newupdate-desc {
  240.       display: flex;
  241.       flex-flow: row wrap;
  242.     }
  243.     .newupdate-desc-content {
  244.       font-size: 10px;
  245.       overflow: hidden;
  246.       white-space: nowrap;
  247.       text-overflow: ellipsis;
  248.     }
  249.     .newupdate-desc-message {
  250.       display: flex;
  251.       flex-flow: row nowrap;
  252.       justify-content: space-between;
  253.       width: 100%;
  254.       height: 20px;
  255.     }
  257.     /* ---------- 最新文章板块样式设置 ---------- */
  258.     .new-article {
  259.       margin-left: 2%;
  260.       margin-top: 10px;
  261.       width: 96%;
  262.     }
  264.     .new-article-desc {
  265.       background-color: #fff;
  266.       display: flex;
  267.       flex-flow: row nowrap;
  268.       height: 100px;
  269.       flex: 0 1 auto;
  270.       justify-content: flex-end;
  271.     }
  272.     .new-article-desc > div:first-of-type {
  273.       width: 70%;
  274.       height: 100%;
  275.     }
  277.     /* 左侧文字区域样式设置 */
  278.     .new-article-desc > div:first-of-type > div {
  279.       margin-left: 2%;
  280.       display: flex;
  281.       flex-flow: column nowrap;
  282.       height: 80px;
  283.       justify-content: space-around;
  284.     }
  285.     .new-article-desc > div:first-of-type > div > h5 {
  286.       font-size: 14px;
  287.     }
  288.     .new-article-desc > div:first-of-type > div > p {
  289.       font-size: 12px;
  290.     }
  291.     /* 右侧图片区域样式设置 */
  292.     .new-article-desc > div:last-of-type {
  293.       width: 30%;
  294.       height: 100%;
  295.       /* border: 2px solid burlywood; */
  296.     }
  297.     /* 这里有点疑问，margin-top、left 设定百分比到底是以哪个值为参考的？ */
  298.     .new-article-desc > div:last-of-type > a {
  299.       display: inline-block;
  300.       width: 90%;
  301.       height: 80%;
  302.       margin-top: 5%;
  303.       margin-left: 5%;
  304.     }
  305.     .new-article-desc > div:last-of-type > a > img {
  306.       width: 100%;
  307.       height: 100%;
  308.     }
  310.     /* 同样的方式设置底部灰色间隔 */
  311.     .new-article > ul > li > div:last-of-type {
  312.       height: 14px;
  313.     }
  314.     .lastrow {
  315.       text-align: center;
  316.       color: #888;
  317.       height: 26px;
  318.       font-size: 14px;
  319.       line-height: 26px;
  320.     }
  322.     /* ---------- 最新博文、最新问答板块样式设置，这两个板块样式一样---------- */
  323.     .new-blogview{
  324.       margin-top: 20px;
  325.     }
  326.     .new-blog{
  327.       margin-top: 10px;
  328.       background-color: #fff;
  329.       margin-left: 2%;
  330.       width: 96%;
  331.     }
  333.     .new-blog > ul > li{
  334.       display: flex;
  335.       flex-flow: column nowrap;
  336.     }
  338.     .new-blog > ul > li > div:last-of-type{
  339.       height: 12px;
  340.       background-color: #edeff0;
  341.     }
  343.     .new-blog > ul > li > div:first-of-type {
  344.       display: flex;
  345.       flex-flow: row nowrap;
  346.       justify-content: space-between;
  347.       height: 40px;
  348.     }
  349.     .new-blog > ul > li > div:first-of-type > p{
  350.       text-decoration: none;
  351.       color: #888;
  352.       font-size: 14px;
  353.       margin-left: 1%;
  354.       width: 50%;
  355.       height: 100%;
  356.       line-height: 40px;
  357.       font-weight: 400;
  359.       overflow: hidden;
  360.       white-space: nowrap;
  361.       text-overflow: ellipsis;
  362.     }
  363.     .new-blog > ul > li > div:first-of-type > span{
  364.       line-height: 46px;
  365.       margin-right: 2%;
  366.       font-size: 13px;
  367.       color: #888;
  368.     }
  370.     .more-content {
  371.       height: 26px;
  372.       text-align: center;
  373.     }
  374.     .more-content > span{
  375.       color: #888;
  376.       line-height: 26px;
  377.       height: 26px;
  378.       font-size: 14px;
  379.     }
  382.     /* ---------- 页脚tabbar样式设置 ---------- */
  384.     footer {
  385.       color: #777;
  386.       background-color: #eee;
  387.       display: flex;
  388.       flex-flow: row nowrap;
  389.       justify-content: space-around;
  391.       position: fixed;
  392.       width: 100%;
  393.       height: 46px;
  394.       position: fixed;
  395.       bottom: 0;
  396.       right: 0;
  397.       left: 0;
  398.     }
  399.     footer > a {
  400.       text-decoration: none;
  401.       color: #777;
  402.       display: flex;
  403.       flex-flow: column nowrap;
  404.       width: 100%;
  405.       align-items: center;
  406.       justify-content: center;
  407.     }
  408.     footer > a:hover{
  409.       color: red;
  410.     }
  411.     .footer-space{
  412.       height: 46px;
  413.     }
  414.   </style>
  415.   <body>
  416.     <!-- 页眉 -->
  417.     <header>
  418.       <a href=""><span class="iconfont">&#xe614;</span></a>
  419.       <a href=""><span class="iconfont">&#xe67f;</span>中文网</a>
  420.       <a href=""><span class="iconfont">&#xe605;</span></a>
  421.     </header>
  423.     <!-- banner -->
  424.     <div class="banner">
  425.       <a href=""><img src="static/images/banner/banner.png" alt="" /></a>
  426.     </div>
  428.     <!-- 导航区 -->
  429.     <nav>
  430.       <!-- HTML/CSS -->
  431.       <div>
  432.         <a href=""><img src="static/images/htm.png" alt="" /></a>
  433.         <a href="">HTML/CSS</a>
  434.       </div>
  435.       <!-- JacaScript -->
  436.       <div>
  437.         <a href=""><img src="static/images/JavaScript.png" alt="" /></a>
  438.         <a href="">JacaScript</a>
  439.       </div>
  440.       <!-- 服务端 -->
  441.       <div>
  442.         <a href=""><img src="static/images/code.png" alt="" /></a>
  443.         <a href="">服务端</a>
  444.       </div>
  445.       <!-- 数据库 -->
  446.       <div>
  447.         <a href=""><img src="static/images/sql.png" alt="" /></a>
  448.         <a href="">数据库</a>
  449.       </div>
  450.       <!-- 移动端 -->
  451.       <div>
  452.         <a href=""><img src="static/images/app.png" alt="" /></a>
  453.         <a href="">移动端</a>
  454.       </div>
  455.       <!-- 手册 -->
  456.       <div>
  457.         <a href=""><img src="static/images/manual.png" alt="" /></a>
  458.         <a href="">手册</a>
  459.       </div>
  460.       <!-- 工具 -->
  461.       <div>
  462.         <a href=""><img src="static/images/tool2.png" alt="" /></a>
  463.         <a href="">工具</a>
  464.       </div>
  465.       <!-- 直播 -->
  466.       <div>
  467.         <a href=""><img src="static/images/live.png" alt="" /></a>
  468.         <a href="">直播</a>
  469.       </div>
  470.     </nav>
  472.     <!-- 推荐课程 -->
  473.     <div class="course">
  474.       <h2>推荐课程</h2>
  475.       <!-- 两个横向排列的课程：使用flex布局 -->
  476.       <div class="course-horizontal-list">
  477.         <a href=""
  478.           ><img
  479.             src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg"
  480.             alt=""
  481.         /></a>
  482.         <a href=""
  483.           ><img
  484.             src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg"
  485.             alt=""
  486.         /></a>
  487.       </div>
  488.       <!-- 两个纵向的课程列表实现思路：
  489.         1.把整个列表<ul>标签用flex布局,每个<li>标签作为一个flex项目,垂直方向布局,允许换行.
  490.         2.列表的每一行作为一个flex项目,横向排列,即实现图片在左,文字在右边的排列格式,调整项目宽度实现页面效果.
  491.       -->
  492.       <div class="course-vertical-list">
  493.         <ul>
  494.           <li>
  495.             <div>
  496.               <!-- 左侧图片内容 -->
  497.               <a href="">
  498.                 <img
  499.                   src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg"
  500.                   alt=""
  501.                 />
  502.               </a>
  503.               <!-- 右侧文字介绍内容区div -->
  504.               <div class="color888">
  505.                 <h3>CI框架30分钟极速入门</h3>
  506.                 <p>
  507.                   <span>中级</span>
  508.                   <span>61239次播放</span>
  509.                 </p>
  510.               </div>
  511.             </div>
  512.             <div class="bottom-bgview" style="background-color: #edeff0;"></div>
  513.           </li>
  514.           <li>
  515.             <div>
  516.               <a href="">
  517.                 <img
  518.                   src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg"
  519.                   alt=""
  520.                 />
  521.               </a>
  522.               <div class="color888">
  523.                 <h3>2018前端入门_HTML5</h3>
  524.                 <p>
  525.                   <span>中级</span>
  526.                   <span>61239次播放</span>
  527.                 </p>
  528.               </div>
  529.             </div>
  530.             <div class="bottom-bgview" style="background-color: #edeff0;"></div>
  531.           </li>
  532.         </ul>
  533.       </div>
  534.     </div>
  536.     <!-- 最新更新 -->
  537.     <div>
  538.       <h2>最新更新</h2>
  539.       <div class="course-vertical-list">
  540.         <ul>
  541.           <li>
  542.             <div>
  543.               <a href=""
  544.                 ><img
  545.                   src="https://img.php.cn/upload/course/000/000/015/5e0d6387e45cc764.png"
  546.                   alt=""
  547.               /></a>
  548.               <div class="color888 newupdate-desc">
  549.                 <h3>PHP快速操控Excel之PhpSpreadsheet</h3>
  550.                 <p class="newupdate-desc-content">
  551.                   老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，用纯
  552.                   php
  553.                   编写的库，它提供了一组类，允许您读取和写入不同的电子表格文件格式！php中文网欧阳克老师原创课程！注：PHP运行环境需要PHP7.1以上
  554.                 </p>
  555.                 <p class="newupdate-desc-message">
  556.                   <span>中级</span>
  557.                   <span>61239次播放</span>
  558.                 </p>
  559.               </div>
  560.             </div>
  561.             <div class="bottom-bgview" style="background-color: #edeff0;"></div>
  562.           </li>
  563.           <li>
  564.             <div>
  565.               <a href=""
  566.                 ><img
  567.                   src="https://img.php.cn/upload/course/000/000/015/5e0d82773b4fe808.png"
  568.                   alt=""
  569.               /></a>
  570.               <div class="color888 newupdate-desc">
  571.                 <h3>Thinkphp6.0正式版视频教程</h3>
  572.                 <p class="newupdate-desc-content">
  573.                   Thinkphp6.0从2019年10月24日正式发布，相对测试版，有很多变动，目前TP6已经相对比较稳定了，所以php中文网在2020年再次重新录制课程，帮助快速入门！相关推荐：
  574. ThinkPHP6.0完全开发手册(注解版) https://www.php.cn/course/1049.html
  575.                 </p>
  576.                 <p class="newupdate-desc-message">
  577.                   <span>中级</span>
  578.                   <span>61239次播放</span>
  579.                 </p>
  580.               </div>
  581.             </div>
  582.             <div class="bottom-bgview" style="background-color: #edeff0;"></div>
  583.           </li>
  584.           <li>
  585.             <div>
  586.               <a href=""
  587.                 ><img
  588.                   src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg"
  589.                   alt=""
  590.               /></a>
  591.               <div class="color888 newupdate-desc">
  592.                 <h3>2019python自学视频</h3>
  593.                 <p class="newupdate-desc-content">
  594.                   本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程
  595.                 </p>
  596.                 <p class="newupdate-desc-message">
  597.                   <span>中级</span>
  598.                   <span>61239次播放</span>
  599.                 </p>
  600.               </div>
  601.             </div>
  602.             <div class="bottom-bgview" style="background-color: #edeff0;"></div>
  603.           </li>
  604.           <li>
  605.             <div>
  606.               <a href=""
  607.                 ><img
  608.                   src="https://img.php.cn/upload/course/000/000/015/5da7e9b7895ed229.png"
  609.                   alt=""
  610.               /></a>
  611.               <div class="color888 newupdate-desc">
  612.                 <h3>PHP开发免费公益直播课</h3>
  613.                 <p class="newupdate-desc-content">
  614.                   主讲：php中文网-朱老师( Peter Zhu)
  615. 时间：2019.10.17 晚 20:00-22:00
  616. 主题：如何高效的学习一门新技术？ 
  617. 具体内容：1. 2020了, 还有哪些值得学习的新技术? 2.如何高效的学习前端开发? 3.如果高效的学习PHP开发?4.phpStudy V8 新功能介绍与演示 5.小皮面板功能介绍
  618.                 </p>
  619.                 <p class="newupdate-desc-message">
  620.                   <span>中级</span>
  621.                   <span>61239次播放</span>
  622.                 </p>
  623.               </div>
  624.             </div>
  625.             <div class="bottom-bgview" style="background-color: #edeff0;"></div>
  626.           </li>
  627.           <li>
  628.             <div>
  629.               <a href=""
  630.                 ><img
  631.                   src="https://img.php.cn/upload/course/000/000/014/5da6a50535529903.jpg"
  632.                   alt=""
  633.               /></a>
  634.               <div class="color888 newupdate-desc">
  635.                 <h3>从零开始到WEB响应式布局</h3>
  636.                 <p class="newupdate-desc-content">
  637.                   重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点
  638.                 </p>
  639.                 <p class="newupdate-desc-message">
  640.                   <span>中级</span>
  641.                   <span>61239次播放</span>
  642.                 </p>
  643.               </div>
  644.             </div>
  645.             <div class="bottom-bgview" style="background-color: #edeff0;"></div>
  646.           </li>
  647.           <li>
  648.             <div>
  649.               <a href=""
  650.                 ><img
  651.                   src="https://img.php.cn/upload/course/000/000/015/5e0d6387e45cc764.png"
  652.                   alt=""
  653.               /></a>
  654.               <div class="color888 newupdate-desc">
  655.                 <h3>CI框架30分钟极速入门</h3>
  656.                 <p class="newupdate-desc-content">
  657.                   老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，用纯
  658.                   php
  659.                   编写的库，它提供了一组类，允许您读取和写入不同的电子表格文件格式！php中文网欧阳克老师原创课程！注：PHP运行环境需要PHP7.1以上
  660.                 </p>
  661.                 <p class="newupdate-desc-message">
  662.                   <span>中级</span>
  663.                   <span>61239次播放</span>
  664.                 </p>
  665.               </div>
  666.             </div>
  667.             <div class="bottom-bgview" style="background-color: #edeff0;"></div>
  668.           </li>
  669.         </ul>
  670.       </div>
  671.     </div>
  673.     <!-- 最新文章 -->
  674.     <div>
  675.       <h2>最新文章</h2>
  676.       <div class="new-article">
  677.         <ul>
  678.           <li>
  679.             <div class="new-article-desc">
  680.               <div>
  681.                 <div class="color888">
  682.                   <h5>测试laravel commands的方法详解</h5>
  683.                   <p>发布时间：2020-04-13</p>
  684.                 </div>
  685.               </div>
  686.               <div>
  687.                 <a href="">
  688.                   <img
  689.                     src="https://img.php.cn/upload/article/000/000/020/5e93ff38338a9884.jpg"
  690.                     alt=""
  691.                   />
  692.                 </a>
  693.               </div>
  694.             </div>
  695.             <div style="background-color: #edeff0;"></div>
  696.           </li>
  697.           <li>
  698.             <div class="new-article-desc">
  699.               <div>
  700.                 <div class="color888">
  701.                   <h5>windows电脑开机后鼠标一直转圈怎么办</h5>
  702.                   <p>发布时间：2020-04-13</p>
  703.                 </div>
  704.               </div>
  705.               <div>
  706.                 <a href="">
  707.                   <img
  708.                     src="https://img.php.cn/upload/article/000/000/041/5e93fd9ee73ce892.jpg"
  709.                     alt=""
  710.                   />
  711.                 </a>
  712.               </div>
  713.             </div>
  714.             <div style="background-color: #edeff0;"></div>
  715.           </li>
  716.           <li>
  717.             <div class="new-article-desc">
  718.               <div>
  719.                 <div class="color888">
  720.                   <h5>5个linux基础入门视频教程推荐，适合linux初学者学习！</h5>
  721.                   <p>发布时间：2020-04-12</p>
  722.                 </div>
  723.               </div>
  724.               <div>
  725.                 <a href="">
  726.                   <img
  727.                     src="https://img.php.cn/upload/article/000/000/164/59325015bc179689.jpg"
  728.                     alt=""
  729.                   />
  730.                 </a>
  731.               </div>
  732.             </div>
  733.             <div style="background-color: #edeff0;"></div>
  734.           </li>
  735.           <li>
  736.             <div class="new-article-desc">
  737.               <div>
  738.                 <div class="color888">
  739.                   <h5>win10电脑更新卡在0%怎么办</h5>
  740.                   <p>发布时间：2020-04-11</p>
  741.                 </div>
  742.               </div>
  743.               <div>
  744.                 <a href="">
  745.                   <img
  746.                     src="https://img.php.cn/upload/article/000/000/041/5e93fa8f1d850923.jpg"
  747.                     alt=""
  748.                   />
  749.                 </a>
  750.               </div>
  751.             </div>
  752.             <div style="background-color: #edeff0;"></div>
  753.           </li>
  754.           <li>
  755.             <div class="new-article-desc">
  756.               <div>
  757.                 <div class="color888">
  758.                   <h5>win7系统恢复出厂设置后账户被停用了怎么解决</h5>
  759.                   <p>发布时间：2020-04-11</p>
  760.                 </div>
  761.               </div>
  762.               <div>
  763.                 <a href="">
  764.                   <img
  765.                     src="https://img.php.cn/upload/article/000/000/041/5e93f7ffef533736.jpg"
  766.                     alt=""
  767.                   />
  768.                 </a>
  769.               </div>
  770.             </div>
  771.             <div style="background-color: #edeff0;"></div>
  772.           </li>
  773.           <li>
  774.             <div class="new-article-desc">
  775.               <div>
  776.                 <div class="color888">
  777.                   <h5>sublime正则搜索替换修改数据的方法</h5>
  778.                   <p>发布时间：2020-04-11</p>
  779.                 </div>
  780.               </div>
  781.               <div>
  782.                 <a href="">
  783.                   <img
  784.                     src="https://img.php.cn/upload/article/000/000/020/5e91923747dab842.jpg"
  785.                     alt=""
  786.                   />
  787.                 </a>
  788.               </div>
  789.             </div>
  790.             <div style="background-color: #edeff0;"></div>
  791.           </li>
  792.         </ul>
  793.         <div class="lastrow" style="background-color: #fff;">
  794.           更多内容
  795.         </div>
  796.       </div>
  797.     </div>
  799.     <!-- 最新博文 -->
  800.     <div class="new-blogview">
  801.       <h2>最新博文</h2>
  802.       <div class="new-blog">
  803.         <ul>
  804.           <li>
  805.             <div>
  806.               <p class="new-blog-content">细说选择器：简单选择器、上下文选择器、伪类选择器、其它选择器</p>
  807.               <span>2020-04-13</span>
  808.             </div>
  809.             <div></div>
  810.           </li>
  811.           <li>
  812.             <div>
  813.               <p class="new-blog-content">CSS 中各类选择器的属性及应用</p>
  814.               <span>2020-04-13</span>
  815.             </div>
  816.             <div></div>
  817.           </li>
  818.           <li>
  819.             <div>
  820.               <p class="new-blog-content">CSS3：弹性盒子flex布局</p>
  821.               <span>2020-04-12</span>
  822.             </div>
  823.             <div></div>
  824.           </li>
  825.           <li>
  826.             <div>
  827.               <p class="new-blog-content">flex容器中的主轴方向与项目换行缩写、主轴，交叉轴和多行容器交叉轴项目对齐以及以及flex属性的缩写和案例</p>
  828.               <span>2020-04-12</span>
  829.             </div>
  830.             <div></div>
  831.           </li>
  832.           <li>
  833.             <div>
  834.               <p class="new-blog-content">Jquery+AJAX上传文件，无刷新上传并重命名文件</p>
  835.               <span>2020-04-11</span>
  836.             </div>
  837.             <div></div>
  838.           </li>
  839.         </ul>
  840.         <div class="more-content"><span>更多内容</span></div>
  841.       </div>
  842.     </div>
  844.     <!-- 最新问答 -->
  845.     <div class="new-blogview">
  846.       <h2>最新问答</h2>
  847.       <div class="new-blog">
  848.         <ul>
  849.           <li>
  850.             <div>
  851.               <p class="new-blog-content">加入判断条件后页面报错不跳转！</p>
  852.               <span>2020-04-13</span>
  853.             </div>
  854.             <div></div>
  855.           </li>
  856.           <li>
  857.             <div>
  858.               <p class="new-blog-content">为什么老师，你de button按钮处可以有两个ID是一样的id="loginbtn" 而不会报错啊</p>
  859.               <span>2020-04-13</span>
  860.             </div>
  861.             <div></div>
  862.           </li>
  863.           <li>
  864.             <div>
  865.               <p class="new-blog-content">url访问admin下的控制器的方法，有问题</p>
  866.               <span>2020-04-12</span>
  867.             </div>
  868.             <div></div>
  869.           </li>
  870.           <li>
  871.             <div>
  872.               <p class="new-blog-content">php+workerman实现新订单提示语音</p>
  873.               <span>2020-04-12</span>
  874.             </div>
  875.             <div></div>
  876.           </li>
  877.           <li>
  878.             <div>
  879.               <p class="new-blog-content">不出现tp6.0页面</p>
  880.               <span>2020-04-11</span>
  881.             </div>
  882.             <div></div>
  883.           </li>
  884.         </ul>
  885.         <div class="more-content"><span>更多内容</span></div>
  886.       </div>
  887.     </div>
  889.     <!-- 底部导航 -->
  890.     <div class="footer-space"></div>
  891.     <footer>
  892.       <a href="">
  893.         <span class="iconfont">&#xe65f;</span>
  894.         <span>首页</span>
  895.       </a>
  896.       <a href="">
  897.         <span class="iconfont">&#xe613;</span>
  898.         <span>视频</span>
  899.       </a>
  900.       <a href="">
  901.         <span class="iconfont">&#xe67e;</span>
  902.         <span>社区</span>
  903.       </a>
  904.       <a href="">
  905.         <span class="iconfont">&#xe51e;</span>
  906.         <span>我的</span>
  907.       </a>
  908.     </footer>
  909.   </body>
  910. </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