Community Learn Tools Library Leisure
search
English
Home > List of blog posts > php作业训练用数组模拟数据库做动态网页网站博客
Blogger Information
Blog 11
fans 0
comment 0
visits 27451
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
php作业训练用数组模拟数据库做动态网页网站博客
饮雪煮茶
Original
1095 people have browsed it

php作业训练用数组模拟数据库做动态网页网站博客

综合应用前边知识。
把源码贴如下：

首页效果图

列表页效果图

文章详情页效果图

首页源码

  1. <!-- 头部导航部分 -->
  2. <?php include __DIR__ . './inc/header.php'; ?>
  3. <!-- 循环取出推荐的图文 -->
  4. <?php
  5. /**
  6.  * Undocumented function
  7.  *
  8.  * @param [type] $articles 文章数据
  9.  * @param [type] $num 每次取出的文章数量
  10.  * @return void
  11.  */
  12. function recommadArticle($articles, $num)
  13. {
  14.     // $recommadArticle = [];
  15.     $i = 0;
  16.     foreach ($articles as $article) {
  17.         if ($article['is_recommad'] === 1) {
  18.             $recommadArticle[] = $article;
  19.             $i++;
  20.             if ($i === $num) {
  21.                 break;
  22.             }
  23.         }
  24.     };
  25.     return $recommadArticle;
  26. }
  27. $recommadArticles = recommadArticle($articles, 5);
  30. // 随机文章
  31. /**
  32.  * Undocumented function
  33.  *
  34.  * @param [type] $articles 调用文章库
  35.  * @param [type] $num 调用随机文章数量
  36.  * @return void
  37.  */
  38. function randomArticle($articles, $num)
  39. {
  40.     $randomArticle = array_rand($articles, $num);
  41.     foreach ($randomArticle as $key) {
  42.         $randomArticles[] = $articles[$key];
  43.     }
  44.     return $randomArticles;
  45. }
  46. $randomArticles = randomArticle($articles, 6);
  48. // 取出一定数量的最新文章
  50. function newArticle($articles, $num)
  51. {
  52.     $i = 0;
  53.     foreach ($articles as $article) {
  54.         $newArticles[] = $article;
  55.         $i++;
  56.         if ($i === $num) {
  57.             break;
  58.         }
  59.     }
  60.     return $newArticles;
  61. }
  62. $newArticles = newArticle($articles, 8);
  64. //通过文章cid取出栏目名称
  66. function readCateName($categries, $cid)
  67. {
  68.     foreach ($categries as $categry) {
  69.         if ($categry['id'] === $cid) {
  70.             $categrieName = $categry['name'];
  71.             return $categrieName;
  72.         }
  73.     }
  74. }
  79. ?>
  80. <!-- 页面主体部分 -->
  81. <main>
  82.     <div class="container">
  83.         <div class="row">
  84.             <div class="col-md-8">
  85.                 <section>
  86.                     <div class="recommend-pic">
  87.                         <div class="title"><span>推荐图文</span></div>
  88.                         <div class="recommend-content">
  89.                             <?php foreach ($recommadArticles as $recommadArticle) :  ?>
  90.                                 <span>
  91.                                     <a href="<?php echo SITE_DOME . '/article.php?id=' . $recommadArticle['id']; ?>"><img src="<?php echo SITE_DOME . $recommadArticle['img']; ?>" alt=""></a>
  92.                                     <a href="<?php echo SITE_DOME . '/article.php?id=' . $recommadArticle['id']; ?>"><?php echo $recommadArticle['title'] ?></a>
  93.                                 </span>
  94.                             <?php endforeach; ?>
  95.                         </div>
  96.                     </div>
  97.                     <div class="article-list">
  98.                         <div class="title"><span>最新文章</span></div>
  99.                         <?php foreach ($newArticles as $newArticle) : ?>
  100.                             <div class="article-content">
  101.                                 <a href="<?php echo SITE_DOME . '/article.php?id=' . $newArticle['id']; ?>"><img src="<?php echo SITE_DOME . $newArticle['img']; ?>" alt=""></a>
  102.                                 <div class="article-items">
  103.                                     <a href="<?php echo SITE_DOME . '/article.php?id=' . $newArticle['id']; ?>"><?php echo $newArticle['title']; ?></a>
  104.                                     <p><?php echo $newArticle['discript']; ?></p>
  105.                                     <div class="article-tags">
  106.                                         <span>
  107.                                             <i class="glyphicon glyphicon-folder-open"></i>
  108.                                             <a href="<?php echo SITE_DOME . '/article.php?id=' . $newArticle['id']; ?>"><?php echo readCateName($categries, $newArticle['cid']); ?></a>
  109.                                         </span>
  110.                                         <time><i class="glyphicon glyphicon-time"></i> <?php echo $newArticle['time']; ?></time>
  111.                                         <span>
  112.                                             <i class="glyphicon glyphicon-tags"></i>
  113.                                             <?php  $tags = explode(',',$newArticle['tags']); ?>
  114.                                             <?php foreach($tags as $k=>$v): ?>
  115.                                             <a href=""><?php echo $v; ?></a>
  116.                                             <?php endforeach; ?>
  117.                                         </span>
  118.                                     </div>
  119.                                 </div>
  120.                             </div>
  121.                         <?php endforeach; ?>
  122.                     </div>
  123.                 </section>
  124.             </div>
  125.             <div class="col-md-4">
  126.                 <aside>
  127.                     <div class="aside-ad">
  128.                         <img src="./static/images/1.jpg" alt="">
  129.                     </div>
  130.                     <div class="aside-new">
  131.                         <div class="title"><span>随机文章</span></div>
  132.                         <div class="new-items">
  133.                             <?php foreach($randomArticles as $randomArticle) :?>
  134.                             <span>
  135.                                 <a href="<?php echo SITE_DOME . '/article.php?id=' . $randomArticle['id']; ?>"><img src="<?php echo SITE_DOME . $randomArticle['img']; ?>" alt=""></a>
  136.                                 <a href="<?php echo SITE_DOME . '/article.php?id=' . $randomArticle['id']; ?>"><?php echo $randomArticle['title']; ?></a>
  137.                             </span>
  138.                             <?php endforeach; ?>
  139.                         </div>
  140.                     </div>
  141.                     <div class="aside-tags">
  142.                         <div class="title"><span>标签云</span></div>
  143.                         <div class="tags-items">
  144.                             <a href="">标签</a>
  145.                             <a href="">标签</a>
  146.                             <a href="">标签</a>
  147.                             <a href="">标签</a>
  148.                             <a href="">标签</a>
  149.                             <a href="">标签</a>
  150.                             <a href="">标签</a>
  151.                             <a href="">标签</a>
  152.                             <a href="">标签</a>
  153.                             <a href="">标签</a>
  154.                             <a href="">标签</a>
  155.                         </div>
  156.                     </div>
  157.                     <div class="aside-link">
  158.                         <div class="title"><span>友情链接</span></div>
  159.                         <div class="link-items">
  160.                             <a href="">友情链接</a>
  161.                             <a href="">友情链接</a>
  162.                             <a href="">友情链接</a>
  163.                             <a href="">友情链接</a>
  164.                             <a href="">友情链接</a>
  165.                             <a href="">友情链接</a>
  166.                             <a href="">友情链接</a>
  167.                         </div>
  168.                     </div>
  169.                 </aside>
  170.             </div>
  171.         </div>
  172.     </div>
  174. </main>
  175. <!-- 页面底部 -->
  176. <?php include "./inc/footer.php" ?>
  178. </body>
  180. </html>

