Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 0110-数组实现动态网页
Blogger Information
Blog 13
fans 0
comment 0
visits 10300
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
0110-数组实现动态网页
Original
700 people have browsed it

效果图





代码

首页

  1. <?php include __DIR__ . '/inc/public_header.php' ;?>
  2. <?php
  3. function getrankey($goods,$num)
  4. {
  5.     $rankeys = array_rand($goods, $num);
  6.     foreach ($rankeys as $key) {
  7.         $rankey[] = $goods[$key];
  8.     }
  9.     return $rankey;
  10. }
  11. $rankey = getrankey($goods,3);
  13. ?>
  14. <main>
  15.     <div class="goods">
  16.         <div class="title">
  17.             <a href="">推荐</a>
  18.         </div>
  19.         <div class="content">
  20.         <!-- 推荐 -->
  21.             <?php foreach ($rankey as $ran) : ?>
  22.                 <div>
  23.                     <a href="<?php echo $ran['url'] ?>"><img src="<?php echo STATIC_PATH .  $ran['pic'] ?>" alt=""></a>
  24.                     <a href=""><?php echo $ran['name'] ?></a>
  25.                 </div>
  26.             <?php endforeach; ?>
  27.         </div>
  28.     </div>
  29.     <!-- 其他分类 -->
  30.     <?php foreach ($categories as $categorie) : ?>
  31.         <div class="goods">
  32.             <div class="title">
  33.                 <a href=""><?php echo $categorie['name'] ?></a>
  34.             </div>
  35.             <div class="content">
  36.                 <?php foreach ($goods as $good) : ?>
  37.                     <?php if ($categorie['id'] === $good['cid']) : ?>
  38.                         <div>
  39.                             <a href="<?php echo $good['url'] ?>"><img src="<?php echo STATIC_PATH .  $good['pic'] ?>" alt=""></a>
  40.                             <a href=""><?php echo $good['name'] ?></a>
  41.                         </div>
  42.                     <?php endif; ?>
  43.                 <?php endforeach; ?>
  44.             </div>
  45.         </div>
  46.     <?php endforeach; ?>
  47. </main>
  48. <?php include __DIR__ . '/inc/public_footer.php' ?>

列表

  1. <?php include __DIR__ . '/inc/public_header.php'  ?>
  2. <?php
  3. $cid = $_GET['cid'];
  4. function getcatName($cid,$categories)
  5. {
  7.     foreach ($categories as $category) {
  8.     if ($category['id'] === intval($cid)) 
  9.     {
  10.         $cateName = $category['name'];
  11.     }
  12.     }
  13.     return $cateName;
  14. }
  16. function getcatgood($cid,$goods)
  17. {
  18.     foreach ($goods as $good) {
  19.         if ($good['cid'] === intval($cid)) {
  20.             $rankey[] = $good;
  21.         }
  22.     }
  23.     return $rankey;
  24. }
  25. $cateName = getcatName($cid,$categories);
  26. $rankey = getcatgood($cid,$goods);
  28. ?>
  29. <main>
  30. <!-- 其他分类 -->
  31.     <div class="goods">
  32.         <div class="title">
  33.             <a href=""><?php echo $cateName ?></a>
  34.         </div>
  35.         <div class="content">
  36.             <?php foreach ($rankey as $ran) : ?>
  37.                 <div>
  38.                     <a href="<?php echo $ran['url'] ?>"><img src="<?php echo STATIC_PATH .  $ran['pic'] ?>" alt=""></a>
  39.                     <a href=""><?php echo $ran['name'] ?></a>
  40.                 </div>
  41.             <?php endforeach; ?>
  42.         </div>
  43.     </div>
  44. </main>
  45. <?php include __DIR__ . '/inc/public_footer.php' ?>

详情

  1. <?php include __DIR__ . '/inc/public_header.php'  ?>
  2. <?php
  3. $id = $_GET['id'];
  5. function getgood($id,$goods)
  6. {
  7.     foreach ($goods as $good) {
  8.         if ($good['id'] === intval($id)) {
  9.             $shangp = $good;
  10.         }
  11.     }
  12.     return $shangp;
  13. }
  14. $shangp = getgood($id,$goods);
  15. ?>
  16. <!-- 详情页 -->
  17. <main>
  18.     <div class="goods">
  19.         <div class="content">
  20.             <div>
  21.                 <a href="<?php echo $shangp['url'] ?>"><img src="<?php echo STATIC_PATH .  $shangp['pic'] ?>" alt=""></a>
  22.                 <a href=""><?php echo $shangp['name'] ?></a>
  23.             </div>
  24.             <p>
  25.                 <?php echo $shangp['detail'] ?>
  26.             </p>
  27.         </div>
  28.     </div>
  29. </main>
  30. <?php include __DIR__ . '/inc/public_footer.php' ?>

