Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 课堂案例高仿首页
Blogger Information
Blog 56
fans 1
comment 0
visits 62311
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
课堂案例高仿首页
零龙
Original
655 people have browsed it

课堂案例高仿首页

  • CSS源码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <link rel="stylesheet" href="font/iconfont.css" />
    7.   <title>所学案例</title>
    8. </head>
    9. <style>
    10.   * {
    11.     /* 通用选择器*/
    12.     margin: 0; /*外边距上左下右0px*/
    13.     padding: 0; /*内边距上左下右0px*/
    14.     box-sizing: border-box; /*设定元素的宽和高*/
    15.     font-family: Arial, Helvetica, sans-serif;
    16.   }
    17.   a {
    18.     text-decoration: none; /*设定网页超链接无下划线*/
    19.     color: #fff; /*设定网页超链文字颜色白色*/
    20.     width: 150px;
    21.     height: 50px;
    22.     line-height: 50px;
    23.   }
    24.   header {
    25.     width: 100%; /*网页头部宽度自适应*/
    26.     height: 50px; /*网页头部高度100px*/
    27.     background-color: #333; /*网页头部背景颜色#333*/
    28.     display: flex; /*声明flexbox容器*/
    29.     flex-flow: row nowrap; /*主轴方向: 行方向，且不换行：*/
    30.     align-items: center; /*设定弹性盒的字体居中*/
    31.     font-size: 14px;
    32.   }
    34.   header > a {
    35.     /*对弹性盒第一个元素*/
    36.     flex: 0 1 80;
    37.     text-align: center;
    38.   }
    39.   header > a:first-of-type {
    40.     background: url(image/sk2.png) no-repeat;
    41.     background-size: 100px 50px;
    42.     background-position: center;
    43.   }
    44.   header > a:last-of-type {
    45.     margin-left: auto;
    46.     display: flex;
    47.     flex-flow: row nowrap;
    48.   }
    49.   header > a > span {
    50.     width: 50px;
    51.     text-align: center;
    52.     font-size: 20px;
    53.   }
    54.   header > a > span:hover:not(:last-of-type) {
    55.     background-color: #ffffff27;
    56.   }
    57.   header > a:hover:not(:first-of-type):not(:last-of-type) {
    58.     border-bottom: 3px solid rgba(0, 128, 0, 0.747);
    59.   }
    60.   header > a > span:hover .menu {
    61.     display: block;
    62.   }
    63.   header > a:nth-of-type(6):hover .js {
    64.     display: block;
    65.   }
    66.   .menu {
    67.     width: 200px;
    68.     height: 200px;
    69.     position: fixed;
    70.     top: 50px;
    71.     right: 10px;
    72.     background-image: url("image/pr.png");
    73.     box-shadow: 10px 3px 15px #888888;
    74.     display: none;
    75.   }
    76.   .mtop {
    77.     width: 200px;
    78.     height: 80px;
    79.     position: relative;
    80.     top: 7px;
    81.   }
    82.   .mtop > .xx {
    83.     width: 140px;
    84.     height: 68px;
    85.     float: left;
    86.     padding-left: 15px;
    87.     color: white;
    88.     font-size: 12px;
    89.     text-align: left;
    90.   }
    91.   .mtop > .tx {
    92.     width: 60px;
    93.     height: 68px;
    94.     float: left;
    95.     text-align: center;
    96.     padding-top: 10px;
    97.   }
    98.   .xx > .username {
    99.     width: 140px;
    100.     height: 34px;
    101.     line-height: 34px;
    102.     padding-top: 10px;
    103.   }
    104.   .xx > .num {
    105.     width: 140px;
    106.     height: 34px;
    107.     line-height: 34px;
    108.     padding-right: 10px;
    109.   }
    110.   .mfoot {
    111.     display: flex;
    112.     flex-flow: row wrap;
    113.     justify-content: center;
    114.     padding-top: 15px;
    115.   }
    116.   .mfoot > .item {
    117.     width: 80px;
    118.     height: 30px;
    119.     border: 1px solid #ccc;
    120.     color: #666;
    121.     text-align: center;
    122.     margin: 1px;
    123.     background-color: #f1f1f1;
    124.     font-size: 12px;
    125.     line-height: 30px;
    126.     margin: 3px;
    127.   }
    128.   .exit {
    129.     margin-top: 15px;
    130.     height: 20px;
    131.     display: flex;
    132.     flex-flow: row wrap;
    133.   }
    134.   .exit > .item {
    135.     width: 50%;
    136.     color: #666;
    137.     font-size: 12px;
    138.     line-height: 20px;
    139.   }
    140.   .exit > .item:first-of-type {
    141.     text-align: left;
    142.     padding-left: 10px;
    143.   }
    144.   .exit > .item:last-of-type {
    145.     text-align: right;
    146.     padding-right: 10px;
    147.   }
    148.   .js {
    149.     position: fixed;
    150.     top: 52px;
    151.     border: 1px solid #f2f2f2;
    152.     width: 200px;
    153.     height: 90px;
    154.     background-color: white;
    155.     box-shadow: 0px 0px 2px rgba(165, 165, 165, 1);
    156.     display: flex;
    157.     justify-content: center;
    158.     flex-flow: row wrap;
    159.     line-height: 30px;
    160.     font-size: 14px;
    161.     display: none;
    162.   }
    163.   .js > .item {
    164.     color: #666;
    165.     width: 50%;
    166.     height: 30px;
    167.     float: left;
    168.     font-size: 14px;
    169.     text-align: left;
    170.     padding-left: 10px;
    171.   }
    172.   .js > .item:hover {
    173.     background-color: #e1e1e1;
    174.   }

  • HTML源码

  1.     <header>
  2.       <a href=""></a>
  3.       <a href="">首页</a>
  4.       <a href="">视频教程</a>
  5.       <a href="">入门教程</a>
  6.       <a href="">社区问答</a>
  7.       <a href=""
  8.         >技术文章<span class="iconfont icon-jiantouarrow486"></span>
  9.         <div class="js">
  10.           <div class="item">PHP教程</div>
  11.           <div class="item">PHP框架</div>
  12.           <div class="item">PHP小知识</div>
  13.           <div class="item">HTML教程</div>
  14.           <div class="item">CSS教程</div>
  15.           <div class="item">JS教程</div>
  16.         </div>
  17.       </a>
  18.       <a href="">资源下载</a>
  19.       <a href="">工具下载</a>
  20.       <a href="">PHP培训</a>
  21.       <a href=""
  22.         ><span class="iconfont icon-laba"></span>
  23.         <span class="iconfont icon-touxiang">
  24.           <div class="menu">
  25.             <div class="mtop">
  26.               <div class="xx">
  27.                 <div class="username">姓名：刘德华</div>
  28.                 <div class="num">学号：9527</div>
  29.               </div>
  30.               <div class="tx">
  31.                 <img src="image/tx.png" width="50px" height="50px" />
  32.               </div>
  33.             </div>
  34.             <div class="mfoot">
  35.               <span class="item">我的主页</span>
  36.               <span class="item">我的微博</span>
  37.               <span class="item">我的作业</span>
  38.               <span class="item">个人设置</span>
  39.             </div>
  40.             <div class="exit">
  41.               <span class="item">安全退出</span>
  42.               <span class="item">绑定微信</span>
  43.             </div>
  44.           </div>
  45.         </span>
  46.       </a>
  47.     </header>
  • 网页header图片示例：