公共头部源码

  1. <?php include __DIR__ . '/config.php'; ?>
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  5. <head>
  6.     <meta charset="utf-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  9.     <title><?php echo SITE_NAME;?></title>
  10.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  11.     <link rel="stylesheet" href="<?php echo SITE_DOME ; ?>/static/css/index.css">
  13. </head>
  15. <body>
  16. <header>
  17.     <div class="container">
  18.         <div class="row">
  19.             <div class="col-md-12 self-nav">
  20.                 <span><?php echo SITE_NAME;?></span>
  21.                 <a href="<?php echo SITE_DOME;?>" class="active"><i class="glyphicon glyphicon-home"></i>首页</a>
  22.                 <?php foreach($categries as $categry):?>
  23.                 <a href="<? echo SITE_DOME . $categry['url'];?>"><i class="glyphicon glyphicon-education"></i><? echo $categry['name'];?></a>
  24.                 <? endforeach;?>
  25.             </div>
  26.         </div>
  27.     </div>
  28. </header>

公共底部源码

  1. <footer>
  3. </footer>

文章分类页面源码

  1. <!-- 头部导航部分 -->
  2. <?php include __DIR__ . './inc/header.php'; ?>
  4. <?php
  5. $id = $_GET['cid'];
  6. /**
  7.  * Undocumented function
  8.  *
  9.  * @param [type] $articles 文章库
  10.  * @param [type] $id 传入cid
  11.  * @return void
  12.  */
  13. //通过获取get提交栏目id取出当前栏目下文章。
  14. function cateArticle($articles,$id){
  15.     foreach ($articles as $article){
  16.         if ($article['cid'] === intval($id)){
  17.             $cateArticle[] = $article;
  18.         }
  19.     }
  20.     return $cateArticle;    
  21. }
  22. $cateArticles = cateArticle($articles,$id);
  24. // 随机文章
  25. /**
  26.  * Undocumented function
  27.  *
  28.  * @param [type] $articles 调用文章库
  29.  * @param [type] $num 调用随机文章数量
  30.  * @return void
  31.  */
  32. function randomArticle($articles, $num)
  33. {
  34.     $randomArticle = array_rand($articles, $num);
  35.     foreach ($randomArticle as $key) {
  36.         $randomArticles[] = $articles[$key];
  37.     }
  38.     return $randomArticles;
  39. }
  40. $randomArticles = randomArticle($articles, 6);
  42. // 取出一定数量的最新文章
  44. function newArticle($articles, $num)
  45. {
  46.     $i = 0;
  47.     foreach ($articles as $article) {
  48.         $newArticles[] = $article;
  49.         $i++;
  50.         if ($i === $num) {
  51.             break;
  52.         }
  53.     }
  54.     return $newArticles;
  55. }
  56. $newArticles = newArticle($articles, 8);
  58. //通过文章cid取出栏目名称
  60. function readCateName($categries, $cid)
  61. {
  62.     foreach ($categries as $categry) {
  63.         if ($categry['id'] === $cid) {
  64.             $categrieName = $categry['name'];
  65.             return $categrieName;
  66.         }
  67.     }
  68. }
  73. ?>
  74. <!-- 页面主体部分 -->
  75. <main>
  76.     <div class="container">
  77.         <div class="row">
  78.             <div class="col-md-8">
  79.                 <section>
  80.                     <div class="article-list">
  81.                         <div class="title"><span><?php echo $categries[$id-1]['name']; ?></span></div>
  82.                         <?php foreach ($cateArticles as $cateArticle) : ?>
  83.                             <div class="article-content">
  84.                                 <a href="<?php echo SITE_DOME . '/article.php?id=' . $cateArticle['id']; ?>"><img src="<?php echo SITE_DOME . $cateArticle['img']; ?>" alt=""></a>
  85.                                 <div class="article-items">
  86.                                     <a href="<?php echo SITE_DOME . '/article.php?id=' . $cateArticle['id']; ?>"><?php echo $cateArticle['title']; ?></a>
  87.                                     <p><?php echo $cateArticle['discript']; ?></p>
  88.                                     <div class="article-tags">
  89.                                         <span>
  90.                                             <i class="glyphicon glyphicon-folder-open"></i>
  91.                                             <a href="<?php echo SITE_DOME . '/article.php?id=' . $cateArticle['cid']; ?>"><?php echo readCateName($categries, $newArticle['cid']); ?></a>
  92.                                         </span>
  93.                                         <time><i class="glyphicon glyphicon-time"></i> <?php echo $cateArticle['time']; ?></time>
  94.                                         <span>
  95.                                             <i class="glyphicon glyphicon-tags"></i>
  96.                                             <?php  $tags = explode(',',$cateArticle['tags']); ?>
  97.                                             <?php foreach($tags as $k=>$v): ?>
  98.                                             <a href=""><?php echo $v; ?></a>
  99.                                             <?php endforeach; ?>
  100.                                         </span>
  101.                                     </div>
  102.                                 </div>
  103.                             </div>
  104.                         <?php endforeach; ?>
  105.                     </div>
  106.                 </section>
  107.             </div>
  108.             <div class="col-md-4">
  109.                 <aside>
  110.                     <div class="aside-ad">
  111.                         <img src="./static/images/1.jpg" alt="">
  112.                     </div>
  113.                     <div class="aside-new">
  114.                         <div class="title"><span>随机文章</span></div>
  115.                         <div class="new-items">
  116.                             <?php foreach($randomArticles as $randomArticle) :?>
  117.                             <span>
  118.                                 <a href="<?php echo SITE_DOME . '/article.php?id=' . $randomArticle['id']; ?>"><img src="<?php echo SITE_DOME . $randomArticle['img']; ?>" alt=""></a>
  119.                                 <a href="<?php echo SITE_DOME . '/article.php?id=' . $randomArticle['id']; ?>"><?php echo $randomArticle['title']; ?></a>
  120.                             </span>
  121.                             <?php endforeach; ?>
  122.                         </div>
  123.                     </div>
  124.                     <div class="aside-tags">
  125.                         <div class="title"><span>标签云</span></div>
  126.                         <div class="tags-items">
  127.                             <a href="">标签</a>
  128.                             <a href="">标签</a>
  129.                             <a href="">标签</a>
  130.                             <a href="">标签</a>
  131.                             <a href="">标签</a>
  132.                             <a href="">标签</a>
  133.                             <a href="">标签</a>
  134.                             <a href="">标签</a>
  135.                             <a href="">标签</a>
  136.                             <a href="">标签</a>
  137.                             <a href="">标签</a>
  138.                         </div>
  139.                     </div>
  140.                     <div class="aside-new">
  141.                         <div class="title"><span>最新文章</span></div>
  142.                         <div class="new-items">
  143.                             <?php foreach($newArticles as $newArticle) :?>
  144.                             <span>
  145.                                 <a href="<?php echo SITE_DOME . '/article.php?id=' . $newArticle['id']; ?>"><img src="<?php echo SITE_DOME . $newArticle['img']; ?>" alt=""></a>
  146.                                 <a href="<?php echo SITE_DOME . '/article.php?id=' . $newArticle['id']; ?>"><?php echo $newArticle['title']; ?></a>
  147.                             </span>
  148.                             <?php endforeach; ?>
  149.                         </div>
  150.                     </div>
  151.                     <div class="aside-link">
  152.                         <div class="title"><span>友情链接</span></div>
  153.                         <div class="link-items">
  154.                             <a href="">友情链接</a>
  155.                             <a href="">友情链接</a>
  156.                             <a href="">友情链接</a>
  157.                             <a href="">友情链接</a>
  158.                             <a href="">友情链接</a>
  159.                             <a href="">友情链接</a>
  160.                             <a href="">友情链接</a>
  161.                         </div>
  162.                     </div>
  163.                 </aside>
  164.             </div>
  165.         </div>
  166.     </div>
  168. </main>
  169. <!-- 页面底部 -->
  170. <?php include "./inc/footer.php" ?>
  172. </body>
  174. </html>

