search

博客列表 >Flex布局案例：实现php中文网首页

Flex布局案例：实现php中文网首页

一米阳光♡
一米阳光♡原创
2020年04月13日 18:01:48284浏览

演示地址：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>
上一条：仿Php中文网作业下一条：微信的openid和unionid
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多