推荐

  1. <?php include __DIR__ . '/inc/public_header.php'  ?>
  2. <?php
  3. $rankeys = array_rand($goods, 6);
  4. foreach ($rankeys as $key) {
  5.     $rankey[] = $goods[$key];
  6. }
  7. ?>
  8. <main>
  9.     <!-- 推� -->
  10.     <div class="goods">
  11.         <div class="title">
  12.             <a href="">推�</a>
  13.         </div>
  14.         <div class="content">
  15.             <?php foreach ($rankey as $ran) : ?>
  16.                 <div>
  17.                     <a href="<?php echo $ran['url'] ?>"><img src="<?php echo STATIC_PATH .  $ran['pic'] ?>" alt=""></a>
  18.                     <a href=""><?php echo $ran['name'] ?></a>
  19.                 </div>
  20.             <?php endforeach; ?>
  21.         </div>
  22.     </div>
  23. </main>
  24. <?php include __DIR__ . '/inc/public_footer.php' ?>

CSS

  1. /* 初始化 */
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5. }
  7. /* 链接默认样式 */
  8. a {
  9.     text-decoration: none;
  10.     color: #333;
  11. }
  13. a:hover {
  14.     color: lightcoral;
  15. }
  17. /* 整体布局:flex */
  18. body {
  19.     width: 100vw;
  20.     height: 100vh;
  21.     font-size: 13px;
  22.     min-width: 500px;
  23.     display: flex;
  24.     flex-direction: column;
  25. }
  27. /*全部顶部导航区*/
  28. .public-header {
  29.     height: 44px;
  30.     background-color: black;
  31.     /*导航链接不要太靠边*/
  32.     padding: 0 20px;
  34.     /*弹性布局*/
  35.     display: flex;
  36.     /*水平排列且不换行*/
  37.     flex-flow: row nowrap;
  38. }
  40. /*设置链接样式*/
  41. .public-header a {
  42.     /*垂直居中*/
  43.     line-height: 44px;
  44.     padding: 0 10px;
  45.     color: #cccccc;
  46. }
  48. /*鼠标悬停链接的样式*/
  49. .public-header > a:hover {
  50.     background-color: #fff;
  51.     color: black;
  52. }
  54. /*最后二个链接:登录,注册居右对齐*/
  55. .public-header > span{
  56.     margin-left: auto;
  57. }
  59. /*设置字体图标*/
  60. .public-header > span i {
  61.     /*字体图标大小必须用font-size,不支持width,height*/
  62.     font-size: 16px;
  63.     /*字体图标可使用color属性设置前景色*/
  64.     color: #ccc;
  65.     padding-right: 10px;
  66. }
  69. /*底部*/
  70. .public-footer {
  71.     /*基本样式*/
  72.     background-color: #282c31;
  73.     color: #959ba2;
  74.     padding: 30px;
  75.     /*网格布局*/
  76.     display: grid;
  77.     /*水平: 列模板*/
  78.     grid-template-columns: 130px 550px 400px;
  79.     /*垂直: 行模板*/
  80.     grid-template-rows: 30px 160px;
  81.     /*网格区域模板*/
  82.     grid-template-areas: 'link link rwm'
  83.     'logo info rwm';
  85.     /*水平居中对齐*/
  86.     justify-content: center;
  87. }
  89. /*页脚头部导航*/
  90. .public-footer > div:first-of-type {
  91.     /*网格区域名称*/
  92.     grid-area: link;
  93. }
  95. /*设置头部导航中的链接样式*/
  96. .public-footer > div:first-of-type a {
  97.     color: #959ba2;
  98.     padding: 5px 15px;
  99. }
  101. /*LOGO占位符样式*/
  102. .public-footer span {
  103.     /*网格区域名称*/
  104.     grid-area: logo;
  105.     /*基本样式*/
  106.     font-size: 30px;
  107.     margin-top: 40px;
  108.     margin-left: 130px;
  109. }
  111. /*版权备案号等其它信息*/
  112. .public-footer > div:nth-of-type(3) {
  113.     /*网格区域名称*/
  114.     grid-area: info;
  115.     /*基本样式*/
  116.     font-size: 13px;
  117.     line-height: 40px;
  118. }
  120. /*二维码样式*/
  121. .public-footer > div:last-of-type {
  122.     /*网格区域名称*/
  123.     grid-area: rwm;
  125.     /*基本样式*/
  126.     border-left: 1px solid #000;
  127.     padding-left: 40px;
  128. }
  130. /*二维码上的描述文本样式*/
  131. .public-footer > div:last-of-type p {
  132.     font-size: 13px;
  133.     margin-left: 20px;
  134. }
  136. /*二维码图片样式*/
  137. .public-footer > div:last-of-type img {
  138.     margin-top: 50px;
  139.     margin-left: 150px;
  140. }
  146. /* 中间主体 */
  147. body > main {
  148.     margin: 20px 0;
  149.     flex: 1;
  151.     display: flex;
  152.     flex-direction: column;
  154.      /* 实现头尾固定, 中间滚动 */
  155.      overflow-y: scroll;
  156. }
  158. body > main > .goods {
  159.     margin: 20px 0;
  160.     display: flex;
  161.     flex-direction: column;
  162. }
  163. body > main > .goods > .title {
  164.     align-self: center;
  166.     border-bottom: 3px solid lightcoral;
  167.     margin: 10px 0;
  168. }
  169. body > main > .goods > .title a {
  170.     font-size: 23px;
  171. }
  172. body > main > .goods > .content {
  173.     display: grid;
  174.     grid-template-columns: repeat(3, 160px);
  175.     grid-gap: 20px;
  176.     place-content: start center;
  178. }
  179. body > main a {
  180.     font-size: 13px;
  181. }
  183. body > main div span {
  184.     color: red;
  185. }
  186. /* 所有图片样式 */
  187. main img {
  188.     width: 160px;
  189.     /* height: 160px; */
  190. }
  191. main img:hover {
  192.     border: 1px solid #aaa;
  193.     box-sizing: border-box;
  194. }
  196. /* 购买按钮 */
  197. body > main button {
  198.     font-size: 13px;
  199.     width: 50px;
  200.     height: 20px;
  201.     background-color: seagreen;
  202.     color: white;
  203.     border: none;
  204.     outline:none;
  205.     border-radius: 5px;
  206.     margin-left: 10px;
  207. }
  208. body > main button:hover {
  209.     background-color: lightcoral;
  210.     cursor: pointer;
  211.     box-shadow: 0 0 3px #888;
  212. }
  215. html {
  216.     height: 100%;
  217.   }
  218.   body {
  219.     min-height: 100%;
  220.     display: grid;
  221.     grid-template-rows: 1fr auto;
  222.   }
  223.   .footer {
  224.     grid-row-start: 2;
  225.     grid-row-end: 3;
  226.   }

