博主信息
饮雪煮茶
饮雪煮茶
博文
11
粉丝
0
评论
0
访问量
7177
积分：0
P豆：22
最新更新
利用媒体查询实现自适应导航2020-04-06
php会话流程控制cookie和session的应用作业2020-01-20
PHP filter 过滤器知识2020-01-14
php作业训练用数组模拟数据库做动态网页网站博客2020-01-12
HTML制作静态商品购物车结算页面2020-01-01
用grid放二手商品交易列表2019-12-30
利用Flex弹性盒子仿 m.php.cn首页模板2019-12-28
Flex弹性盒子仿二手商品交易与评论回复页面2019-12-27
博文分类
前端学习8篇
PHP基础3篇
热门文章
HTML制作静态商品购物车结算页面3731
利用Flex弹性盒子仿 m.php.cn首页模板413
前端Flex弹性盒子作业，容器的六个属性及其使用403
Flex弹性盒子仿二手商品交易与评论回复页面383
前端Flex弹性盒子作业，弹性盒子元素的六个属性及其使用378
php作业训练用数组模拟数据库做动态网页网站博客377
PHP filter 过滤器知识375
php会话流程控制cookie和session的应用作业295

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

2020年01月12日 14:58:42阅读数：377博客 / 饮雪煮茶/ PHP基础

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. ?>
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：写得不错, 但是有一些重要的数据 , 还是要给出注释的, 以方便阅读,例如常量: SITE_DOME

版权申明：本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论

文明上网理性发言，请遵守新闻评论服务协议

0 条评论
  • 提交
    首页视频教程原生手册编程词典工具下载免责声明赞助与捐赠

    Copyright 2014-2021 //m.sbmmt.com/ All Rights Reserved PHP中文网 版权所有

    php中文网：公益在线php培训，帮助PHP学习者快速成长！

    苏ICP备2020058653号-1

    关注公众号QQ交流群