search

博客列表 >0110-数组实现动态网页

0110-数组实现动态网页


原创
2020年01月28日 01:22:41698浏览

效果图





代码

首页

  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仅能包含一次，防止重复加载包含

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

上一条：20200128-laravel 使用中间件时前台Ajax接收后台response返回json的尝试-***线上九期班下一条：PHP常量、双引号、数组、分支控制（0107）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多