首页内容CSS源码

  1. .container {
  2.       width: 1200px;
  3.       height: 500px;
  4.       margin: 50px auto;
  5.     }
  6.     .row {
  7.       width: 1200px;
  8.       height: 500px;
  9.       border-radius: 5px;
  10.       box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.212);
  11.     }
  12.     .row > .left {
  13.       width: 200px;
  14.       background-color: #333;
  15.       height: 500px;
  16.       border-radius: 5px 0 0 5px;
  17.       float: left;
  18.       display: flex;
  19.       flex-flow: row wrap;
  20.       justify-content: center;
  21.       padding-top: 5px;
  22.     }
  23.     .row > .left > .item {
  24.       width: 200px;
  25.       height: 58px;
  26.       padding-left: 20px;
  27.       line-height: 60px;
  28.       position: relative;
  29.     }
  30.     .row > .left > .item a {
  31.       color: #fff;
  32.     }
  33.     .row > .left > .item:hover {
  34.       background-color: #666;
  35.     }
  36.     .row > .left > .item > .icon-arrow-right {
  37.       color: #fff;
  38.       position: absolute;
  39.       left: 170px;
  40.     }
  41.     .row > .right {
  42.       float: left;
  43.       width: 1000px;
  44.       height: 500px;
  45.     }
  46.     .row > .right > .right-t {
  47.       width: 100%;
  48.       height: 60px;
  49.       border-radius: 5px 0 0 0;
  50.       display: flex;
  51.       font-size: 14px;
  52.     }
  53.     .right-t > .item:not(:last-of-type) {
  54.       width: 110px;
  55.       height: 80px;
  56.       flex-flow: row nowrap;
  57.       text-align: center;
  58.       line-height: 60px;
  59.     }
  60.     .right-t > .item:last-of-type {
  61.       flex-grow: 1;
  63.       line-height: 50px;
  64.     }
  65.     .right-t > .item:first-of-type span {
  66.       color: red;
  67.       font-size: 20px;
  68.       line-height: 40px;
  69.     }
  70.     .right-t .item:nth-of-type(3) span {
  71.       color: coral;
  72.       font-size: 20px;
  73.       line-height: 40px;
  74.     }
  75.     .right-t .item:nth-of-type(5) span {
  76.       color: green;
  77.       font-size: 20px;
  78.       line-height: 40px;
  79.     }
  80.     .right-t > .item:last-of-type {
  81.       margin-top: 10px;
  82.     }
  83.     .right-t > .item:last-of-type input {
  84.       width: 150px;
  85.       height: 35px;
  86.       float: left;
  87.       background-color: #e2e2e2;
  88.       border: 0;
  89.       padding-left: 3px;
  90.       border-bottom: 1px #c7c7c7 solid;
  91.       color: #6d6d6d;
  92.     }
  93.     .right-t > .item:last-of-type .search {
  94.       width: 30px;
  95.       height: 35px;
  96.       background-color: #e2e2e2;
  97.       float: left;
  98.       line-height: 35px;
  99.       border-bottom: 1px #c7c7c7 solid;
  100.     }
  101.     .row > .right > .right-c {
  102.       background-image: url("image/phpstudy.png");
  103.       background-size: 1000px;
  104.       height: 330px;
  105.     }
  106.     .row > .right > .right-f {
  107.       display: flex;
  108.       flex-flow: row nowrap;
  109.       margin: 10px;
  110.     }
  111.     .right-f > .item {
  112.       width: 240px;
  113.       height: 90px;
  114.       margin-right: 10px;
  115.     }
  116.     .right-f > .item:first-of-type {
  117.       background-image: url("https://www.php.cn/static/images/index_yunv.jpg");
  118.       border-radius: 5px;
  119.       margin-left: 5px;
  120.     }
  121.     .right-f > .item:nth-of-type(2) {
  122.       background-image: url("https://www.php.cn/static/images/index_php_item2_.png?1");
  123.       border-radius: 5px;
  124.     }
  125.     .right-f > .item:nth-of-type(3) {
  126.       background-image: url("https://www.php.cn/static/images/index_php_item3.jpg?1");
  127.       border-radius: 5px;
  128.     }
  129.     .right-f > .item:last-of-type {
  130.       background-image: url("https://www.php.cn/static/images/index_php_new4.jpg?1");
  131.       border-radius: 5px;
  132.     }
  133.     .row-1 {
  134.       background: url("https://img.php.cn/upload/article/000/000/003/5b35fe49bfd77495.png") no-repeat ;
  135.       width: 1200px;
  136.       height: 80px;
  137.       margin: 20px auto;
  138.       border-radius: 5px;
  139.     }
  140.     .row-2 {
  141.       width: 1200px;
  142.       height: 420px;
  143.       margin: 20px auto;
  144.     }
  145.     .row-2 > .row-2-1 {
  146.       width: 300px;
  147.       height: 420px;
  148.       border-radius: 10px;
  149.       box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
  150.       float: left;
  151.       position: relative;
  152.     }
  153.     .row-2 > .row-2-1 > .row-2-1-t {
  154.       width: 290px;
  155.       height: 35px;
  156.       margin: 5px;
  157.       text-align: center;
  158.       line-height: 35px;
  159.       border-bottom: 1px solid #e1e1e1;
  160.     }
  161.     .row-2 > .row-2-1 > .row-2-1-t span {
  162.       position: absolute;
  163.       top: 0;
  164.       right: 0;
  165.       font-size: 35px;
  166.       color: red;
  167.     }
  168.     .row-2 > .row-2-1 > .row-2-1-c {
  169.       width: 300px;
  170.       height: 385px;
  171.     }
  172.     .row-2-1-c > ul {
  173.       width: 280px;
  174.       height: 385px;
  175.       overflow: hidden;
  176.     }
  177.     .row-2-1-c > ul > li {
  178.       width: 280px;
  179.       height: 21px;
  180.       margin: 5px;
  181.       padding-left: 5px;
  182.       float: left;
  183.       font-size: 14px;
  184.     }
  185.     .row-2 > .row-2-2 {
  186.       width: 600px;
  187.       height: 420px;
  188.       border-radius: 10px;
  189.       box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
  190.       float: left;
  191.       margin-left: 10px;
  192.     }
  193.     .row-2 > .row-2-2 > .row-2-2-t {
  194.       width: 580px;
  195.       height: 35px;
  196.       margin: 5px;
  197.       padding-left: 10px;
  198.       line-height: 35px;
  199.       border-bottom: 1px solid #e1e1e1;
  200.     }
  201.     .row-2 > .row-2-2 > .row-2-2-t > span {
  202.       color: red;
  203.       font-size: 25px;
  204.       float: right;
  205.     }
  206.     .row-2 > .row-2-2 > .row-2-2-c {
  207.       width: 580px;
  208.       height: 385px;
  209.       display: flex;
  210.       justify-content: center;
  211.       flex-flow: row wrap;
  212.       margin-top: 20px;
  213.     }
  214.     .row-2-2-c > .item:first-of-type {
  215.       width: 170px;
  216.       height: 140px;
  217.       margin-left: 20px;
  218.       background: url("https://img.php.cn/upload/course/000/000/001/5eeb3345b206d506.jpg");
  219.       background-size: 170px 90px;
  220.       background-repeat: no-repeat;
  221.       border-radius: 10px;
  222.       box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.342);
  223.     }
  224.     .row-2-2-c > .item:nth-of-type(2) {
  225.       width: 170px;
  226.       height: 140px;
  227.       margin-left: 20px;
  228.       background: url("https://img.php.cn/upload/course/000/000/054/5eec277230a4a933.png");
  229.       background-size: 170px 90px;
  230.       background-repeat: no-repeat;
  231.       border-radius: 10px;
  232.       box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.342);
  233.     }
  234.     .row-2-2-c > .item:nth-of-type(3) {
  235.       width: 170px;
  236.       height: 140px;
  237.       margin-left: 20px;
  238.       background: url("https://img.php.cn/upload/course/000/000/015/5ecbc289676f6665.png");
  239.       background-size: 170px 90px;
  240.       background-repeat: no-repeat;
  241.       border-radius: 10px;
  242.       box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.342);
  243.     }
  244.     .row-2-2-c > .item:nth-of-type(4) {
  245.       width: 170px;
  246.       height: 140px;
  247.       margin-left: 20px;
  248.       background: url("https://img.php.cn/upload/course/000/000/014/5eba3e40b2fc6218.jpg");
  249.       background-size: 170px 90px;
  250.       background-repeat: no-repeat;
  251.       border-radius: 10px;
  252.       box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.342);
  253.     }
  254.     .row-2-2-c > .item:nth-of-type(5) {
  255.       width: 170px;
  256.       height: 140px;
  257.       margin-left: 20px;
  258.       background: url("https://img.php.cn/upload/course/000/000/014/5eb5222662408719.jpg");
  259.       background-size: 170px 90px;
  260.       background-repeat: no-repeat;
  261.       border-radius: 10px;
  262.       box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.342);
  263.     }
  264.     .row-2-2-c > .item:last-of-type {
  265.       width: 170px;
  266.       height: 140px;
  267.       margin-left: 20px;
  268.       background: url("https://img.php.cn/upload/course/000/000/015/5e0d6387e45cc764.png");
  269.       background-size: 170px 90px;
  270.       background-repeat: no-repeat;
  271.       border-radius: 10px;
  272.       box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.342);
  273.     }
  274.     .row-2-2-c > .item > div {
  275.       width: 170px;
  276.       height: 70px;
  277.       background-color: white;
  278.       margin-top: 70px;
  279.       border-radius: 10px;
  280.       font-size: 14px;
  281.       padding-left: 10px;
  282.       box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.342);
  283.     }
  284.     .row-2-2-c > .item > div > a {
  285.       width: 170px;
  286.       height: 30px;
  287.       color: #000;
  288.       line-height: 30px;
  289.     }
  290.     .row-2-2-c > .item > div > span {
  291.       background-color: red;
  292.       color: white;
  293.       font-size: 12px;
  294.       padding: 1px;
  295.     }
  296.     .row-2 > .row-2-3 {
  297.       width: 265px;
  298.       height: 420px;
  299.       border-radius: 10px;
  300.       box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
  301.       float: left;
  302.       margin-left: 10px;
  303.     }
  304.     .row-2 > .row-2-3 > .row-2-3-t {
  305.       width: 255px;
  306.       height: 35px;
  307.       margin: 5px;
  308.       padding-left: 10px;
  309.       line-height: 35px;
  310.       border-bottom: 1px solid #e1e1e1;
  311.     }
  312.     .row-2 > .row-2-3 > .row-2-3-t > span {
  313.       float: right;
  314.       margin-right: 10px;
  315.       font-weight: bolder;
  316.     }
  317.     .row-2-3-c {
  318.       width: 255px;
  319.       height: 385px;
  320.       display: flex;
  321.       flex-flow: column nowrap;
  322.       justify-content: center;
  323.       margin-left: 10px;
  324.     }
  325.     .row-2-3-c > .item:first-of-type > .item-1 {
  326.       width: 50px;
  327.       height: 50px;
  328.       background: url("image/cysc.png");
  329.       background-position: -6px -8px;
  330.       background-repeat: no-repeat;
  331.       float: left;
  332.       margin-top: 8px;
  333.       margin-left: 5px;
  334.     }
  335.     .row-2-3-c > .item:nth-of-type(2) > .item-1 {
  336.       width: 50px;
  337.       height: 50px;
  338.       background: url("image/cysc.png");
  339.       background-position: -6px -61px;
  340.       background-repeat: no-repeat;
  341.       float: left;
  342.       margin-top: 8px;
  343.       margin-left: 5px;
  344.     }
  345.     .row-2-3-c > .item:nth-of-type(3) > .item-1 {
  346.       width: 50px;
  347.       height: 50px;
  348.       background: url("image/cysc.png");
  349.       background-position: -6px -116px;
  350.       background-repeat: no-repeat;
  351.       float: left;
  352.       margin-top: 8px;
  353.       margin-left: 5px;
  354.     }
  355.     .row-2-3-c > .item:nth-of-type(4) > .item-1 {
  356.       width: 50px;
  357.       height: 50px;
  358.       background: url("image/cysc.png");
  359.       background-position: -6px -170px;
  360.       background-repeat: no-repeat;
  361.       float: left;
  362.       margin-top: 8px;
  363.       margin-left: 5px;
  364.     }
  365.     .row-2-3-c > .item:nth-of-type(5) > .item-1 {
  366.       width: 50px;
  367.       height: 50px;
  368.       background: url("image/cysc.png");
  369.       background-position: -6px -226px;
  370.       background-repeat: no-repeat;
  371.       float: left;
  372.       margin-top: 8px;
  373.       margin-left: 5px;
  374.     }
  375.     .row-2-3-c > .item:last-of-type > .item-1 {
  376.       width: 50px;
  377.       height: 50px;
  378.       background: url("image/cysc.png");
  379.       background-position: -6px -280px;
  380.       background-repeat: no-repeat;
  381.       float: left;
  382.       margin-top: 8px;
  383.       margin-left: 5px;
  384.     }
  385.     .row-2-3-c > .item > .item-2 {
  386.       width: 200px;
  387.       height: 50px;
  389.       float: left;
  390.       font-size: 14px;
  391.     }
  392.     .row-2-3-c > .item > .item-2 a{
  393.       padding-left: 8px;
  394.       color:rgb(37, 37, 37);
  395.       line-height: 25px;
  396.     }
  397.     .row-2-3-c > .item > .item-2 a:hover{
  398.       color: #888888;
  399.     }
  400.     .row-3{
  401.       width: 1200px;
  402.       height: 495px;
  403.     }
  404.     .row-3-left{
  405.       width: 355px;
  406.       height: 495px;
  407.       margin-top: 10px;      
  408.       border-radius: 10px;
  409.       float: left;
  411.     }
  412.     .row-3-left-1{
  413.       width: 355px;
  414.       height: 180px;
  415.       margin-bottom: 10px;
  416.       border-radius: 10px;
  417.       box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
  418.       float: left;
  419.       background: url("https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg") no-repeat;
  420.       background-size: 355px 180px;
  421.       border: #fff 1px solid;
  423.     }
  424.     .row-3-left-2{
  425.       width: 355px;
  426.       height: 300px;
  427.       border-radius: 10px;
  428.       box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
  429.       float: left;
  431.     }
  432.     .row-3-left-2 > ul{
  433.       width: 355px;
  434.       height: 300px;
  436.     }
  437.     .row-3-left-2 ul li{
  438.       width: 340px;
  439.       height: 28px;
  440.       float: left;
  441.       font-size: 14px;
  442.       white-space: nowrap;
  443.       list-style:none;
  445.     }
  446.     .row-3-left-2 ul li a{
  447.       line-height: 20px;  
  448.       width: 280px;
  449.       height: 30px;  
  450.       overflow: hidden; 
  451.       display: block;
  452.       color: #000;
  453.     }
  454.     .row-3-left-2 ul li span{
  455.       float: right;  
  456.       color: #999;   
  457.     }
  458.     .row-3-left-2 ul li .icon-arrow-right{
  459.       float: left;
  460.       padding-left: 5px;
  461.       font-size: 12px;
  462.       line-height: 20px;
  463.       width: 20px;
  464.       color: #999;
  465.     }
  466.     .row-3-left-2-1{
  467.        width: 345px;
  468.       height: 35px;
  469.       margin: 5px;
  470.       padding-left: 10px;
  471.       line-height: 35px;
  472.       border-bottom: 2px solid red;
  473.       font-weight: bolder;
  474.       font-size: 14px;
  476.     }
  477.     .row-3-left-2-1>span{
  478.       float: right;
  479.       padding-right: 10px;
  480.       font-weight: normal;
  481.       font-size: 14px;
  482.     }
  483.     .row-3-c{
  484.       width: 505px;
  485.       height: 490px;
  486.       border-radius: 10px;
  487.       box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
  488.       float: left;
  489.       margin-left: 10px;
  490.       margin-top: 10px;
  491.     }
  492.     .row-3-c-1{
  493.       width: 505px;
  494.       height: 35px;    
  495.       line-height: 35px;
  496.       border-bottom: 1px solid #e2e2e2;
  497.       font-weight: bolder;
  498.       font-size: 14px;
  499.       display: flex;
  500.       flex-flow: row nowrap;
  501.       justify-content:left;
  502.     }
  503.     .row-3-c-1 .item{
  504.       margin-left: 20px;
  505.       height: 35px;
  506.       text-align: center;
  507.       font-weight:normal;
  508.     }
  509.     .row-3-c-1 .item a{
  510.       color: rgb(37, 37, 37);
  511.       line-height: 35px;
  512.     }
  514.     .row-3-c-1 .item:hover{     
  515.       border-bottom: 1px green solid;
  516.       color: rgb(255, 0, 0);
  517.     }
  518.     .row-3-c-2{
  519.       width: 495px;
  520.       height: 445px;      
  521.       margin-top: 15px;
  522.     }
  523.     .row-3-c-2-1{
  524.       width: 485px;
  525.       height: 435px;      
  526.       margin: 5px;
  527.     }
  528.     .row-3-c-2-1 ul{
  529.       width: 485px;
  530.       height: 435px;
  531.       list-style: none;
  532.       display: block;
  533.     }
  534.     .row-3-c-2-1 ul li{
  535.       width: 485px;
  536.       height: 25px; 
  537.     }
  538.     .row-3-c-2-1 ul li span{
  539.       float: right;
  540.       color: #666;
  541.     }
  542.     .row-3-c-2-1 a{
  543.       float: left;
  544.       width: 100px;
  545.       height: 20px;
  546.       color: #666;
  547.       font-size: 14px;
  548.       line-height: 20px;
  549.       padding-left: 5px;
  550.       border-right: 1px solid #999;
  551.       text-align:right;
  552.       padding-right: 5px;
  553.     }
  555.      .row-3-c-2-2 a{
  556.       float: left;
  557.       width: 330px;
  558.       height: 20px;
  559.       color: #333;
  560.       font-size: 14px;
  561.       line-height: 20px;
  562.       padding-left: 5px;
  563.       text-align: left;
  564.       border-right:none;
  565.     }
  566.     .row-3-r{
  567.       width: 305px;
  568.       height: 490px;
  569.       border-radius: 10px;
  570.       box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
  571.       float: left;
  572.       margin-left: 10px;
  573.       margin-top: 10px;
  574.     }
  575.     .row-3-r-1{
  576.       width: 305px;
  577.        height: 25px;    
  578.       line-height: 35px;
  579.       border-bottom: 1px solid #e2e2e2;     
  580.       font-size: 14px;
  581.       padding-left: 10px;
  582.       color: #333;
  583.     }
  584.     .row-3-r-2{
  585.       width: 305px;
  586.       height: 455px;
  587.     }
  588.     .row-3-r-2 ul{      
  589.      margin: 5px;  
  590.     }
  591.     .row-3-r-2 ul li{
  592.       width: 280px;
  593.       height: 25px; 
  594.       line-height: 25px;
  595.       overflow: hidden;  
  596.       display: block;
  597.       text-overflow:ellipsis;
  598.     }
  599.     .row-3-r-2 ul li a{         
  600.       color: #333;
  601.       font-size: 14px;
  602.       white-space: nowrap;
  603.       line-height: 25px;
  604.       padding: 5px;
  605.       margin: 10px;
  606.     }
  607.     .row-3-r-2 ul li a:hover{
  608.       color: #666;
  609.     }
  610.     .row-4 {
  611.       background: url("https://img.php.cn/upload/article/000/000/003/5b35fe49bfd77495.png") no-repeat;
  612.       width: 1200px;
  613.       height: 80px;
  614.       margin: 20px auto;
  615.       border-radius: 5px;
  616.     }
  617.     .row-5{
  618.       width: 1200px;
  619.       height: 400px;
  620.       margin-top: 20px;
  621.     }
  622.     .row-5-1{
  623.       width: 230px;
  624.       height: 400px; 
  626.       float: left;   
  627.     }
  628.     .row-5-1 > .row-5-t{
  629.       width: 230px;
  630.       height: 45px;
  631.       background-color: #eee;
  632.       font-size: 14px;
  633.       line-height: 45px;
  634.       padding-left: 10px;
  635.       color: #333;
  636.       font-weight:bold;
  637.     }
  638.     .row-5-1 > .row-5-c{
  639.       width: 230px;
  640.       height: 355px;
  641.       background-color:#505671;
  642.       border-radius: 0 0 0 10px ;
  644.     }
  645.     .row-5-c ul{
  646.       display: block;
  647.       overflow: hidden;  
  648.       width: 220px;
  649.       height: 335px;   
  650.       padding: 10px;
  651.       list-style: none;
  652.     }
  653.     .row-5-c ul li{
  654.        width: 220px;
  655.        height: 30px;
  656.       font-size: 14px;
  657.       line-height: 30px;
  658.       font-family: Arial, Helvetica, sans-serif;
  659.       padding-left: 5px;
  660.     }
  661.     .row-5-c ul li span{
  662.       padding-right: 5px;
  663.       line-height: 30px;
  664.     }
  665.      .row-5-c ul li cite{
  666.      padding-right: 10px;     
  667.      font-style: normal;
  668.     }
  669.      .row-5-c ul li em{
  670.      padding-right: 5px;     
  671.      font-style: normal;
  672.      font-size: 12px;
  673.      color: #999;
  674.     }
  675.     .row-5-2{
  676.       width: 968px;
  677.       height: 400px;
  678.       float: left;
  680.       margin-left: 1px;
  682.     }
  683.     .row-5-2t{
  684.       width: 968px;
  685.       height: 45px;
  686.       background-color: #eee;
  687.       font-size: 14px;
  688.       line-height: 45px;
  689.       padding-left: 10px;
  690.       color: #333;
  691.       font-weight:bold;
  692.       display: flex;
  693.       flex-flow: row nowrap;
  694.     }
  695.     .row-5-2t .item{
  696.       width: 80px;
  697.       height: 45px;
  698.       text-align: center;
  699.     }
  700.      .row-5-2t .item:first-of-type{
  701.        background-color: #505671;
  702.        color: #e2e2e2;
  703.     }
  704.     .row-5-2t .item:hover{
  705.       width: 80px;
  706.       height: 45px;
  707.       background-color: #505671;
  708.       color: #e2e2e2;
  709.     }
  710.     .row-5-2c{
  711.       width: 968px;
  712.       height: 355px;      
  713.        background-color:#505671;
  714.        border-radius: 0  0 10px 0 ;
  715.        display: flex;
  716.        flex-flow: column nowrap;
  717.        padding-top: 20px;
  718.     }
  719.     .row-5-2c  .item{
  720.       width: 948px;
  721.       height: 65px;
  722.       text-align: center;
  723.     }
  724.     .row-5-2c .item:first-of-type{      
  725.       color: #ccc;
  726.       line-height: 80px;
  727.     }
  728.     .row-5-2c .item:nth-of-type(2){
  729.       line-height: 65px;
  730.       color: #eee;
  731.       line-height: 80px;
  732.     }
  733.     .row-5-2c .item:nth-of-type(3){
  734.             justify-content: center;
  735.     }
  736.     .row-5-2c .item:nth-of-type(3) > span{
  737.       width:  65px;
  738.       height: 65px;
  739.       color: #666;
  740.       background-color: white;
  741.       display:block;
  742.       line-height: 65px;
  743.       font-size: 30px;
  744.       float: left;
  745.       text-align: center;
  746.       margin-left: 80px;
  747.     }
  748.     .row-5-2c .item:nth-of-type(3) > input{
  749.       width:  650px;
  750.       height: 65px;
  751.       color: #666;
  752.       background-color: white;
  753.       display:block;
  754.       line-height: 65px;
  755.       font-size: 30px;
  756.       float: left;
  757.       border: 0px;
  758.       font-size: 20px;     
  759.     }
  760.      .row-5-2c .item:nth-of-type(3) > button{
  761.       width:  100px;
  762.       height: 65px;
  763.       color: #eee;
  764.       background-color: #999;
  765.       display:block;
  766.       line-height: 65px;
  767.       font-size: 16px;
  768.       float: left;
  769.       text-align: center;
  770.       border: 0px;
  771.     }
  772.     .row-5-2c .item:nth-of-type(4){
  773.       width: 948px;
  774.       height: 65px;
  775.       text-align: center;
  776.       margin-top: 15px;
  777.     }
  778.     .row-5-2c .item:nth-of-type(4)  .item-r{
  779.       width: 100px;
  780.       height: 65px;
  781.       text-align:right;
  782.       margin-right: 20px;
  783.       color: #eee;
  784.       line-height: 65px;
  785.       font-size: 14px;
  786.       float: left;
  787.     }
  788.      .row-5-2c .item:nth-of-type(4) .item-m{
  789.       width: 758px;
  790.       height: 45px;     
  791.       display: flex;
  792.       flex-flow: row nowrap;
  793.       text-align: center;
  794.     }
  795.     .item-m .ss{ 
  796.       background-color: rgb(126, 126, 126);
  797.       flex: 0 0 auto;
  798.       border-radius: 10px;
  799.       margin: 5px;
  800.       padding: 5px;
  801.       color: white;
  802.       line-height: 40px;     
  803.       font-size: 14px;
  804.       height: 45px;
  805.       font-family: Arial, Helvetica, sans-serif;
  807.     }
  808.     .row-5-2c .item:nth-of-type(5){
  809.       width: 948px;
  810.       height: 45px;
  811.       text-align: center;
  813.     }
  814.     .row-5-2c .item:nth-of-type(5)  .item-r{
  815.       width: 100px;
  816.       height: 45px;
  817.       text-align:right;
  818.       margin-top: 5px;
  819.       margin-right: 20px;
  820.       color: #eee;
  821.       line-height: 45px;
  822.       font-size: 14px;
  823.       float: left;
  824.     }
  825.      .row-5-2c .item:nth-of-type(5) .item-m{
  826.       width: 758px;
  827.       height: 4px;     
  828.       display: flex;
  829.       flex-flow: row nowrap;
  830.       text-align: center;
  831.     }
  832.     .item-m .xx{ 
  833.       font-family: Arial, Helvetica, sans-serif;
  834.       height: 40px;     
  835.       background-color: rgb(126, 126, 126);
  836.       flex: 0 0 auto;
  837.       border-radius: 10px;
  838.       padding: 5px;
  839.       margin: 5px;
  840.       color: white;
  841.       line-height: 30px;     
  842.       font-size: 14px;      
  843.     }
  844.     .row-6{
  845.       width: 1200px;
  846.       height: 650px;
  847.       border-radius: 10px;
  848.       box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);      
  849.       margin-top: 20px;
  850.     }
  851.     .row-6 > .row-6-t{
  852.       width: 1200px;
  853.       height: 100px;
  854.       text-align: center;
  855.       line-height: 100px;
  856.       float: left;
  857.       font-size: 1.3rem;
  858.     }
  860.     .row-6 > .row-6-t span{
  861.       color: blue;
  862.       font-size: 20px;      
  863.       text-align: center;
  864.       margin: 5px;            
  865.     }
  866.     .row-6 > .row-6-c{
  867.      width: 1200px;
  868.      height: 550px;     
  869.      float: left;
  870.      display: grid;
  871.      grid-template-columns:repeat(5,1fr) ;
  872.      grid-template-rows: repeat(3,1fr);   
  873.     }
  874.      .row-6 >.row-6-c > .item{     
  875.      width: 215px;
  876.      height: 170px;
  877.      border-radius: 5px;
  878.      box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);   
  879.      place-self: start center;   
  881.     }
  882.      .row-6 >.row-6-c > .item:first-of-type{   
  883.       grid-row: span 2;
  884.       height: 350px;   
  885.       border-radius: 5px;
  886.       box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);   
  887.       background: url("https://www.php.cn/static/images/index_learn_first.jpg");
  888.     }
  889.   .row-6 > .row-6-c > .item > .item.desc{
  890.     display: grid;
  891.     place-content:space-between;
  892.     width: 215px;
  893.     min-height: 84px;
  894.     background-color: white;
  895.     border-radius: 5%;   
  896.     position: relative; 
  897.     top:-40px;   
  898.     font-size:14px; 
  899.     padding: 15px;  
  900.   }
  901.   .row-6 > .row-6-c > .item > img{
  902.     width: 100%;
  903.     border-radius: 5px;
  904.   }
  905.   .row-6 > .row-6-c > .item > .item.desc > span{
  907.     font-size: smaller;
  908.     color: #999;
  909.   }
  910.    .row-6 > .row-6-c > .item > .item.desc > a{
  911.      color: #666;
  912.      min-width: 160px;
  913.      height: 20px;
  914.      overflow:hidden;
  915.      line-height: 20px;
  916.    }
  917.    .row-6 > .row-6-c > .item > .item.desc > a span{
  918.     background-color: red;   
  919.     font-size: smaller;
  920.     color: white;    
  921.     margin-right: 2px;
  923.   }
  924.    .row-7{
  925.     background: url("https://img.php.cn/upload/article/000/000/003/5b35fe49bfd77495.png") no-repeat;
  926.        width: 1200px;
  927.       height: 80px;
  928.       margin: 20px auto;
  929.       border-radius: 5px;
  930.    }
  931.    .row-8{
  932.      width: 1200px;
  933.      height: 570px;
  934.      border-radius: 5px;
  935.      box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
  936.      margin-top: 20px;
  937.    }
  938.    .row-8 > .row-8-l{
  939.      width: 770px;
  940.      height: 570px;
  941.      float: left;
  942.    }
  943.    .row-8 > .row-8-l > .row-8-lt{
  944.      width: 770px;
  945.      height: 80px;    
  946.      display: flex;
  947.      flex-flow: row nowrap;
  948.    }
  949.    .row-8 > .row-8-l > .row-8-lt .item{
  950.      flex:1;
  951.      line-height: 80px;
  952.      text-align: center;
  953.    }
  954.    .row-8 > .row-8-l > .row-8-lt .item a{
  955.      color: #666;
  956.      font-weight: bold;
  957.      border: 1px solid rgb(212, 212, 212);
  958.      padding: 10px 20px;
  959.      font-size: 14px;
  960.    }
  961.    .row-8 > .row-8-l > .row-8-lt .item:first-of-type{
  962.      font-style: normal;
  963.      font-size: 18px;
  964.      color: #666;
  965.    }
  966.     .row-8 > .row-8-l > .row-8-lt .item:nth-of-type(2) a{
  967.       background-color: #333;
  968.       color: white;
  969.     }
  970.      .row-8 > .row-8-l > .row-8-lc{
  971.       width: 770px;
  972.       height: 490px;
  975.     }
  976.     .row-8 > .row-8-l > .row-8-lc {
  977.       width: 770px;
  978.       height: 300px;
  979.       display: flex;
  980.       flex-flow: row nowrap;
  981.     }
  982.     .row-8 > .row-8-l > .row-8-lc > .item{
  983.       flex:1;
  984.       width: 385px;
  985.       height: 300px; 
  987.     }
  988.     .row-8 > .row-8-l > .row-8-lc > .item > .item-t{
  989.       flex:1;
  990.       width: 325px;
  991.       height: 35px; 
  992.       border-bottom: 1px solid rgb(202, 202, 202);
  993.       line-height: 35px;
  994.       margin-left: 30px;
  995.       padding-left: 10px;
  997.     }
  998.     .row-8 > .row-8-l > .row-8-lc > .item > .item-c {
  999.       width: 325px;
  1000.       height: 265px;
  1001.       font-size: 14px;
  1003.     }
  1004.     .row-8 > .row-8-l > .row-8-lc > .item > .item-c li{
  1005.               list-style: none;
  1006.               overflow: hidden;
  1007.               text-overflow:ellipsis;
  1008.               white-space: nowrap;
  1010.      }
  1011.      .row-8 > .row-8-l > .row-8-lc > .item > .item-c li a{
  1012.        width: 325px;
  1013.        height: 35px;
  1014.        line-height: 35px;
  1015.        color: #666;
  1016.        margin-left: 30px;
  1017.        padding-left: 10px;
  1019.      }
  1020.    .row-8 > .row-8-l > .row-8-lf{
  1021.     width: 740px;
  1022.     height:160px; 
  1023.     margin-left: 30px;
  1024.     display: flex;
  1025.     flex-flow: row nowrap;
  1026.     justify-content: space-between;
  1028.     }
  1029.      .row-8 > .row-8-l > .row-8-lf > .item{    
  1030.     width: 160px;
  1031.     height: 160px;
  1032.     text-align: center;
  1033.     overflow: hidden;
  1034.     text-overflow: ellipsis;
  1036.    }
  1037.     .row-8 > .row-8-l > .row-8-lf > .item img{    
  1038.     width: 160px;
  1039.     height:100px;
  1041.    }
  1042.    .row-8 > .row-8-l > .row-8-lf > .item a{    
  1043.    color: #333;
  1044.    font-size: 14px;
  1045.    }
  1046.    .row-8 > .row-8-l > .row-8-lf > .item span{
  1047.     white-space: nowrap;
  1048.    }
  1049.    .row-8-r{
  1050.      width: 410px;
  1051.      height: 570px;    
  1052.      float:left;
  1053.      margin-left: 20px;
  1054.      position: relative; 
  1055.    }
  1056.    .row-8-r > .row-8-r1{
  1057.      width: 410px;
  1058.      height: 80px;    
  1059.      line-height: 80px;
  1060.      padding-left: 30px;
  1061.      font-size: 18px;
  1062.      color: #666;
  1063.    }
  1064.    .row-8-r > .row-8-r1 span{
  1065.      line-height: 80px;    
  1066.      font-size: 14px;
  1067.      color: #666;
  1068.      position: absolute;   
  1069.      right:30px;
  1070.    }
  1071.     .row-8-r > .row-8-r2{
  1072.      width: 410px;
  1073.      height: 490px;    
  1074.      display: flex;
  1075.      flex-flow: row wrap;
  1076.      justify-content:space-evenly;
  1079.     }
  1080.     .row-8-r > .row-8-r2 > .item{
  1081.      width: 180px;
  1082.      height: 150px; 
  1083.      overflow: hidden;
  1084.      text-overflow: ellipsis;
  1086.     }
  1087.     .row-8-r > .row-8-r2 > .item img{
  1088.      width: 180px;
  1089.      height:90px; 
  1090.     }
  1091.     .row-8-r > .row-8-r2 > .item span{
  1092.      color: #333;
  1093.      font-size: 14px;
  1094.      line-height: 20px;
  1095.      white-space:nowrap;
  1096.     }
  1097.     .row-9{
  1098.       width: 1200px;
  1099.       height: 420px;
  1100.       margin-top: 20px;
  1101.     }
  1102.     .row-9 > .row-9-l{
  1103.       width: 220px;
  1104.       height: 420px;   
  1105.       float: left;  
  1106.     }
  1107.     .row-9 > .row-9-l > .row-9-lt{
  1108.       width: 220px;
  1109.       height: 40px;
  1110.       background-color: #eee;
  1111.       line-height: 40px;
  1112.       font-size: 12px;
  1113.       color: #666;
  1114.       border-radius: 10px 0 0 0;
  1115.       padding-left: 10px;
  1116.       font-weight:bold;
  1117.     }
  1118.     .row-9 > .row-9-l > .row-9-lc {
  1119.       width: 220px;
  1120.       height: 380px;
  1121.       border-right: 1px solid #eee;
  1122.       border-radius: 0 0 0 10px;
  1123.       box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
  1124.     }
  1125.     .row-9 > .row-9-l > .row-9-lc ul{
  1126.       width: 220px;
  1127.       height: 380px;
  1128.       overflow: hidden;
  1129.       list-style: none;
  1130.       font-family:Arial, Helvetica, sans-serif;
  1131.     }
  1132.      .row-9 > .row-9-l > .row-9-lc ul li{
  1133.       width: 220px;
  1134.       height: 30px;
  1135.       padding-left: 10px;
  1136.       margin-top: 5px;
  1138.     }
  1139.     .row-9 > .row-9-l > .row-9-lc ul li cite{
  1140.         color: #666;
  1141.         font-style:normal;
  1142.         font-size: 16px;
  1143.     }
  1144.     .row-9 > .row-9-l > .row-9-lc ul li a{
  1145.        font-size: 12px;
  1146.        color: #000;
  1147.     }
  1148.     .row-9 > .row-9-l > .row-9-lc ul li em{
  1149.        font-style:normal;
  1150.     }
  1151.     .row-9 > .row-9-l > .row-9-lc ul li span{
  1152.        font-style:normal;
  1153.        padding-right: 5px;
  1154.     }
  1155.     .row-9 > .row-9-r {
  1156.       width: 980px;
  1157.       height: 420px;      
  1158.       float: left;
  1160.     }
  1161.     .row-9 > .row-9-r > .row-9-rt{
  1162.       width: 980px;
  1163.       height: 40px;
  1164.       background-color: #eee;
  1165.       line-height: 40px;
  1166.       font-size: 12px;
  1167.       color: #666;
  1168.       padding-left: 10px;
  1169.       font-weight:bold;
  1170.       display: flex;
  1171.       flex-flow: row nowrap;
  1172.       justify-content: flex-start;
  1173.       border-radius: 0 10px 0 0;
  1175.     }
  1176.     .row-9 > .row-9-r > .row-9-rt >.item{
  1177.       width: 100px;
  1178.       height: 40px;
  1179.       text-align: center;
  1181.     }
  1182.     .row-9 > .row-9-r > .row-9-rt >.item a{
  1183.        color: #fff;
  1184.        line-height: 40px;
  1185.        background-color: #333;
  1186.        padding: 12px;     
  1188.     }
  1189.     .row-9 > .row-9-r > .row-9-rc{
  1190.       width: 980px;
  1191.       height: 380px;      
  1192.       padding: 10px;
  1193.        border-radius: 0 0 10px 0px;
  1194.       box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  1195.       display: grid;
  1196.       grid-template-columns:repeat(4,1fr);
  1197.       grid-template-rows:repeat(2,1fr);
  1198.       justify-items: center;
  1199.       gap:10px;
  1200.     }
  1201.     .row-9 > .row-9-r > .row-9-rc > .item{
  1202.       width: 220px;
  1203.       min-height: 110px; 
  1204.       background-color: #e9e9e9;
  1205.       border-radius: 10px;
  1206.       place-items: center;
  1207.       text-overflow: ellipsis;
  1208.       text-align: center;
  1209.       overflow: hidden;
  1210.       padding-left: 10px;
  1212.     }
  1213.     .row-9 > .row-9-r > .row-9-rc > .item a{
  1214.       width: 220px;
  1215.       height: 110px;
  1216.     }
  1217.      .row-9 > .row-9-r > .row-9-rc > .item img{      
  1218.       float: left;
  1219.       width: 35px;
  1220.       height: 35px;
  1221.       margin-left: 50px;
  1222.       margin-left: 10px;
  1224.       vertical-align:text-bottom;
  1225.     }
  1226.    .row-9 > .row-9-r > .row-9-rc > .item strong{   
  1227.       display: block;
  1228.       color: #666;
  1229.       font-size: 12px;
  1230.       margin-right: 15px;
  1232.    }
  1233.    .row-9 > .row-9-r > .row-9-rc > .item h2{
  1234.       font-size: 18px;
  1235.       color:green;
  1236.          }
  1238.    .row-10{
  1239.      width: 1200px;
  1240.      height: 128px;
  1241.      margin-top: 20px;     
  1242.      border-radius: 10px;
  1243.      box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15) ;
  1244.    }
  1245.    .row-10 >.row-10t{
  1246.      width: 1200px;
  1247.      height: 50px; 
  1248.      border-bottom: 1px dashed #eee;  
  1249.      padding: 10px;
  1250.      font-size: 14px;
  1251.      color: #666;
  1252.      line-height: 50px;
  1254.    }
  1255.    .row-10 > .row-10f{
  1256.      width: 1200px;
  1257.      height: 70px;     
  1259.    }
  1260.    .row-10 > .row-10f ul{
  1261.      list-style: none;
  1262.      display: block;
  1263.      padding-left: 5px;
  1264.      padding-right: 5px;
  1265.    }
  1266.    .row-10 > .row-10f ul li{
  1268.      height: 20px;
  1269.      float: left;    
  1270.      font-size: 14px;
  1271.      padding-left: 10px;
  1272.      margin-top: 5px;
  1273.    }
  1274.    .row-10 > .row-10f ul li a{
  1275.    color: #666;
  1276.    }

  • 首页内容html源码

  1.     <div class="container">
  2.         <div class="row">
  3.         <div class="left">
  4.           <div class="item">
  5.             <a href="">PHP开发</a
  6.             ><span class="iconfont icon-arrow-right"></span>
  7.           </div>
  8.           <div class="item">
  9.             <a href="">前端开发</a
  10.             ><span class="iconfont icon-arrow-right"></span>
  11.           </div>
  12.           <div class="item">
  13.             <a href="">服务器开发</a
  14.             ><span class="iconfont icon-arrow-right"></span>
  15.           </div>
  16.           <div class="item">
  17.             <a href="">移动开发</a
  18.             ><span class="iconfont icon-arrow-right"></span>
  19.           </div>
  20.           <div class="item">
  21.             <a href="">数据库</a><span class="iconfont icon-arrow-right"></span>
  22.           </div>
  23.           <div class="item">
  24.             <a href="">服务器运维&下载</a
  25.             ><span class="iconfont icon-arrow-right"></span>
  26.           </div>
  27.           <div class="item">
  28.             <a href="">在线工具箱</a
  29.             ><span class="iconfont icon-arrow-right"></span>
  30.           </div>
  31.           <div class="item">
  32.             <a href="">常用类库</a
  33.             ><span class="iconfont icon-arrow-right"></span>
  34.           </div>
  35.         </div>
  36.         <div class="right">
  37.           <div class="right-t">
  38.             <div class="item">
  39.               PHP头条<span class="iconfont icon-xin"></span>
  40.             </div>
  41.             <div class="item">独孤九贱</div>
  42.             <div class="item">
  43.               学习路线<span class="iconfont icon-xin"></span>
  44.             </div>
  45.             <div class="item">在线工具</div>
  46.             <div class="item">
  47.               趣味课堂<span class="iconfont icon-xin"></span>
  48.             </div>
  49.             <div class="item">社区问答</div>
  50.             <div class="item">课程直播</div>
  51.             <div class="item">
  52.               <input type="text" name="search" value="输入相关词搜索" />
  53.               <div class="search">
  54.                 <span class="iconfont icon-sousuo"></span>
  55.               </div>
  56.             </div>
  57.           </div>
  58.           <div class="right-c"></div>
  59.           <div class="right-f">
  60.             <div class="item"></div>
  61.             <div class="item"></div>
  62.             <div class="item"></div>
  63.             <div class="item"></div>
  64.           </div>
  65.         </div>
  66.         </div>
  67.         <div class="row-1"></div>
  68.         <div class="row-2">
  69.         <div class="row-2-1">
  70.           <div class="row-2-1-t">
  71.             头条<span class="iconfont icon-star"></span>
  72.           </div>
  73.           <div class="row-2-1-c">
  74.             <ul>
  75.               <li>php中文网原创视频：《天龙八部》公益php</li>
  76.               <li>php中文网《玉女心经》公益PHP培训系列</li>
  77.               <li>PHP 8 来了！ PHP团队发布了首个测试版</li>
  78.               <li>php的版本发展历史（1995-2020）</li>
  79.               <li>您知道吗？最好的语言：PHP 25 岁了！</li>
  80.               <li>史上最污技术解读，我竟然秒懂了</li>
  81.               <li>2020年最新5个简洁优秀的个人博客模板免</li>
  82.               <li>5款优秀的vue后台管理系统模板推荐（免费</li>
  83.               <li>6个大气的bootstrap后台管理系统模板推荐</li>
  84.               <li>5款简洁的layui后台管理模板推荐（免费下</li>
  85.               <li>5款个性的网页回到顶部特效代码</li>
  86.               <li>小皮面板 v0.53 版本今日发布！</li>
  87.             </ul>
  88.           </div>
  89.         </div>
  90.         <div class="row-2-2">
  91.           <div class="row-2-2-t">
  92.             最新课程<span class="iconfont icon-xinpin"></span>
  93.           </div>
  94.           <div class="row-2-2-c">
  95.             <div class="item">
  96.               <div><span>中级</span><a href="">PHP代码整洁之道</a></div>
  97.             </div>
  98.             <div class="item">
  99.               <div>
  100.                 <span>初级</span><a href="">前端课程（五郞八卦棍系列）第一棍</a>
  101.               </div>
  102.             </div>
  103.             <div class="item">
  104.               <div><span>初级</span><a href="">小皮面板使用视频教程</a></div>
  105.             </div>
  106.             <div class="item">
  107.               <div><span>初级</span><a href="">从零进入C语言</a></div>
  108.             </div>
  109.             <div class="item">
  110.               <div><span>中级</span><a href="">C语言进阶篇</a></div>
  111.             </div>
  112.             <div class="item">
  113.               <div>
  114.                 <span>中级</span><a href="">PHP快速操控Excel之PhpSpreadsheet</a>
  115.               </div>
  116.             </div>
  117.           </div>
  118.         </div>
  119.         <div class="row-2-3">
  120.           <div class="row-2-3-t">常用手册<span>更多</span></div>
  121.           <div class="row-2-3-c">
  122.             <div class="item">
  123.               <div class="item-1"></div>
  124.               <div class="item-2"><a href="">php手册</a><a href="">Linux手册</a><a href="">ThinkPHP6.0</a><a href="">CI手册大全</a></div>
  125.             </div>
  126.             <div class="item">
  127.               <div class="item-1"></div>
  128.               <div class="item-2"><a href="">JavaScript中文参考手册</a><br><a href="">jQuery手册大全</a></div>
  129.             </div>
  130.             <div class="item">
  131.               <div class="item-1"></div>
  132.               <div class="item-2"><a href="">MySQL参考手册大全</a> <a href="">laravel5.8速查表</a></div>
  133.             </div>
  134.             <div class="item">
  135.               <div class="item-1"></div>
  136.               <div class="item-2"><a href="">Python参考手册大全</a><br><a href=""></a>Node.js中文学习手册</a></div>
  137.             </div>
  138.             <div class="item">
  139.               <div class="item-1"></div>
  140.               <div class="item-2"><a href="">html手册</a><a href="">CSS手册</a><a href="">AngularJSAjax手册</a></div>
  141.             </div>
  142.             <div class="item">
  143.               <div class="item-1"></div>
  144.               <div class="item-2"><a href="">ASP参考手册大全</a><br><a href="">Bootstrap3参考手册</a></div>
  145.             </div>
  146.           </div>
  147.         </div>
  148.         </div>
  149.         <div class="row-3">
  150.         <div class="row-3-left">
  151.           <div class="row-3-left-1"></div>
  152.           <div class="row-3-left-2">
  153.             <div class="row-3-left-2-1">php开发辅助工具下载<span>更多</span></div>          
  154.             <div class="row-3-left-2-2">
  155.               <ul>
  156.               <li><span class="iconfont icon-arrow-right"></span>
  157.                   <span>
  158.                       01-17
  159.                   </span>
  160.                   <a title="小皮面板（phpStudy for Linux 服务器运维管理面板）" href="/xiazai/gongju/1528"
  161.                   target="-blank">
  162.                       小皮面板（phpStudy for Linux 服务器运维管理面板）
  163.                   </a>
  164.               </li>
  165.               <li><span class="iconfont icon-arrow-right"></span>
  166.                   <span>
  167.                       01-16
  168.                   </span>
  169.                   <a title="VSCode Windows 64位 下载" href="/xiazai/gongju/1527" target="-blank">
  170.                       VSCode Windows 64位 下载
  171.                   </a>
  172.               </li>
  173.               <li><span class="iconfont icon-arrow-right"></span>
  174.                   <span>
  175.                       10-26
  176.                   </span>
  177.                   <a title="Memcached Win64位系统 1.4.4版本" href="/xiazai/gongju/1525" target="-blank">
  178.                       Memcached Win64位系统 1.4.4版本
  179.                   </a>
  180.               </li>
  181.               <li><span class="iconfont icon-arrow-right"></span>
  182.                   <span>
  183.                       10-26
  184.                   </span>
  185.                   <a title="Memcached Win32位系统 1.4.4版本" href="/xiazai/gongju/1524" target="-blank">
  186.                       Memcached Win32位系统 1.4.4版本
  187.                   </a>
  188.               </li>
  189.               <li><span class="iconfont icon-arrow-right"></span>
  190.                   <span>
  191.                       10-26
  192.                   </span>
  193.                   <a title="Memcached Win64位系统 1.4.5版本" href="/xiazai/gongju/1523" target="-blank">
  194.                       Memcached Win64位系统 1.4.5版本
  195.                   </a>
  196.               </li>
  197.               <li><span class="iconfont icon-arrow-right"></span>
  198.                   <span>
  199.                       10-26
  200.                   </span>
  201.                   <a title="Memcached Win32位系统 1.4.5版本" href="/xiazai/gongju/1522" target="-blank">
  202.                       Memcached Win32位系统 1.4.5版本
  203.                   </a>
  204.               </li>
  205.               <li><span class="iconfont icon-arrow-right"></span>
  206.                   <span>
  207.                       09-23
  208.                   </span>
  209.                   <a title="phpstudy安全自检修复程序" href="/xiazai/gongju/1521" target="-blank">
  210.                       phpstudy安全自检修复程序
  211.                   </a>
  212.               </li>
  213.               <li><span class="iconfont icon-arrow-right"></span>
  214.                   <span>
  215.                       08-05
  216.                   </span>
  217.                   <a title="phpStudy V8.1（Win64位）" href="/xiazai/gongju/1500" target="-blank">
  218.                       phpStudy V8.1（Win64位）
  219.                   </a>
  220.               </li>
  221.               <li><span class="iconfont icon-arrow-right"></span>
  222.                   <span>
  223.                       08-05
  224.                   </span>
  225.                   <a title="phpStudy V8.1（Win32位）" href="/xiazai/gongju/1499" target="-blank">
  226.                       phpStudy V8.1（Win32位）
  227.                   </a>
  228.               </li>
  229.              </ul>
  230.             </div>         
  231.           </div>
  232.         </div> 
  233.         <div class="row-3-c">
  234.            <div class="row-3-c-1">
  235.              <div class="item"><a herf="">技术文章</a></div>
  236.              <div class="item"><a herf="">网站源码</a></div>
  237.              <div class="item"><a herf="">原生手册</a></div>
  238.              <div class="item"><a herf="">推荐博文</a></div>
  239.            </div>
  240.            <div class="row-3-c-2">
  241.              <div class="row-3-c-2-1">
  242.                 <ul>
  243.                   <li>
  244.                       <span>
  245.                         05-25&nbsp;&nbsp;
  246.                      </span>
  247.                      <div class="row-3-c-2-l">
  248.                         <a href="/xiazai/code/houduan" title="后端模板" target="-blank">
  249.                             后端模板
  250.                         </a>
  251.                     </div>
  252.                     <div class="row-3-c-2-2">
  253.                         <a href="/xiazai/code/6449" title="学生就业管理系统后台模板" target="-blank">
  254.                             学生就业管理系统后台模板
  255.                         </a>
  256.                     </div>
  257.                   </li>
  258.                   <li>
  259.                     <span>
  260.                         06-09&nbsp;&nbsp;
  261.                     </span>
  262.                     <div class="row-3-c-2-l">
  263.                         <a href="/xiazai/code/phome" title="帝国cms模板" target="-blank">
  264.                             帝国cms模板
  265.                         </a>
  266.                     </div>
  267.                     <div class="row-3-c-2-2">
  268.                         <a href="/xiazai/code/6470" title="帝国cms模板仿后台登录界面" target="-blank">
  269.                             帝国cms模板仿后台登录界面
  270.                         </a>
  271.                     </div>
  272.                 </li>
  273.                 <li>
  274.                     <span>
  275.                         06-06&nbsp;&nbsp;
  276.                     </span>
  277.                     <div class="row-3-c-2-l">
  278.                         <a href="/xiazai/code/houduan" title="后端模板" target="-blank">
  279.                             后端模板
  280.                         </a>
  281.                     </div>
  282.                     <div class="row-3-c-2-2">
  283.                         <a href="/xiazai/code/6469" title="简洁商城系统后台管理模板" target="-blank">
  284.                             简洁商城系统后台管理模板
  285.                         </a>
  286.                     </div>
  287.                 </li>
  288.                 <li>
  289.                     <span>
  290.                         06-05&nbsp;&nbsp;
  291.                     </span>
  292.                     <div class="row-3-c-2-l">
  293.                         <a href="/xiazai/code/oa" title="OA系统源码" target="-blank">
  294.                             OA系统源码
  295.                         </a>
  296.                     </div>
  297.                     <div class="row-3-c-2-2">
  298.                         <a href="/xiazai/code/6467" title="帮管客CRM客户管理系统" target="-blank">
  299.                             帮管客CRM客户管理系统
  300.                         </a>
  301.                     </div>
  302.                 </li>
  303.                 <li>
  304.                     <span>
  305.                         06-05&nbsp;&nbsp;
  306.                     </span>
  307.                     <div class="row-3-c-2-l">
  308.                         <a href="/xiazai/code/oa" title="OA系统源码" target="-blank">
  309.                             OA系统源码
  310.                         </a>
  311.                     </div>
  312.                     <div class="row-3-c-2-2">
  313.                         <a href="/xiazai/code/6466" title="禅道项目管理软件" target="-blank">
  314.                             禅道项目管理软件
  315.                         </a>
  316.                     </div>
  317.                 </li>
  318.                 <li>
  319.                     <span>
  320.                         06-05&nbsp;&nbsp;
  321.                     </span>
  322.                     <div class="row-3-c-2-l">
  323.                         <a href="/xiazai/code/other" title="其它模板" target="-blank">
  324.                             其它模板
  325.                         </a>
  326.                     </div>
  327.                     <div class="row-3-c-2-2">
  328.                         <a href="/xiazai/code/6465" title="phpMyFAQ 3.0.3 中文版" target="-blank">
  329.                             phpMyFAQ 3.0.3 中文版
  330.                         </a>
  331.                     </div>
  332.                 </li>
  333.                 <li>
  334.                     <span>
  335.                         06-04&nbsp;&nbsp;
  336.                     </span>
  337.                     <div class="row-3-c-2-l">
  338.                         <a href="/xiazai/code/phome" title="帝国cms模板" target="-blank">
  339.                             帝国cms模板
  340.                         </a>
  341.                     </div>
  342.                     <div class="row-3-c-2-2">
  343.                         <a href="/xiazai/code/6464" title="大气自适应会员中心帝国cms模板" target="-blank">
  344.                             大气自适应会员中心帝国cms模板
  345.                         </a>
  346.                     </div>
  347.                 </li>
  348.                 <li>
  349.                     <span>
  350.                         06-04&nbsp;&nbsp;
  351.                     </span>
  352.                     <div class="row-3-c-2-l">
  353.                         <a href="/xiazai/code/houduan" title="后端模板" target="-blank">
  354.                             后端模板
  355.                         </a>
  356.                     </div>
  357.                     <div class="row-3-c-2-2">
  358.                         <a href="/xiazai/code/6463" title="蓝色企业CMS网站后台管理模板" target="-blank">
  359.                             蓝色企业CMS网站后台管理模板
  360.                         </a>
  361.                     </div>
  362.                 </li>
  363.                 <li>
  364.                     <span>
  365.                         05-29&nbsp;&nbsp;
  366.                     </span>
  367.                     <div class="row-3-c-2-l">
  368.                         <a href="/xiazai/code/shop" title="电商源码" target="-blank">
  369.                             电商源码
  370.                         </a>
  371.                     </div>
  372.                     <div class="row-3-c-2-2">
  373.                         <a href="/xiazai/code/6460" title="MyuCMS社区+商城内容管理系统" target="-blank">
  374.                             MyuCMS社区+商城内容管理系统
  375.                         </a>
  376.                     </div>
  377.                 </li>
  378.                 <li>
  379.                     <span>
  380.                         05-26&nbsp;&nbsp;
  381.                     </span>
  382.                     <div class="row-3-c-2-l">
  383.                         <a href="/xiazai/code/phome" title="帝国cms模板" target="-blank">
  384.                             帝国cms模板
  385.                         </a>
  386.                     </div>
  387.                     <div class="row-3-c-2-2">
  388.                         <a href="/xiazai/code/6453" title="帝国cms模板仿百度贴吧" target="-blank">
  389.                             帝国cms模板仿百度贴吧
  390.                         </a>
  391.                     </div>
  392.                 </li>
  393.                 <li>
  394.                     <span>
  395.                         05-25&nbsp;&nbsp;
  396.                     </span>
  397.                     <div class="row-3-c-2-l">
  398.                         <a href="/xiazai/code/houduan" title="后端模板" target="-blank">
  399.                             后端模板
  400.                         </a>
  401.                     </div>
  402.                     <div class="row-3-c-2-2">
  403.                         <a href="/xiazai/code/6450" title="紫色店铺商家信息后台管理模板" target="-blank">
  404.                             紫色店铺商家信息后台管理模板
  405.                         </a>
  406.                     </div>
  407.                 </li>
  408.                 <li>
  409.                     <span>
  410.                         05-25&nbsp;&nbsp;
  411.                     </span>
  412.                     <div class="row-3-c-2-l">
  413.                         <a href="/xiazai/code/houduan" title="后端模板" target="-blank">
  414.                             后端模板
  415.                         </a>
  416.                     </div>
  417.                     <div class="row-3-c-2-2">
  418.                         <a href="/xiazai/code/6449" title="学生就业管理系统后台模板" target="-blank">
  419.                             学生就业管理系统后台模板
  420.                         </a>
  421.                     </div>
  422.                 </li>
  423.                 <li>
  424.                     <span>
  425.                         05-23&nbsp;&nbsp;
  426.                     </span>
  427.                     <div class="row-3-c-2-l">
  428.                         <a href="/xiazai/code/other" title="其它模板" target="-blank">
  429.                             其它模板
  430.                         </a>
  431.                     </div>
  432.                     <div class="row-3-c-2-2">
  433.                         <a href="/xiazai/code/6448" title="Matomo开源网站统计系统" target="-blank">
  434.                             Matomo开源网站统计系统
  435.                         </a>
  436.                     </div>
  437.                 </li>
  438.                 <li>
  439.                     <span>
  440.                         05-23&nbsp;&nbsp;
  441.                     </span>
  442.                     <div class="row-3-c-2-l">
  443.                         <a href="/xiazai/code/other" title="其它模板" target="-blank">
  444.                             其它模板
  445.                         </a>
  446.                     </div>
  447.                     <div class="row-3-c-2-2">
  448.                         <a href="/xiazai/code/6446" title="玛塔留言板" target="-blank">
  449.                             玛塔留言板
  450.                         </a>
  451.                     </div>
  452.                 </li>
  453.                 <li>
  454.                     <span>
  455.                         05-23&nbsp;&nbsp;
  456.                     </span>
  457.                     <div class="row-3-c-2-l">
  458.                         <a href="/xiazai/code/other" title="其它模板" target="-blank">
  459.                             其它模板
  460.                         </a>
  461.                     </div>
  462.                     <div class="row-3-c-2-2">
  463.                         <a href="/xiazai/code/6445" title="phpSysInfo" target="-blank">
  464.                             phpSysInfo
  465.                         </a>
  466.                     </div>
  467.                 </li>
  468.                 <li>
  469.                     <span>
  470.                         05-23&nbsp;&nbsp;
  471.                     </span>
  472.                     <div class="row-3-c-2-l">
  473.                         <a href="/xiazai/code/gongsi" title="企业站源码" target="-blank">
  474.                             企业站源码
  475.                         </a>
  476.                     </div>
  477.                     <div class="row-3-c-2-2">
  478.                         <a href="/xiazai/code/6444" title="IBOS企业协同管理软件" target="-blank">
  479.                             IBOS企业协同管理软件
  480.                         </a>
  481.                     </div>
  482.                 </li>
  483.                 <li>
  484.                     <span>
  485.                         05-23&nbsp;&nbsp;
  486.                     </span>
  487.                     <div class="row-3-c-2-l">
  488.                         <a href="/xiazai/code/other" title="其它模板" target="-blank">
  489.                             其它模板
  490.                         </a>
  491.                     </div>
  492.                     <div class="row-3-c-2-2">
  493.                         <a href="/xiazai/code/6443" title="OElove婚恋交友系统" target="-blank">
  494.                             OElove婚恋交友系统
  495.                         </a>
  496.                     </div>
  497.                 </li>
  498.                 </ul>
  501.              </div>
  502.              <div class="row-3-c-2-2"></div>
  503.              <div class="row-3-c-2-3"></div>
  504.              <div class="row-3-c-2-4"></div>
  505.            </div>
  507.         </div>
  508.         <div class="row-3-r">
  509.             <div class="row-3-r-1">最新社区问答</div>
  510.             <div class="row-3-r-2">
  511.               <ul>
  512.     <li>
  513.         <a href="/wenda/165328.html" title="为什么URL加上www就访问不了呢？" target="-blank">
  514.             为什么URL加上www就访问不了呢？
  515.         </a>
  516.     </li>
  517.     <li>
  518.         <a href="/wenda/165327.html" title="跟我真正了解免费OA这个坑" target="-blank">
  519.             跟我真正了解免费OA这个坑
  520.         </a>
  521.     </li>
  522.     <li>
  523.         <a href="/wenda/165326.html" title="编辑分类，点那个铅笔不弹窗" target="-blank">
  524.             编辑分类，点那个铅笔不弹窗
  525.         </a>
  526.     </li>
  527.     <li>
  528.         <a href="/wenda/165325.html" title="前端ajax发送的数据，后端TP控制器里打印为Null，但是返回给前端控制台可以看到。"
  529.         target="-blank">
  530.             前端ajax发送的数据，后端TP控制器里打印为Null，但是返回给前端控制台可以看到。
  531.         </a>
  532.     </li>
  533.     <li>
  534.         <a href="/wenda/165324.html" title="peter-zhu 老师 想请教个问题？" target="-blank">
  535.             peter-zhu 老师 想请教个问题？
  536.         </a>
  537.     </li>
  538.     <li>
  539.         <a href="/wenda/165323.html" title="点编辑分类按钮死活不弹窗,但直接打打开那个链接是正常的，代码一样，要疯了"
  540.         target="-blank">
  541.             点编辑分类按钮死活不弹窗,但直接打打开那个链接是正常的，代码一样，要疯了
  542.         </a>
  543.     </li>
  544.     <li>
  545.         <a href="/wenda/165322.html" title="$GLOBALS在浏览器中不起作用" target="-blank">
  546.             $GLOBALS在浏览器中不起作用
  547.         </a>
  548.     </li>
  549.     <li>
  550.         <a href="/wenda/165321.html" title="数据库存储不了注册页面的信息如何解决" target="-blank">
  551.             数据库存储不了注册页面的信息如何解决
  552.         </a>
  553.     </li>
  554.     <li>
  555.         <a href="/wenda/165320.html" title="这些函数主要用途是那些方面" target="-blank">
  556.             这些函数主要用途是那些方面
  557.         </a>
  558.     </li>
  559.     <li>
  560.         <a href="/wenda/165319.html" title="编辑管理员信息为什么没有更新成功的提示框？其他的都有" target="-blank">
  561.             编辑管理员信息为什么没有更新成功的提示框？其他的都有
  562.         </a>
  563.     </li>
  564.     <li>
  565.         <a href="/wenda/165318.html" title="总是显示密码错误，登录不了" target="-blank">
  566.             总是显示密码错误，登录不了
  567.         </a>
  568.     </li>
  569.     <li>
  570.         <a href="/wenda/165317.html" title="朱老师用的什么屏幕截取软件？" target="-blank">
  571.             朱老师用的什么屏幕截取软件？
  572.         </a>
  573.     </li>
  574.     <li>
  575.         <a href="/wenda/165316.html" title="请问jQuery按手机返回键后，不回退页面，直接关闭页面。" target="-blank">
  576.             请问jQuery按手机返回键后，不回退页面，直接关闭页面。
  577.         </a>
  578.     </li>
  579.     <li>
  580.         <a href="/wenda/165315.html" title="PHP7 编译安装 扩展相关问题" target="-blank">
  581.             PHP7 编译安装 扩展相关问题
  582.         </a>
  583.     </li>
  584.     <li>
  585.         <a href="/wenda/165314.html" title="90%22=2 这个是怎么个模法？" target="-blank">
  586.             90%22=2 这个是怎么个模法？
  587.         </a>
  588.     </li>
  589.     <li>
  590.         <a href="/wenda/165313.html" title="页面中iframe内元素点击" target="-blank">
  591.             页面中iframe内元素点击
  592.         </a>
  593.     </li>
  594.     <li>
  595.         <a href="/wenda/165312.html" title="朱老师, 这个地方按你的分类列表出不来那个效果" target="-blank">
  596.             朱老师, 这个地方按你的分类列表出不来那个效果
  597.         </a>
  598.     </li>
  599.     <li>
  600.         <a href="/wenda/165311.html" title="朱老师,第6章后是不是还有内容啊" target="-blank">
  601.             朱老师,第6章后是不是还有内容啊
  602.         </a>
  603.     </li>
  604. </ul>
  606.             </div>
  607.         </div>
  608.         </div>
  609.         <div class="row-4"></div>
  610.         <div class="row-5">         
  611.            <div class="row-5-1">
  612.              <div class="row-5-t">词典分类</div>
  613.               <div class="row-5-c">
  614.                 <ul class="layui-tree">
  615.     <li >
  616.         <a href="/dic/category/1.html" target="-blank">
  617.             <span class="iconfont icon-laba"></span>
  618.             <cite>
  619.                 HTML/CSS
  620.             </cite>
  621.             <em>
  622.                 HTML/CSS
  623.             </em>
  624.         </a>
  625.     </li>
  626.     <li >
  627.         <a href="/dic/category/2.html" target="-blank">
  628.             <span class="iconfont icon-laba"></span>
  629.             <cite>
  630.                 JavaScript
  631.             </cite>
  632.             <em>
  633.                 JavaScript
  634.             </em>
  635.         </a>
  636.     </li>
  637.     <li >
  638.         <a href="/dic/category/3.html" target="-blank">
  639.             <span class="iconfont icon-laba"></span>
  640.             <cite>
  641.                 服务端
  642.             </cite>
  643.             <em>
  644.                 服务端
  645.             </em>
  646.         </a>
  647.     </li>
  648.     <li >
  649.         <a href="/dic/category/4.html" target="-blank">
  650.             <span class="iconfont icon-laba"></span>
  651.             <cite>
  652.                 数据库
  653.             </cite>
  654.             <em>
  655.                 数据库
  656.             </em>
  657.         </a>
  658.     </li>
  659.     <li >
  660.         <a href="/dic/category/5.html" target="-blank">
  661.             <span class="iconfont icon-laba"></span>
  662.             <cite>
  663.                 移动端
  664.             </cite>
  665.             <em>
  666.                 移动端
  667.             </em>
  668.         </a>
  669.     </li>
  670.     <li >
  671.         <a href="/dic/category/6.html" target="-blank">
  672.             <span class="iconfont icon-laba"></span>
  673.             <cite>
  674.                 XML
  675.             </cite>
  676.             <em>
  677.                 XML
  678.             </em>
  679.         </a>
  680.     </li>
  681.     <li >
  682.         <a href="/dic/category/7.html" target="-blank">
  683.             <span class="iconfont icon-laba"></span>
  684.             <cite>
  685.                 ASP.NET
  686.             </cite>
  687.             <em>
  688.                 ASP.NET
  689.             </em>
  690.         </a>
  691.     </li>
  692.     <li >
  693.         <a href="/dic/category/8.html" target="-blank">
  694.             <span class="iconfont icon-laba"></span>
  695.             <cite>
  696.                 Web Services
  697.             </cite>
  698.             <em>
  699.                 Web Services
  700.             </em>
  701.         </a>
  702.     </li>
  703.     <li >
  704.         <a href="/dic/category/9.html" target="-blank">
  705.             <span class="iconfont icon-laba"></span>
  706.             <cite>
  707.                 开发工具
  708.             </cite>
  709.             <em>
  710.                 开发工具
  711.             </em>
  712.         </a>
  713.     </li>
  714.     <li >
  715.         <a href="/dic/category/10.html" target="-blank">
  716.             <span class="iconfont icon-laba"></span>
  717.             <cite>
  718.                 网站建设
  719.             </cite>
  720.             <em>
  721.                 网站建设
  722.             </em>
  723.         </a>
  724.     </li>
  725. </ul>
  726.               </div>
  727.            </div>
  728.            <div class="row-5-2">
  729.              <div class="row-5-2t">
  730.                <div class="item">词典查询</div>
  731.                <div class="item">全部词典</div>
  732.                <div class="item">最新更新</div>
  733.              </div>
  734.              <div class="row-5-2c">
  735.                <div class="item"><h1>编程词典</h1></div>
  736.                <div class="item">服务码农的在线技术手册</div>
  737.                <div class="item">
  738.                  <span class="iconfont icon-sousuo"></span>
  739.                  <input type="text" name="cdss" value="请输入查询内容">
  740.                  <button>搜索</button>
  741.               </div>
  742.                <div class="item">
  743.                  <div class="item-r">热门搜索：</div>
  744.                  <div class="item-m">
  745.                    <div class="ss">PHP</div>
  746.                    <div class="ss">MYSQL</div>
  747.                    <div class="ss">Jquery</div>
  748.                    <div class="ss">HTML</div>
  749.                    <div class="ss">CSS</div>
  750.                  </div>
  751.                </div>
  752.                <div class="item">
  753.                     <div class="item-r">历史搜索：</div>
  754.                    <div class="item-m">
  755.                    <div class="xx">border-radius:150px;</div>                   
  756.                  </div>
  758.                </div>
  759.              </div>
  760.            </div>
  761.         </div>  
  762.         <div class="row-6">
  763.           <div class="row-6-t"><span class="iconfont icon-ai-code"></span>php入门精品课程<span class="iconfont icon-ai-code"></span></div>
  764.           <div class="row-6-c">
  765.             <div class="item"></div>
  766.             <div class="item">
  767.                <img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png">
  768.                <div class="item desc">               
  769.                <a href=""><span>初级</span>编程学习方法分享直播公益课</a>
  770.                <span>1W+次播放</span>
  771.             </div>
  772.             </div>
  773.             <div class="item">
  774.                <img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg">
  775.                <div class="item desc">               
  776.                <a href=""><span>初级</span>2018前端入门_HTML5</a>
  777.                <span>18W+次播放</span>
  778.             </div>
  779.             </div>
  780.             <div class="item">
  781.                <img src="https://img.php.cn/upload/course/000/126/153/5ab346fc62ce4221.jpg">
  782.                <div class="item desc">               
  783.                <a href=""><span>初级</span>CSS视频教程-玉女心经版</a>
  784.                <span>10W+次播放</span>
  785.             </div>
  786.             </div>
  787.             <div class="item">
  788.                <img src="https://img.php.cn/upload/course/000/126/153/5acc118f11d6b969.jpg">
  789.                <div class="item desc">               
  790.                <a href=""><span>初级</span>JavaScript极速入门_玉女心经系列</a>
  791.                <span>1W+次播放</span>
  792.             </div>
  793.             </div>
  794.             <div class="item">
  795.                <img src="https://img.php.cn/upload/course/000/000/001/5d1c6e0d2b744633.jpg">
  796.                <div class="item desc">               
  797.                <a href=""><span>初级</span>独孤九贱(6)_jQuery视频教程</a>
  798.                <span>1W+次播放</span>
  799.             </div>
  800.             </div>
  801.             <div class="item">
  802.                <img src="https://img.php.cn/upload/course/000/001/120/5a9fb97057b15707.jpeg">
  803.                <div class="item desc">               
  804.                <a href=""><span>初级</span>30分钟学会网站布局</a>
  805.                <span>1W+次播放</span>
  806.             </div>
  807.             </div>
  808.             <div class="item">
  809.                <img src="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg">
  810.                <div class="item desc">               
  811.                <a href=""><span>初级</span>[公益直播]Web前端开发极速入门</a>
  812.                <span>1W+次播放</span>
  813.             </div>
  814.             </div>
  816.             <div class="item">
  817.                <img src="https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg">
  818.                <div class="item desc">               
  819.                <a href=""><span>初级</span>phpStudy极速入门视频教程</a>
  820.                <span>1W+次播放</span>
  821.             </div>
  822.             </div>
  823.             <div class="item">
  824.                <img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg">
  825.                <div class="item desc">               
  826.                <a href=""><span>初级</span>独孤九贱(4)_PHP视频教程</a>
  827.                <span>1W+次播放</span>
  828.             </div>
  829.             </div>
  830.             <div class="item">
  831.                <img src="https://img.php.cn/upload/course/000/000/003/5a13c87351613730.jpg">
  832.                <div class="item desc">               
  833.                <a href=""><span>初级</span>php完全自学手册</a>
  834.                <span>1W+次播放</span>
  835.             </div>
  836.             </div>
  837.             <div class="item">
  838.                <img src="https://img.php.cn/upload/course/000/000/015/5d27f2e217a11252.jpg">
  839.                <div class="item desc">               
  840.                <a href=""><span>初级</span>MySQL权威开发指南（教程）</a>
  841.                <span>1W+次播放</span>
  842.             </div>
  843.             </div>
  844.             <div class="item">
  845.                <img src="https://img.php.cn/upload/course/000/000/035/5d27fb58823dc974.jpg">
  846.                <div class="item desc">               
  847.                <a href=""><span>初级</span>[公益直播]PHP实战开发极速入门</a>
  848.                <span>1W+次播放</span>
  849.             </div>
  850.             </div>
  851.             <div class="item">
  852.                <img src="https://img.php.cn/upload/course/000/000/001/5cecd27a4348b582.jpg">
  853.                <div class="item desc">               
  854.                <a href=""><span>初级</span>ThinkPHP6.0极速入门(视频教程)</a>
  855.                <span>1W+次播放</span>
  856.             </div>
  857.             </div>
  858.           </div>
  859.         </div>  
  860.         <div class="row-7"></div>
  861.         <div class="row-6">
  862.           <div class="row-6-t"><span class="iconfont icon-ai-code"></span>php进阶学习路径<span class="iconfont icon-ai-code"></span></div>
  863.           <div class="row-6-c">
  864.             <div class="item"></div>
  865.             <div class="item">
  866.                <img src="https://www.php.cn/static/images/index_learn_middel.jpg">
  867.                <div class="item desc">               
  868.                <a href=""><span>初级</span>编程学习方法分享直播公益课</a>
  869.                <span>1W+次播放</span>
  870.             </div>
  871.             </div>
  872.             <div class="item">
  873.                <img src="https://img.php.cn/upload/course/000/000/001/5d22b615e56bf130.jpg">
  874.                <div class="item desc">               
  875.                <a href=""><span>初级</span>CI框架30分钟极速入门</a>
  876.                <span>18W+次播放</span>
  877.             </div>
  878.             </div>
  879.             <div class="item">
  880.                <img src="https://img.php.cn/upload/course/000/126/153/5ab346fc62ce4221.jpg">
  881.                <div class="item desc">               
  882.                <a href=""><span>初级</span>CSS视频教程-玉女心经版</a>
  883.                <span>10W+次播放</span>
  884.             </div>
  885.             </div>
  886.             <div class="item">
  887.                <img src="https://img.php.cn/upload/course/000/126/153/5acc118f11d6b969.jpg">
  888.                <div class="item desc">               
  889.                <a href=""><span>初级</span>JavaScript极速入门_玉女心经系列</a>
  890.                <span>1W+次播放</span>
  891.             </div>
  892.             </div>
  893.             <div class="item">
  894.                <img src="https://img.php.cn/upload/course/000/000/001/5d1c6e0d2b744633.jpg">
  895.                <div class="item desc">               
  896.                <a href=""><span>初级</span>独孤九贱(6)_jQuery视频教程</a>
  897.                <span>1W+次播放</span>
  898.             </div>
  899.             </div>
  900.             <div class="item">
  901.                <img src="https://img.php.cn/upload/course/000/001/120/5a9fb97057b15707.jpeg">
  902.                <div class="item desc">               
  903.                <a href=""><span>初级</span>30分钟学会网站布局</a>
  904.                <span>1W+次播放</span>
  905.             </div>
  906.             </div>
  907.             <div class="item">
  908.                <img src="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg">
  909.                <div class="item desc">               
  910.                <a href=""><span>初级</span>[公益直播]Web前端开发极速入门</a>
  911.                <span>1W+次播放</span>
  912.             </div>
  913.             </div>
  915.             <div class="item">
  916.                <img src="https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg">
  917.                <div class="item desc">               
  918.                <a href=""><span>初级</span>phpStudy极速入门视频教程</a>
  919.                <span>1W+次播放</span>
  920.             </div>
  921.             </div>
  922.             <div class="item">
  923.                <img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg">
  924.                <div class="item desc">               
  925.                <a href=""><span>初级</span>独孤九贱(4)_PHP视频教程</a>
  926.                <span>1W+次播放</span>
  927.             </div>
  928.             </div>
  929.             <div class="item">
  930.                <img src="https://img.php.cn/upload/course/000/000/003/5a13c87351613730.jpg">
  931.                <div class="item desc">               
  932.                <a href=""><span>初级</span>php完全自学手册</a>
  933.                <span>1W+次播放</span>
  934.             </div>
  935.             </div>
  936.             <div class="item">
  937.                <img src="https://img.php.cn/upload/course/000/000/015/5d27f2e217a11252.jpg">
  938.                <div class="item desc">               
  939.                <a href=""><span>初级</span>MySQL权威开发指南（教程）</a>
  940.                <span>1W+次播放</span>
  941.             </div>
  942.             </div>
  943.             <div class="item">
  944.                <img src="https://img.php.cn/upload/course/000/000/035/5d27fb58823dc974.jpg">
  945.                <div class="item desc">               
  946.                <a href=""><span>初级</span>[公益直播]PHP实战开发极速入门</a>
  947.                <span>1W+次播放</span>
  948.             </div>
  949.             </div>
  950.             <div class="item">
  951.                <img src="https://img.php.cn/upload/course/000/000/001/5cecd27a4348b582.jpg">
  952.                <div class="item desc">               
  953.                <a href=""><span>初级</span>ThinkPHP6.0极速入门(视频教程)</a>
  954.                <span>1W+次播放</span>
  955.             </div>
  956.             </div>
  957.           </div>
  958.         </div> 
  959.         <div class="row-8">
  960.           <div class="row-8-l">
  961.             <div class="row-8-lt">
  962.               <div class="item">资源下载</div>
  963.                <div class="item"><a href="">JS特效</a></div>
  964.               <div class="item"><a href="">网站源码</a></div>
  965.               <div class="item"><a href="">HTML5特效</a></div>
  966.               <div class="item"><a href="">前端模板</a></div>             
  967.               <div class="item"><a href="">小程序源码</a></div>
  968.             </div>
  969.             <div class="row-8-lc">              
  970.                 <div class="item">
  971.                     <div class="item-t">最新</div>
  972.                     <div class="item-c">
  973.                       <ul>
  974.                           <li>
  975.                               <a href="/xiazai/js/6098" target="_blank">
  976.                                   jquery鼠标悬停横向时间轴特效
  977.                               </a>
  978.                           </li>
  979.                           <li>
  980.                               <a href="/xiazai/js/6097" target="_blank">
  981.                                   jQuery动态的文字跳动代码
  982.                               </a>
  983.                           </li>
  984.                           <li>
  985.                               <a href="/xiazai/js/6096" target="_blank">
  986.                                   公司网站发展时间轴特效
  987.                               </a>
  988.                           </li>
  989.                           <li>
  990.                               <a href="/xiazai/js/6095" target="_blank">
  991.                                   jQuery仿空间留言时间轴特效
  992.                               </a>
  993.                           </li>
  994.                           <li>
  995.                               <a href="/xiazai/js/6094" target="_blank">
  996.                                   vue.js响应式时间轴特效
  997.                               </a>
  998.                           </li>
  999.                           <li>
  1000.                               <a href="/xiazai/js/6093" target="_blank">
  1001.                                   jQuery图翼网侧边带二维码的返回顶部代码
  1002.                               </a>
  1003.                           </li>
  1004.                       </ul>
  1005.                     </div>
  1006.                 </div>
  1007.                 <div class="item">
  1008.                   <div class="item-t">最热</div>
  1009.                     <div class="item-c">
  1010.                        <ul >
  1011.                             <li>
  1012.                                 <a href="/xiazai/js/373" target="_blank">
  1013.                                     jQuery+Html5实现唯美表白动画代码
  1014.                                 </a>
  1015.                             </li>
  1016.                             <li>
  1017.                                 <a href="/xiazai/js/1808" target="_blank">
  1018.                                     CSS的商城网站常用左侧分类下拉导航菜单代码
  1019.                                 </a>
  1020.                             </li>
  1021.                             <li>
  1022.                                 <a href="/xiazai/js/1831" target="_blank">
  1023.                                     CSS文字组合成心形动画特效
  1024.                                 </a>
  1025.                             </li>
  1026.                             <li>
  1027.                                 <a href="/xiazai/js/376" target="_blank">
  1028.                                     碉堡的html5粒子动画表白特效
  1029.                                 </a>
  1030.                             </li>
  1031.                             <li>
  1032.                                 <a href="/xiazai/js/354" target="_blank">
  1033.                                     情侣浪漫表白js特效代码
  1034.                                 </a>
  1035.                             </li>
  1036.                             <li>
  1037.                                 <a href="/xiazai/js/374" target="_blank">
  1038.                                     简单js恋爱表白神器
  1039.                                 </a>
  1040.                             </li>
  1041.                         </ul>
  1042.                     </div>
  1043.                 </div> 
  1044.             </div>
  1045.             <div class="row-8-lf">
  1046.                <div class="item">
  1047.                 <a href="">
  1048.                 <img src="https://img.php.cn/upload/jscode/000/287/557/5ecc7285ccb48957.png">
  1049.              <span>jQuery返回顶部插件弹性动画</span>  </a>
  1050.                </div>
  1051.                <div class="item">
  1052.                   <a href="">
  1053.                 <img src="https://img.php.cn/upload/jscode/000/287/557/5ecb22cbc2110969.jpg">
  1054.              <span>仿QQ音乐A标签锚点功能设置返回顶部和返回底部</span>  </a>
  1055.                </div>
  1056.                <div class="item">
  1057.                   <a href="">
  1058.                 <img src="https://img.php.cn/upload/jscode/000/287/557/5ec87a9450dca443.jpg">
  1059.              <span>jquery css3带微信二维码返回顶部代码</span>  </a>
  1060.                </div>
  1061.                <div class="item">
  1062.                   <a href="">
  1063.                 <img src="https://img.php.cn/upload/jscode/000/000/164/5eb269f3cde06364.png">
  1064.               <span>闪烁的霓虹灯文字设计404页面</span> </a>
  1065.                </div>
  1067.             </div>
  1068.           </div>
  1069.           <div class="row-8-r">
  1070.             <div class="row-8-r1">推荐资源<span>更多</span></div>
  1071.              <div class="row-8-r2">
  1072.                <div class="item">
  1073.                  <a href="">
  1074.                 <img src="https://img.php.cn/upload/jscode/000/287/557/5ecb22cbc2110969.jpg">
  1075.              <span>仿QQ音乐A标签锚点功能设置返回顶部和返回底部</span></a>
  1076.                </div>
  1077.                <div class="item">
  1078.                  <a href="">
  1079.                 <img src="https://img.php.cn/upload/jscode/000/000/001/58d729abc8a09680.jpg">
  1080.              <span>发展简史jQuery时间轴特效代码</span></a>
  1082.                </div>
  1083.                <div class="item">
  1084.                 <a href="">
  1085.                 <img src="https://img.php.cn/upload/jscode/000/465/014/5eccd0291f73e329.jpg">
  1086.              <span>jQuery产品发布更新时间轴特效</span></a>
  1087.                </div>
  1088.                <div class="item">
  1089.                  <a href="">
  1090.                 <img src="https://img.php.cn/upload/jscode/000/000/164/5ed6ffadf36a4432.png">
  1091.             <span>仿太平洋网页固定层返回顶部代码效果</span> </a>
  1092.                </div>
  1093.                <div class="item">
  1094.                  <a href="">
  1095.                 <img src="https://img.php.cn/upload/jscode/000/000/001/58d4e519a99a6200.jpg">
  1096.             <span>带平滑效果的js返回顶部特效</span></a>
  1097.                </div>
  1098.                <div class="item"> <a href="">
  1099.                 <img src="https://img.php.cn/upload/jscode/000/000/001/5ca4814f235d7454.jpg">
  1100.             <span>jQuery右下角浮动层火箭动画返回顶部效果代码</span></a></div>
  1101.              </div>
  1102.           </div>
  1103.         </div>  
  1104.         <div class="row-9">
  1105.             <div class="row-9-l">
  1106.                 <div class="row-9-lt">
  1107.                       手册大全
  1108.                 </div>
  1109.                 <div class="row-9-lc">
  1110.                   <ul >
  1111.     <li> <span class="iconfont icon-ai-code"></span> 
  1112.         <a href="/course/list/1/type/99.html" target="_blank">
  1114.             <cite>
  1115.                 HTML/CSS
  1116.             </cite>
  1117.             <em>
  1118.                 HTML/CSS
  1119.             </em>
  1120.         </a>
  1121.     </li>
  1122.     <li> <span class="iconfont icon-ai-code"></span> 
  1123.         <a href="/course/list/2/type/99.html" target="_blank">
  1125.             <cite>
  1126.                 JavaScript
  1127.             </cite>
  1128.             <em>
  1129.                 JavaScript
  1130.             </em>
  1131.         </a>
  1132.     </li>
  1133.     <li> <span class="iconfont icon-ai-code"></span> 
  1134.         <a href="/course/list/3/type/99.html" target="_blank">
  1136.             <cite>
  1137.                 服务端
  1138.             </cite>
  1139.             <em>
  1140.                 服务端
  1141.             </em>
  1142.         </a>
  1143.     </li>
  1144.     <li> <span class="iconfont icon-ai-code"></span> 
  1145.         <a href="/course/list/4/type/99.html" target="_blank">
  1147.             <cite>
  1148.                 数据库
  1149.             </cite>
  1150.             <em>
  1151.                 数据库
  1152.             </em>
  1153.         </a>
  1154.     </li>
  1155.     <li> <span class="iconfont icon-ai-code"></span> 
  1156.         <a href="/course/list/5/type/99.html" target="_blank">
  1158.             <cite>
  1159.                 移动端
  1160.             </cite>
  1161.             <em>
  1162.                 移动端
  1163.             </em>
  1164.         </a>
  1165.     </li>
  1166.     <li> <span class="iconfont icon-ai-code"></span> 
  1167.         <a href="/course/list/6/type/99.html" target="_blank">
  1169.             <cite>
  1170.                 XML
  1171.             </cite>
  1172.             <em>
  1173.                 XML
  1174.             </em>
  1175.         </a>
  1176.     </li>
  1177.     <li> <span class="iconfont icon-ai-code"></span> 
  1178.         <a href="/course/list/7/type/99.html" target="_blank">
  1180.             <cite>
  1181.                 ASP.NET
  1182.             </cite>
  1183.             <em>
  1184.                 ASP.NET
  1185.             </em>
  1186.         </a>
  1187.     </li>
  1188.     <li> <span class="iconfont icon-ai-code"></span> 
  1189.         <a href="/course/list/8/type/99.html" target="_blank">
  1191.             <cite>
  1192.                 Web Services
  1193.             </cite>
  1194.             <em>
  1195.                 Web Services
  1196.             </em>
  1197.         </a>
  1198.     </li>
  1199.     <li> <span class="iconfont icon-ai-code"></span> 
  1200.         <a href="/course/list/9/type/99.html" target="_blank">
  1202.             <cite>
  1203.                 开发工具
  1204.             </cite>
  1205.             <em>
  1206.                 开发工具
  1207.             </em>
  1208.         </a>
  1209.     </li>
  1210.     <li> <span class="iconfont icon-ai-code"></span> 
  1211.         <a href="/course/list/10/type/99.html" target="_blank">
  1213.             <cite>
  1214.                 网站建设
  1215.             </cite>
  1216.             <em>
  1217.                 网站建设
  1218.             </em>
  1219.         </a>
  1220.     </li>
  1221. </ul>
  1222.                 </div>
  1223.             </div>
  1224.             <div class="row-9-r">
  1225.                <div class="row-9-rt">
  1226.                      <div class="item"><a href="">学习手册</a></div>
  1227.                      <div class="item">最新更新</div>
  1228.                </div>
  1229.                 <div class="row-9-rc">
  1230.                   <div class="item">
  1231.                     <a target="_blank" href="/xiazai/coll/11">
  1232.     <h2>
  1233.         【C语言参考手册大全】
  1234.     </h2>
  1235.     <img data-original="https://img.php.cn/upload/manual/000/000/001/5af9587242ca7417.png"
  1236.     src="https://img.php.cn/upload/manual/000/000/001/5af9587242ca7417.png"
  1237.     style="display: block;">
  1238.     <strong>
  1239.         php中文网《C语言参考手册大...
  1240.     </strong>
  1241. </a>
  1242.                   </div>
  1243.                   <div class="item">
  1244.                     <a target="_blank" href="/xiazai/coll/2">
  1245.     <h2>
  1246.         【jQuery手册大全】
  1247.     </h2>
  1248.     <img data-original="https://img.php.cn/upload/article/000/000/003/5aed7883e4c14591.png"
  1249.     src="https://img.php.cn/upload/article/000/000/003/5aed7883e4c14591.png"
  1250.     style="display: block;">
  1251.     <strong>
  1252.         php中文网《jQuery手册...
  1253.     </strong>
  1254. </a>
  1255.                   </div>
  1256.                   <div class="item">
  1257.                     <a target="_blank" href="/xiazai/coll/3">
  1258.     <h2>
  1259.         【CSS 参考手册大全】
  1260.     </h2>
  1261.     <img data-original="https://img.php.cn/upload/article/000/000/003/5aed789d3a7c5463.png"
  1262.     src="https://img.php.cn/upload/article/000/000/003/5aed789d3a7c5463.png"
  1263.     style="display: block;">
  1264.     <strong>
  1265.         php中文网《CSS 参考手册...
  1266.     </strong>
  1267. </a>
  1268.                   </div>
  1269.                   <div class="item">
  1270.                     <a target="_blank" href="/xiazai/coll/4">
  1271.     <h2>
  1272.         【HTML 参考手册大全】
  1273.     </h2>
  1274.     <img data-original="https://img.php.cn/upload/article/000/000/003/5aed78bbb784e641.png"
  1275.     src="https://img.php.cn/upload/article/000/000/003/5aed78bbb784e641.png"
  1276.     style="display: block;">
  1277.     <strong>
  1278.         php中文网《HTML 参考手...
  1279.     </strong>
  1280. </a>
  1281.                   </div>
  1282.                   <div class="item"><a target="_blank" href="/xiazai/coll/5">
  1283.     <h2>
  1284.         【Linux手册大全】
  1285.     </h2>
  1286.     <img data-original="https://img.php.cn/upload/article/000/000/003/5aed78cbab833218.png"
  1287.     src="https://img.php.cn/upload/article/000/000/003/5aed78cbab833218.png"
  1288.     style="display: block;">
  1289.     <strong>
  1290.         php中文网《Linux手册大...
  1291.     </strong>
  1292. </a></div>
  1293.                   <div class="item"><a target="_blank" href="/xiazai/coll/6">
  1294.     <h2>
  1295.         【MySQL参考手册大全】
  1296.     </h2>
  1297.     <img data-original="https://img.php.cn/upload/manual/000/000/001/5af142e4b8260953.png"
  1298.     src="https://img.php.cn/upload/manual/000/000/001/5af142e4b8260953.png"
  1299.     style="display: block;">
  1300.     <strong>
  1301.         php中文网《MySQL参考手...
  1302.     </strong>
  1303. </a></div>
  1304.                   <div class="item">
  1305.                     <a target="_blank" href="/xiazai/coll/7">
  1306.     <h2>
  1307.         【TP参考手册大全】
  1308.     </h2>
  1309.     <img data-original="https://img.php.cn/upload/manual/000/000/001/5af142da51b0a778.png"
  1310.     src="https://img.php.cn/upload/manual/000/000/001/5af142da51b0a778.png"
  1311.     style="display: block;">
  1312.     <strong>
  1313.         php中文网《TP参考手册大全...
  1314.     </strong>
  1315. </a>
  1316.                   </div>
  1317.                   <div class="item">
  1318.                     <a target="_blank" href="/xiazai/coll/8">
  1319.     <h2>
  1320.         【CI参考手册大全】
  1321.     </h2>
  1322.     <img data-original="https://img.php.cn/upload/manual/000/000/001/5af142c72b9b0373.png"
  1323.     src="https://img.php.cn/upload/manual/000/000/001/5af142c72b9b0373.png"
  1324.     style="display: block;">
  1325.     <strong>
  1326.         php中文网《CI参考手册大全...
  1327.     </strong>
  1328. </a>
  1329.                   </div>
  1330.                   <div class="item">
  1331.                     <a target="_blank" href="/xiazai/coll/9">
  1332.     <h2>
  1333.         【DedeCMS手册大全】
  1334.     </h2>
  1335.     <img data-original="https://img.php.cn/upload/manual/000/000/001/5af167ca0523e239.png"
  1336.     src="https://img.php.cn/upload/manual/000/000/001/5af167ca0523e239.png"
  1337.     style="display: block;">
  1338.     <strong>
  1339.         php中文网《DedeCMS手...
  1340.     </strong>
  1341. </a>
  1342.                   </div>
  1343.                   <div class="item">
  1344.                     <a target="_blank" href="/xiazai/coll/10">
  1345.     <h2>
  1346.         【Python参考手册大全】
  1347.     </h2>
  1348.     <img data-original="https://img.php.cn/upload/manual/000/000/001/5af95863a8141322.png"
  1349.     src="https://img.php.cn/upload/manual/000/000/001/5af95863a8141322.png"
  1350.     style="display: block;">
  1351.     <strong>
  1352.         php中文网《Python参考...
  1353.     </strong>
  1354. </a>
  1355.                   </div>
  1356.                   <div class="item">
  1357.                     <a target="_blank" href="/xiazai/coll/11">
  1358.     <h2>
  1359.         【C语言参考手册大全】
  1360.     </h2>
  1361.     <img data-original="https://img.php.cn/upload/manual/000/000/001/5af9587242ca7417.png"
  1362.     src="https://img.php.cn/upload/manual/000/000/001/5af9587242ca7417.png"
  1363.     style="display: block;">
  1364.     <strong>
  1365.         php中文网《C语言参考手册大...
  1366.     </strong>
  1367. </a>
  1368.                   </div>
  1369.                   <div class="item">
  1370.                     <a target="_blank" href="/xiazai/coll/12">
  1371.     <h2>
  1372.         【ASP参考手册大全】
  1373.     </h2>
  1374.     <img data-original="https://img.php.cn/upload/manual/000/000/001/5af9587b02db1548.png"
  1375.     src="https://img.php.cn/upload/manual/000/000/001/5af9587b02db1548.png"
  1376.     style="display: block;">
  1377.     <strong>
  1378.         php中文网《ASP参考手册大...
  1379.     </strong>
  1380. </a>
  1381.                   </div>
  1382.                </div>
  1383.             </div>
  1384.         </div>  
  1385.         <div class="row-10">
  1386.            <div class="row-10t">友情链接(QQ:88526)</div>
  1387.            <div class="row-10f">
  1388.              <ul>
  1389.     <li>
  1390.         <a href="/k.html" target="_blank">
  1391.             php培训
  1392.         </a>
  1393.     </li>
  1394.     <li>
  1395.         <a href="/xiazai/js" target="_blank">
  1396.             js特效下载
  1397.         </a>
  1398.     </li>
  1399.     <li>
  1400.         <a href="/course/27.html" target="_blank">
  1401.             html手册
  1402.         </a>
  1403.     </li>
  1404.     <li>
  1405.         <a href="/course/list/51.html" target="_blank">
  1406.             mysql教程
  1407.         </a>
  1408.     </li>
  1409.     <li>
  1410.         <a href="https://www.html.cn/" target="_blank">
  1411.             前端
  1412.         </a>
  1413.     </li>
  1414.     <li>
  1415.         <a href="https://www.py.cn/" target="_blank">
  1416.             python学习网站
  1417.         </a>
  1418.     </li>
  1419.     <li>
  1420.         <a href="https://chuanke.baidu.com/" target="_blank">
  1421.             百度传课
  1422.         </a>
  1423.     </li>
  1424.     <li>
  1425.         <a href="http://www.admin5.com/" target="_blank">
  1426.             A5站长网
  1427.         </a>
  1428.     </li>
  1429.     <li>
  1430.         <a href="http://www.a5.net/" target="_blank">
  1431.             a5交易
  1432.         </a>
  1433.     </li>
  1434.     <li>
  1435.         <a href="http://www.zuidaima.com/" target="_blank">
  1436.             java源代码学习
  1437.         </a>
  1438.     </li>
  1439.     <li>
  1440.         <a href="http://www.91ud.com/" target="_blank">
  1441.             微信小程序
  1442.         </a>
  1443.     </li>
  1444.     <li>
  1445.         <a href="https://www.linuxprobe.com/" target="_blank">
  1446.             linux教程
  1447.         </a>
  1448.     </li>
  1449.     <li>
  1450.         <a href="http://www.wwei.cn/" target="_blank">
  1451.             二维码生成器
  1452.         </a>
  1453.     </li>
  1454.     <li>
  1455.         <a href="http://www.h-ui.net/" target="_blank">
  1456.             H-ui前端框架
  1457.         </a>
  1458.     </li>
  1459.     <li>
  1460.         <a href="https://www.lanrenzhijia.com/" target="_blank">
  1461.             在线客服
  1462.         </a>
  1463.     </li>
  1464.     <li>
  1465.         <a href="http://www.cnplugins.com/" target="_blank">
  1466.             chrome插件
  1467.         </a>
  1468.     </li>
  1469.     <li>
  1470.         <a href="http://www.hqwx.com/" target="_blank">
  1471.             环球网校
  1472.         </a>
  1473.     </li>
  1474.     <li>
  1475.         <a href="http://www.51test.net/" target="_blank">
  1476.             无忧考网
  1477.         </a>
  1478.     </li>
  1479.     <li>
  1480.         <a href="http://www.jb51.net/" target="_blank">
  1481.             脚本之家
  1482.         </a>
  1483.     </li>
  1484.     <li>
  1485.         <a href="https://www.sojson.com/" target="_blank">
  1486.             JSON
  1487.         </a>
  1488.     </li>
  1489.     <li>
  1490.         <a href="https://www.17sucai.com/" target="_blank">
  1491.             网页模板
  1492.         </a>
  1493.     </li>
  1494.     <li>
  1495.         <a href="http://www.officezhushou.com/" target="_blank">
  1496.             office教程
  1497.         </a>
  1498.     </li>
  1499.     <li>
  1500.         <a href="https://www.huabaike.com/" target="_blank">
  1501.             花百科
  1502.         </a>
  1503.     </li>
  1504.     <li>
  1505.         <a href="http://www.mfcad.com/" target="_blank">
  1506.             沐风网
  1507.         </a>
  1508.     </li>
  1509.     <li>
  1510.         <a href="http://www.alexa.cn/" target="_blank">
  1511.             网站排名查询
  1512.         </a>
  1513.     </li>
  1514.     <li>
  1515.         <a href="http://c.biancheng.net/" target="_blank">
  1516.             C语言
  1517.         </a>
  1518.     </li>
  1519.     <li>
  1520.         <a href="https://www.ppt20.com/" target="_blank">
  1521.             变色龙PPT
  1522.         </a>
  1523.     </li>
  1524.     <li>
  1525.         <a href="http://www.cssmoban.com/" target="_blank">
  1526.             网站模板
  1527.         </a>
  1528.     </li>
  1529.     <li>
  1530.         <a href="https://www.west.cn/" target="_blank">
  1531.             云服务器
  1532.         </a>
  1533.     </li>
  1534.     <li>
  1535.         <a href="https://huke88.com/" target="_blank">
  1536.             PS教程
  1537.         </a>
  1538.     </li>
  1539.     <li>
  1540.         <a href="https://www.photophoto.cn" target="_blank">
  1541.             图行天下
  1542.         </a>
  1543.     </li>
  1544.     <li>
  1545.         <a href="http://www.yundu.com/" target="_blank">
  1546.             云都网络
  1547.         </a>
  1548.     </li>
  1549.     <li>
  1550.         <a href="http://www.ce8.com/" target="_blank">
  1551.             测吧网
  1552.         </a>
  1553.     </li>
  1554.     <li>
  1555.         <a href="https://www.qcc.com/" target="_blank">
  1556.             企查查
  1557.         </a>
  1558.     </li>
  1559. </ul>
  1560.            </div>
  1561.         </div>      
  1562.     </div>

  • 图片示例

Correcting teacher：GuanhuiGuanhui

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