文章详情页源码

  1. <!-- 头部导航部分 -->
  2. <?php include __DIR__ . './inc/header.php'; ?>
  4. <?php
  5. $id = $_GET['id'];
  6. $article = $articles[$id];
  9. // 随机文章
  10. /**
  11.  * Undocumented function
  12.  *
  13.  * @param [type] $articles 调用文章库
  14.  * @param [type] $num 调用随机文章数量
  15.  * @return void
  16.  */
  17. function randomArticle($articles, $num)
  18. {
  19.     $randomArticle = array_rand($articles, $num);
  20.     foreach ($randomArticle as $key) {
  21.         $randomArticles[] = $articles[$key];
  22.     }
  23.     return $randomArticles;
  24. }
  25. $randomArticles = randomArticle($articles, 6);
  27. // 取出一定数量的最新文章
  29. function newArticle($articles, $num)
  30. {
  31.     $i = 0;
  32.     foreach ($articles as $article) {
  33.         $newArticles[] = $article;
  34.         $i++;
  35.         if ($i === $num) {
  36.             break;
  37.         }
  38.     }
  39.     return $newArticles;
  40. }
  41. $newArticles = newArticle($articles, 8);
  43. //通过文章cid取出栏目名称
  45. function readCateName($categries, $cid)
  46. {
  47.     foreach ($categries as $categry) {
  48.         if ($categry['id'] === $cid) {
  49.             $categrieName = $categry['name'];
  50.             return $categrieName;
  51.         }
  52.     }
  53. }
  58. ?>
  59. <!-- 页面主体部分 -->
  60. <main>
  61.     <div class="container">
  62.         <div class="row">
  63.             <div class="col-md-8">
  64.                 <section>
  65.                     <div class="breadcrumb">
  66.                         <i class="glyphicon glyphicon-home"></i><a href="<?php echo SITE_DOME;?>">首页</a><i class="glyphicon glyphicon-menu-right"></i><?php echo readCateName($categries, $article['cid']); ?><i class="glyphicon glyphicon-menu-right"></i>正文
  67.                     </div>
  68.                     <div class="article-content">
  69.                         <h1><?php echo $article['title']; ?></h1>
  70.                         <span>
  71.                             <i class="glyphicon glyphicon-folder-open"></i>
  72.                             <a href=""><?php echo readCateName($categries, $article['cid']); ?></a>
  73.                             <i class="glyphicon glyphicon-time"></i> 
  74.                             <time><?php echo $article['time'] ?></time>
  75.                             <i class="glyphicon glyphicon-tags"></i>
  76.                                             <?php  $tags = explode(',',$article['tags']); ?>
  77.                                             <?php foreach($tags as $k=>$v): ?>
  78.                                             <a href=""><?php echo $v; ?></a>
  79.                                             <?php endforeach; ?>
  80.                         </span>
  81.                         <article>
  82.                             <?php echo $article['content']; ?>
  83.                         </article>
  84.                     </div>
  85.                 </section>
  86.             </div>
  87.             <div class="col-md-4">
  88.                 <aside>
  89.                     <div class="aside-ad">
  90.                         <img src="./static/images/1.jpg" alt="">
  91.                     </div>
  92.                     <div class="aside-new">
  93.                         <div class="title"><span>随机文章</span></div>
  94.                         <div class="new-items">
  95.                             <?php foreach ($randomArticles as $randomArticle) : ?>
  96.                                 <span>
  97.                                     <a href="<?php echo SITE_DOME . '/article.php?id=' . $randomArticle['id']; ?>"><img src="<?php echo SITE_DOME . $randomArticle['img']; ?>" alt=""></a>
  98.                                     <a href="<?php echo SITE_DOME . '/article.php?id=' . $randomArticle['id']; ?>"><?php echo $randomArticle['title']; ?></a>
  99.                                 </span>
  100.                             <?php endforeach; ?>
  101.                         </div>
  102.                     </div>
  103.                     <div class="aside-tags">
  104.                         <div class="title"><span>标签云</span></div>
  105.                         <div class="tags-items">
  106.                             <a href="">标签</a>
  107.                             <a href="">标签</a>
  108.                             <a href="">标签</a>
  109.                             <a href="">标签</a>
  110.                             <a href="">标签</a>
  111.                             <a href="">标签</a>
  112.                             <a href="">标签</a>
  113.                             <a href="">标签</a>
  114.                             <a href="">标签</a>
  115.                             <a href="">标签</a>
  116.                             <a href="">标签</a>
  117.                         </div>
  118.                     </div>
  119.                     <div class="aside-new">
  120.                         <div class="title"><span>最新文章</span></div>
  121.                         <div class="new-items">
  122.                             <?php foreach ($newArticles as $newArticle) : ?>
  123.                                 <span>
  124.                                     <a href="<?php echo SITE_DOME . '/article.php?id=' . $newArticle['id']; ?>"><img src="<?php echo SITE_DOME . $newArticle['img']; ?>" alt=""></a>
  125.                                     <a href="<?php echo SITE_DOME . '/article.php?id=' . $newArticle['id']; ?>"><?php echo $newArticle['title']; ?></a>
  126.                                 </span>
  127.                             <?php endforeach; ?>
  128.                         </div>
  129.                     </div>
  130.                     <div class="aside-link">
  131.                         <div class="title"><span>友情链接</span></div>
  132.                         <div class="link-items">
  133.                             <a href="">友情链接</a>
  134.                             <a href="">友情链接</a>
  135.                             <a href="">友情链接</a>
  136.                             <a href="">友情链接</a>
  137.                             <a href="">友情链接</a>
  138.                             <a href="">友情链接</a>
  139.                             <a href="">友情链接</a>
  140.                         </div>
  141.                     </div>
  142.                 </aside>
  143.             </div>
  144.         </div>
  145.     </div>
  147. </main>
  148. <!-- 页面底部 -->
  149. <?php include "./inc/footer.php" ?>
  151. </body>
  153. </html>