流程控制替代语法

if单分支替代语法：

  1. <?php if(表达式):?>
  2.     HTML代码
  3. <?php endif;>

if双分支替代语法：

  1. <?php if(表达式):?>
  2.     HTML代码
  3. <?php else: ?>
  4.     HTML代码 
  5. <?php endif;>

if多分支替代语法：

  1. <?php if(表达式):?>
  2.     HTML代码
  3. <?php elseif(表达式):?>
  4.     HTML代码
  5. <?php else: ?>
  6.     HTML代码 
  7. <?php endif;>

for替代语法：

  1. <?php for(初始化循环计数器;循环判断条件;更新循环计数器):?>
  2.     HTML代码 
  3. <?php endfor;>

foreach替代语法：

  1. <?php foreach(数组 as 变量):?>
  2.     HTML代码 
  3. <?php endforeach;>

while替代语法：

  1. <?php while(表达式):?>
  2.     HTML代码 
  3. <?php endwhile;>

switch替代语法：

  1. <?php switch(变量): case 值1:?>
  2.     HTML代码 
  3. <?php break; ?>
  4. <?php case 值2:?>
  5.     HTML代码 
  6. <?php break; ?>
  7. <?php endswitch;>

包含文件

include | include_once：包含一个外部文件到页面，失败时不会终止程序，加上once仅能包含一次，防止重复加载包含

require |require_once：包含一个外部文件到页面，失败时会终止程序，加上once仅能包含一次，防止重复加载包含

因为工作原因很久没写作业了，课程也拉下很多，也太久没有复习也没学习前面的知识也遗忘很多，趁春节补补作业，这次作业基本上是跟着老师敲出来的，下次什么时候能有时间再写作业也说不定，接下来的作业估计也要很久很久才能交上了，每天都有新知识，还要对前面的进行复习真的忙不过来，最开始害怕的事情还是发生了，两者根本无法平衡，主要时间和精力只能放在工作上，这边只能在找时间从头开始，慢慢学吧，希望今年有时间能够有更多的时间放到这吧，作业会慢慢补上

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看来你是一个动漫迷, 不错
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post