CSS代码

  1. body {
  2.     background-color: #f4f4f4;
  3.     display: flex;
  4.     flex-direction: column;
  5. }
  7. img {
  8.     width: 100%;
  9.     display: block
  10. }
  12. .title {
  13.     border-bottom: 1px solid #eee;
  14.     box-sizing: border-box;
  15.     display: flex;
  16. }
  18. .title>span {
  19.     border-bottom: 2px solid #35AADC;
  20.     font-size: 18px;
  21.     padding: 0 0 10px 0;
  22. }
  25. /* 头部导航css */
  27. header {
  28.     background-color: #333D46;
  29.     color: #fff;
  30.     height: 50px;
  31.     margin-bottom: 15px;
  32. }
  34. header .self-nav {
  35.     display: flex;
  36.     align-items: center;
  37. }
  39. header .self-nav>span {
  40.     font-size: 28px;
  41.     margin: 0 15px;
  42.     line-height: 50px;
  43. }
  45. header .self-nav>a {
  46.     color: #fff;
  47.     font-size: 16px;
  48.     padding: 0 15px;
  49.     height: 50px;
  50.     line-height: 50px;
  51. }
  53. header .self-nav>a>i {
  54.     font-size: 12px;
  55.     margin: 0 5px;
  56. }
  58. header .self-nav>a:hover,
  59. header .self-nav .active {
  60.     background-color: #000;
  61.     text-decoration: none;
  62.     color: #ddd;
  63. }
  66. /* 主体部分css */
  68. main {
  69.     overflow-y: scroll;
  70. }
  73. /* 主题部分推荐推文 */
  75. main .recommend-pic {
  76.     padding: 20px;
  77.     padding-top: 15px;
  78.     background-color: #fff;
  79.     border: 1px solid #eee;
  80.     height: 350px;
  81. }
  83. main .recommend-pic>.recommend-content {
  84.     width: 100%;
  85.     height: 250px;
  86.     margin: 10px 0;
  87.     display: grid;
  88.     grid-template-columns: 2fr 1fr 1fr;
  89.     grid-template-rows: 1fr 1fr;
  90.     grid-template-areas: "img1 img2 img3" " img1 img4 img5";
  91.     grid-gap: 10px;
  92. }
  94. main .recommend-pic>.recommend-content>span:nth-of-type(1) {
  95.     grid-area: img1;
  96. }
  98. main .recommend-pic>.recommend-content>span:nth-of-type(2) {
  99.     grid-area: img2;
  100. }
  102. main .recommend-pic>.recommend-content>span:nth-of-type(3) {
  103.     grid-area: img3;
  104. }
  106. main .recommend-pic>.recommend-content>span:nth-of-type(4) {
  107.     grid-area: img4;
  108. }
  110. main .recommend-pic>.recommend-content>span:nth-of-type(5) {
  111.     grid-area: img5;
  112. }
  114. main .recommend-pic>.recommend-content>span>a:last-of-type {
  115.     display: none;
  116. }
  118. main .recommend-pic>.recommend-content img {
  119.     height: 100%;
  120. }
  123. /* 主题部分文章列表 */
  125. main .article-list {
  126.     padding: 20px;
  127.     background-color: #fff;
  128.     margin-top: 15px;
  129.     display: flex;
  130.     flex-direction: column;
  131. }
  133. main .article-list>.article-content {
  134.     height: 250px;
  135.     margin-top: 15px;
  136.     display: grid;
  137.     grid-template-columns: repeat(2, 1fr);
  138.     border: 1px solid #eee;
  139.     box-sizing: border-box;
  140. }
  142. main .article-list>.article-content:hover {
  143.     box-shadow: 0 0 1px #888;
  144. }
  146. main .article-list>.article-content img {
  147.     height: 100%;
  148. }
  150. main .article-list>.article-content>a {
  151.     padding: 0 20px 0 0;
  152.     overflow: hidden;
  153. }
  155. main .article-list>.article-content>.article-items {
  156.     display: flex;
  157.     flex-direction: column;
  158. }
  160. main .article-list>.article-content>.article-items>a {
  161.     font-size: 18px;
  162.     color: #333;
  163.     padding-top: 15px;
  164. }
  166. main .article-list>.article-content>.article-items>a:hover {
  167.     text-decoration: none;
  168.     color: #35AADC;
  169. }
  171. main .article-list>.article-content>.article-items>p {
  172.     margin: 10px 0;
  173.     color: #555;
  174. }
  176. main .article-list>.article-content>.article-items>.article-tags {
  177.     font-size: 12px;
  178.     color: #999;
  179.     display: flex;
  180. }
  182. main .article-list>.article-content>.article-items>.article-tags>time {
  183.     margin: 0 10px;
  184. }
  186. main .article-list>.article-content>.article-items>.article-tags a {
  187.     color: #999;
  188. }
  190. main .article-list>.article-content>.article-items>.article-tags a:hover {
  191.     text-decoration: none;
  192. }
  195. /* 主体侧边栏css */
  197. main aside>.aside-ad {
  198.     padding: 20px;
  199.     background-color: #fff;
  200. }
  202. main aside>.aside-new {
  203.     padding: 20px;
  204.     background-color: #fff;
  205.     margin-top: 15px;
  206. }
  208. main aside>.aside-new>.new-items {
  209.     display: flex;
  210.     flex-direction: column;
  211. }
  213. main aside>.aside-new>.new-items img {
  214.     height: 100%;
  215. }
  217. main aside>.aside-new>.new-items>span {
  218.     height: 60px;
  219.     margin-top: 15px;
  220.     border: 1px solid #eee;
  221.     display: grid;
  222.     grid-template-columns: 1fr 2.5fr;
  223.     grid-gap: 15px;
  224.     box-sizing: border-box;
  225.     overflow: hidden;
  226. }
  228. main aside>.aside-new>.new-items>span>:last-of-type {
  229.     color: #555;
  230.     padding-top: 10px;
  231. }
  233. main aside>.aside-new>.new-items>span>a:hover {
  234.     text-decoration: none;
  235.     color: #35AADC;
  236. }
  238. main aside>.aside-tags {
  239.     padding: 20px;
  240.     background-color: #fff;
  241.     margin-top: 15px;
  242. }
  244. main aside>.aside-tags>.tags-items {
  245.     display: flex;
  246.     flex-flow: row wrap;
  247.     padding-top: 15px;
  248. }
  250. main aside>.aside-tags>.tags-items>a {
  251.     padding: 3px 8px;
  252.     background-color: #35AADC;
  253.     color: #fff;
  254.     margin: 5px 10px;
  255.     border-radius: 3px;
  256. }
  259. /* 友情链接css */
  261. main aside>.aside-link {
  262.     padding: 20px;
  263.     background-color: #fff;
  264.     margin-top: 15px;
  265. }
  267. main aside>.aside-link>.link-items {
  268.     display: flex;
  269.     flex-direction: column;
  270.     padding-top: 10px;
  271. }
  273. main aside>.aside-link>.link-items>a {
  274.     height: 30px;
  275.     margin: 5px 0;
  276.     padding: 5px 10px;
  277.     border: 1px solid #eee;
  278.     color: #555;
  279. }
  281. main aside>.aside-link>.link-items>a:hover {
  282.     text-decoration: none;
  283.     color: #35AADC;
  284. }
  287. /* 底部css */
  289. footer {
  290.     margin-top: 15px;
  291.     background-color: #222222;
  292.     height: 80px;
  293. }
  296. /* 文章详情页 */
  298. main .breadcrumb {
  299.     display: flex;
  300.     align-items: center;
  301.     font-size: 12px;
  302.     color: #555;
  303. }
  305. main .breadcrumb>i {
  306.     font-size: 10px;
  307.     margin: 0 10px;
  308. }
  310. main .breadcrumb a {
  311.     color: #555;
  312. }
  314. main .article-content {
  315.     padding: 20px;
  316.     background-color: #fff;
  317.     display: flex;
  318.     flex-direction: column;
  319. }
  321. main .article-content>h1 {
  322.     font-size: 28px;
  323.     margin: 10px auto;
  324. }
  326. main .article-content>span {
  327.     font-size: 12px;
  328.     color: #333;
  329.     margin: 20px auto;
  330.     display: flex;
  331.     align-items: center;
  332. }
  334. main .article-content>span>i {
  335.     font-size: 10px;
  336.     color: #555;
  337.     margin: 0 10px;
  338. }
  340. main .article-content>span>a {
  341.     margin: 0 5px;
  342. }
  344. main .article-content>article {
  345.     font-size: 1.5rem;
  346.     line-height: 2.8rem;
  347.     border-top: 1px solid #eee;
  348.     padding: 20px 0;
  349. }

数组数据

  1. <?php
  2. //  定义全站常量
  3. const SITE_NAME = '优秀作文网';
  4. const SITE_DOME = 'http://php.io/blog';
  6. $categries = [
  7.     ['id'=>1,'name'=>'小学作文','url'=>'/list.php?cid=1'],
  8.     ['id'=>2,'name'=>'初中作文','url'=>'/list.php?cid=2'],
  9.     ['id'=>3,'name'=>'高中作文','url'=>'/list.php?cid=3'],
  10.     ['id'=>4,'name'=>'考试作文','url'=>'/list.php?cid=4']
  11. ];
  14. $articles = [
  15.     ['id'=>1,'title'=>'人性最大的善良，是换位思考','discript'=>'懂得慈悲，近城远山，都是人间。人生海海，谁人不是举步维艰，孤独前往。 但这世界啊，美就美在，有人是照耀他人的光，有人是等待黎明的夜。孤独不会消失，灵魂却可相拥。','tags'=>'灵魂,善良,孤独人性,换位思考','img'=>'/static/images/1.jpg','is_recommad'=>1,'content'=>'人间百态，各有所难杨绛先生曾写过一句话：“当你身居高位时，看到的都是浮华春梦；当你身处卑微，才有机缘看到世态真相。” 人间百态，各有所难，每个人只看到自己眼中的世界，看不到全貌。 生而为人，最可怕的就是：你生活在光亮里，就认为整个世界都是光亮的。','cid'=>1,'time'=>'2020/01/10' ],
  16.     ['id'=>2,'title'=>'别在最好的年纪，活得太安逸','discript'=>'懂得慈悲，近城远山，都是人间。人生海海，谁人不是举步维艰，孤独前往。 但这世界啊，美就美在，有人是照耀他人的光，有人是等待黎明的夜。孤独不会消失，灵魂却可相拥。','tags'=>'灵魂,善良,孤独人性,换位思考','img'=>'/static/images/2.jpg','is_recommad'=>1,'content'=>'人间百态，各有所难杨绛先生曾写过一句话：“当你身居高位时，看到的都是浮华春梦；当你身处卑微，才有机缘看到世态真相。” 人间百态，各有所难，每个人只看到自己眼中的世界，看不到全貌。 生而为人，最可怕的就是：你生活在光亮里，就认为整个世界都是光亮的。','cid'=>1,'time'=>'2020/01/10'],
  17.     ['id'=>3,'title'=>'和明白人说话，和踏实人做事，和厚道人谈情','discript'=>'懂得慈悲，近城远山，都是人间。人生海海，谁人不是举步维艰，孤独前往。 但这世界啊，美就美在，有人是照耀他人的光，有人是等待黎明的夜。孤独不会消失，灵魂却可相拥。','tags'=>'灵魂,善良,孤独人性,换位思考','img'=>'/static/images/3.jpg','is_recommad'=>1,'content'=>'人间百态，各有所难杨绛先生曾写过一句话：“当你身居高位时，看到的都是浮华春梦；当你身处卑微，才有机缘看到世态真相。” 人间百态，各有所难，每个人只看到自己眼中的世界，看不到全貌。 生而为人，最可怕的就是：你生活在光亮里，就认为整个世界都是光亮的。','cid'=>1,'time'=>'2020/01/10'],
  18.     ['id'=>4,'title'=>'不念过去，不畏将来，不负余生','discript'=>'懂得慈悲，近城远山，都是人间。人生海海，谁人不是举步维艰，孤独前往。 但这世界啊，美就美在，有人是照耀他人的光，有人是等待黎明的夜。孤独不会消失，灵魂却可相拥。','tags'=>'灵魂,善良,孤独人性,换位思考','img'=>'/static/images/4.jpg','is_recommad'=>1,'content'=>'人间百态，各有所难杨绛先生曾写过一句话：“当你身居高位时，看到的都是浮华春梦；当你身处卑微，才有机缘看到世态真相。” 人间百态，各有所难，每个人只看到自己眼中的世界，看不到全貌。 生而为人，最可怕的就是：你生活在光亮里，就认为整个世界都是光亮的。','cid'=>2,'time'=>'2020/01/10'],
  19.     ['id'=>5,'title'=>'总有人，在等你回家','discript'=>'懂得慈悲，近城远山，都是人间。人生海海，谁人不是举步维艰，孤独前往。 但这世界啊，美就美在，有人是照耀他人的光，有人是等待黎明的夜。孤独不会消失，灵魂却可相拥。','tags'=>'灵魂,善良,孤独人性,换位思考','img'=>'/static/images/5.jpg','is_recommad'=>1,'content'=>'人间百态，各有所难杨绛先生曾写过一句话：“当你身居高位时，看到的都是浮华春梦；当你身处卑微，才有机缘看到世态真相。” 人间百态，各有所难，每个人只看到自己眼中的世界，看不到全貌。 生而为人，最可怕的就是：你生活在光亮里，就认为整个世界都是光亮的。','cid'=>3,'time'=>'2020/01/10'],
  20.     ['id'=>6,'title'=>'不要在乎一城一池的得失','discript'=>'懂得慈悲，近城远山，都是人间。人生海海，谁人不是举步维艰，孤独前往。 但这世界啊，美就美在，有人是照耀他人的光，有人是等待黎明的夜。孤独不会消失，灵魂却可相拥。','tags'=>'灵魂,善良,孤独人性,换位思考','img'=>'/static/images/6.jpg','is_recommad'=>1,'content'=>'人间百态，各有所难杨绛先生曾写过一句话：“当你身居高位时，看到的都是浮华春梦；当你身处卑微，才有机缘看到世态真相。” 人间百态，各有所难，每个人只看到自己眼中的世界，看不到全貌。 生而为人，最可怕的就是：你生活在光亮里，就认为整个世界都是光亮的。','cid'=>2,'time'=>'2020/01/10'],
  21.     ['id'=>7,'title'=>'人性最大的善良，是换位思考','discript'=>'懂得慈悲，近城远山，都是人间。人生海海，谁人不是举步维艰，孤独前往。 但这世界啊，美就美在，有人是照耀他人的光，有人是等待黎明的夜。孤独不会消失，灵魂却可相拥。','tags'=>'灵魂,善良,孤独人性,换位思考','img'=>'/static/images/7.jpg','is_recommad'=>1,'content'=>'人间百态，各有所难杨绛先生曾写过一句话：“当你身居高位时，看到的都是浮华春梦；当你身处卑微，才有机缘看到世态真相。” 人间百态，各有所难，每个人只看到自己眼中的世界，看不到全貌。 生而为人，最可怕的就是：你生活在光亮里，就认为整个世界都是光亮的。','cid'=>4,'time'=>'2020/01/10'],
  22.     ['id'=>8,'title'=>'人性最大的善良，是换位思考','discript'=>'懂得慈悲，近城远山，都是人间。人生海海，谁人不是举步维艰，孤独前往。 但这世界啊，美就美在，有人是照耀他人的光，有人是等待黎明的夜。孤独不会消失，灵魂却可相拥。','tags'=>'灵魂,善良,孤独人性,换位思考','img'=>'/static/images/8.jpg','is_recommad'=>1,'content'=>'人间百态，各有所难杨绛先生曾写过一句话：“当你身居高位时，看到的都是浮华春梦；当你身处卑微，才有机缘看到世态真相。” 人间百态，各有所难，每个人只看到自己眼中的世界，看不到全貌。 生而为人，最可怕的就是：你生活在光亮里，就认为整个世界都是光亮的。','cid'=>1,'time'=>'2020/01/10']
  23. ];
  24. ?>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：写得不错, 但是有一些重要的数据 , 还是要给出注释的, 以方便阅读,例如常量: SITE_DOME
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