Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 01月10日作业：运用已学的php制作动态网站
Blogger Information
Blog 145
fans 7
comment 7
visits 164458
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
01月10日作业：运用已学的php制作动态网站
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
1044 people have browsed it

一、代码：

1、css代码：（所页面代码均在里面）

  1. /*公共样式*/
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     font-size: 14px;
  6.     font-family: "Adobe 宋体 Std L";
  7.     /*background-color: #969896;*/
  8.     /*outline:3px dashed #ff0000;*/
  9.     color: #333333;
  11. }
  12. a {
  13.     text-decoration: none;
  15. }
  16. ul {
  17.     list-style: none;
  18. }
  19. i {
  20.     font-style: normal;
  21. }
  22. /*整体flex布局*/
  23. body {
  24.     display: flex;
  25.     flex-direction: column;
  27. }
  28. /*头部导航样式*/
  29. header {
  30.     height: 80px;
  31.     width: 100%;
  32.     background-color: #63a35c;
  33.     box-sizing: border-box;
  34.     display: flex;
  35.     padding: 5px 120px;
  36.     align-items: center;
  37.     justify-content:space-between;
  39. }
  41. header > .navs {
  42.     width: 600px;
  43.     align-self: flex-end;
  44.     display: flex;
  45.     justify-content: space-evenly;
  46. }
  47. header > .navs > span > a {
  48.     font-size: 20px;
  49. }
  51. header > .navs > span > a:hover {
  52.     color:#ffffff;
  53. }
  54. /*主体内容样式*/
  55. main {
  56.     width: 1200px;
  57.     min-height: 600px;
  58.     margin: 0 auto;
  59.     /*display: flex;*/
  60.     /*flex-flow: column nowrap;*/
  61.     padding: 10px 0;
  63. }
  66. main > div  {
  67.     margin: 10px 0;
  68. }
  70. main > div > span {
  72.     font-size: 22px;
  73.     font-weight: bold;
  74.     padding-bottom: 4px;
  75.     border-bottom: 2px solid #ff0000;
  76.     margin-left: 20px;
  77. }
  78. /*行业新闻布局*/
  79. main >  .news  {
  80.     display: flex;
  81.     flex-flow: row nowrap;
  82. }
  84. main >  .news > a > img {
  85.     width: 750px;
  86.     height: 400px;
  87.     display: block;
  88.     padding:1px;
  89.     box-sizing: border-box;
  90. }
  91. main >  .news > .news-list {
  92.     width: 400px;
  93.     display: flex;
  94.     flex-flow: column;
  95.     margin-left: 20px;
  96. }
  97. main >  .news >  .news-list > span {
  99.     font-size: 18px;
  100.     font-weight: bolder;
  101.     color:#666666;
  102.     margin-bottom: 10px;
  103.     padding-bottom: 5px;
  104.     border-bottom: 1px solid #ff0000;
  105. }
  107. main >  .news >  .news-list > ul {
  108.     display: flex;
  109.     flex-direction: column;
  110.     justify-content: space-evenly;
  111.     margin-left: 15px;
  112. }
  113. main >  .news >  .news-list > ul > li {
  114.     height: 40px;
  115.     display: flex;
  116.     align-items: center;
  117.     line-height: 40px;
  118. }
  119. main >  .news >  .news-list > ul > li > i {
  120.     font-style: normal;
  121.     font-size: 15px;
  122.     background-color: #63a35c;
  123.     color: white;
  124.     width: 36px;
  125.     height: 20px;
  126.     text-align: center;
  127.     line-height: 20px;
  128.     border-radius: 4px;
  129.     margin-right: 5px;
  130. }
  131. /*商品布局*/
  132. main > div > div {
  133.     width: 1200px;
  134.     margin: 10px auto;
  135.     display: grid;
  136.     grid-template-columns: repeat(4,1fr);
  138. }
  139. main > div:hover{
  140.     box-shadow: 0 0 5px #404040;
  141. }
  142. main > div > div> div  img {
  143.     width: 200px;
  144.     height: 160px;
  145. }
  146. main > div > div > div {
  147.     display: flex;
  148.     flex-direction: column;
  149.     align-items: center;
  150. }
  151. main > div > div > div > span > i {
  152.     font-style: normal;
  153.     color: #ff0000;
  154. }
  155. /*底部样式*/
  156. footer {
  157.     height: 120px;
  158.     width: 100%;
  159.     background-color: #63a35c;
  160.     box-sizing: border-box;
  161.     padding: 5px 120px;
  162.     display: flex;
  163.     flex-direction: row;
  164.     justify-content: space-between;
  165.     align-items: center;
  166. }
  167. footer > .info {
  168.     width: 600px;
  169.     height: 80px;
  170. }
  171. /*detail详情页css*/
  172. .details > span > a > i {
  173.     font-style: normal;
  174.     font-size: 14px ;
  175.     font-weight: bold;
  177. }
  178. .details > span > a >i:hover {
  179.     color:#63a35c;
  180. }
  181. .details > .good {
  182.     display: flex;
  184. }
  185. .details > .good > a >img {
  186.     width: 400px;
  187.     height: 320px;
  188. }
  189. .details > .good > .detail {
  190.     display: flex;
  191.     flex-direction: column;
  192.     justify-content: space-evenly;
  193. }
  194. /*page页样式*/
  195. .pages {
  196.     width: 1200px;
  197.     margin: 10px auto;
  198. }
  200. .pages > span > a > i {
  201.     font-style: normal;
  202.     font-size: 14px ;
  203.     font-weight: bold;
  204. }
  205. .pages > span > a >i:hover {
  206.     color:#63a35c;
  207. }
  209. .pages > .page {
  210.     width: 1000px;
  211.     margin: 10px auto;
  212.     min-height: 550px;
  213. }
  214. .pages > .page >  div {
  216.     width: 400px;
  217.     margin: 10px auto;
  218.     font-size: 24px;
  219.     text-align: center;
  220. }
  221. .pages > .page >  p {
  222.     margin: 20px 0;
  223.     font-size: 16px;
  224.     font-family: "Adobe 楷体 Std R";
  226. }

2、html：页面代码大多雷同仅传部分页面代码：

配置页代码（数据）：

  1. <?php
  2. //网站名称
  3. $site='种业圈';
  5. //导航目录
  6. $navs=[
  7.     ['cid'=>1,'name'=>'首页','url'=>'index.php'],
  8.     ['cid'=>2,'name'=>'最新上架','url'=>'goods-list.php?cid=2'],
  9.     ['cid'=>3,'name'=>'产品推荐','url'=>'goods-list.php?cid=3'],
  10.     ['cid'=>4,'name'=>'行业新闻','url'=>'news-list.php'],
  11.     ['cid'=>5,'name'=>'关于我们','url'=>'page.php?id=1']
  12. ];
  14. //产品信息
  16. $goods=[
  17.     ['id'=>1,'src'=>'images/2%20(1).gif','name'=>'潍玉6号','pic'=>'51','detail'=>'产品介绍1','url'=>'details.php?id=1'],
  18.     ['id'=>2,'src'=>'images/2%20(2).gif','name'=>'农玉16','pic'=>'52','detail'=>'产品介绍2','url'=>'details.php?id=2'],
  19.     ['id'=>3,'src'=>'images/2%20(3).gif','name'=>'新玉158','pic'=>'53','detail'=>'产品介绍3','url'=>'details.php?id=3'],
  20.     ['id'=>4,'src'=>'images/2%20(4).gif','name'=>'大成168','pic'=>'54','detail'=>'产品介绍4','url'=>'details.php?id=4'],
  21.     ['id'=>5,'src'=>'images/2%20(5).gif','name'=>'成玉888','pic'=>'55','detail'=>'产品介绍5','url'=>'details.php?id=5'],
  22.     ['id'=>6,'src'=>'images/2%20(6).gif','name'=>'成玉909','pic'=>'40','detail'=>'产品介绍6','url'=>'details.php?id=6'],
  23.     ['id'=>7,'src'=>'images/2%20(7).gif','name'=>'郑单958','pic'=>'45','detail'=>'产品介绍7','url'=>'details.php?id=7'],
  24.     ['id'=>8,'src'=>'images/2%20(8).gif','name'=>'郑单958','pic'=>'46','detail'=>'产品介绍8','url'=>'details.php?id=8']
  25. ];
  27. //行业新闻
  29. $news=[
  30.   ['nid'=>1,'title'=>'大成种业介绍','url'=>'page.php?id=1','content'=>"河南大成种业有限公司成立于2005年，注册资本3500万元。公司是以玉米、小麦、大豆、粮油等主要农作物种子的选育、生产、加工、销售和技术服务为主的育繁推一体化企业。
  32. 2015年开始重组，至2017年3月重组完成。原秋乐种业总经理李继军博士出任大成种业董事长、宋新敏任副董事长、首席育种家、焦宏廷任总经理，标志着大成种业的组织管理机构、高管团队和育种团队正式构建完成。
  35.       公司拥有强大的科研队伍和机构。以郑州市新育农作物研究所、黄河玉米新品种创新联盟玉米新品种测试联合体、河南玉成玉米新品种创新联盟、华夏小麦新品种测试联合体、河南丰收小麦品种试验联合体、河南炎黄小麦新品种测试联合体为依托，以合作的多家科研机构为辅助，在强化自主研发的同时，加强深度合作。
  37.       公司在甘肃、海南、河南拥有稳定的制（繁）种基地。在河南荥阳建立了科研试验站，占地212亩；在新乡市平原示范区建有大型现代化种子加工储运中心。同时，配套建设有覆盖种子生产、加工、销售全流程的质量监控体系。
  39. 公司坚持“以人为本、质量优先、服务跟进”的经营理念，以农业增产、农民增收为己任，逐步健全营销网络和技术服务体系，努力把河南大成种业打造成国内外知名的育繁推一体化种子企业。"],
  40.   ['nid'=>2,'title'=>'种业圈介绍','url'=>'page.php?id=2','content'=>"种业圈公众号
  42. 种业圈始建于2014年，是依托于微信公众号平台建立的，旨于借助互联网平台建立一个农资人自己的交流平台，形成一个公司、销售、代理商循环交流沟通方式。服务农业、服务种子、提供相应的信息和技术支持！"],
  43.   ['nid'=>3,'title'=>'种业圈介绍2','url'=>'page.php?id=3','content'=>"种业圈公众号222222222222
  45. 种业圈始建于2014年，是依托于微信公众号平台建立的，旨于借助互联网平台建立一个农资人自己的交流平台，形成一个公司、销售、代理商循环交流沟通方式。服务农业、服务种子、提供相应的信息和技术支持！"],
  46.   ['nid'=>4,'title'=>'种业圈介绍3','url'=>'page.php?id=4','content'=>"种业圈公众号3333333333333
  48. 种业圈始建于2014年，是依托于微信公众号平台建立的，旨于借助互联网平台建立一个农资人自己的交流平台，形成一个公司、销售、代理商循环交流沟通方式。服务农业、服务种子、提供相应的信息和技术支持！"],
  50. ];
  52. //最新产品，调用函数
  53. function get_hot_goods($a) {
  54.     $hot_good=[];
  55.     for ($num=0;$num<4;$num++){
  56.         $hot_good[]=$a[$num];
  58.     }
  59.     return ($hot_good);
  60. };
  61. $hot_good=get_hot_goods($goods);

公共头部代码：

  1. <?php include 'config.php'?>
  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title><?php echo $site; ?></title>
  7.     <link rel="stylesheet" href="css/index.css">
  8. </head>
  9. <body>
  10. <header>
  11.     <a href="index.php"><img src="images/logo.png" alt="logo"></a>
  12.     <div class="navs">
  13.         <?php foreach($navs as $nav):?>
  14.         <span><a href="<?php echo $nav['url'] ?>"><?php echo $nav['name']?></a></span>
  15.         <?php endforeach; ?>
  17.     </div>
  18. </header>

公共底部代码：

  1. <footer>
  2.     <a href=""><img src="images/logo.png" alt="logo" style="height: 80px;width: 200px;"></a>
  3.     <div class="info">
  4.         <p>种业圈公众号</p>
  5.         <p>种业圈始建于2014年，是依托于微信公众号平台建立的，旨于借助互联网平台建立一个农资人自己的交流平台，形成一个公司、销售、代理商循环交流沟通方式。服务农业、服务种子、提供相应的信息和技术支持！</p>
  6.     </div>
  7.     <img src="images/种业圈.jpg" alt="" style="width: 80px;height: 80px;">
  8. </footer>
  9. </body>
  10. </html>

首页代码：

  1. <?php include 'public/public_header.php'?>
  3.     <main>
  5.         <div class="news">
  6.                 <div class="news-list">
  7.                     <span>行业新闻</span>
  8.                      <ul>
  9.                          <?php foreach($news as $new):?>
  10.                         <li><i>分类</i><a href="<?php echo $new['url']?>"><?php echo $new['title']?></a></li>
  11.                          <?php endforeach; ?>
  12.                     </ul>
  13.                 </div>
  14.                 <a href="">
  15.                     <img src="images/show1.png" alt="">
  16.                 </a>
  18.         </div>
  20.         <div class="new-goods">
  21.             <span>最新上架</span>
  22.             <div>
  23.                 <?php foreach ($hot_good as $good):?>
  24.                     <div class="good">
  25.                         <a href="<?php echo $good['url']?>"><img src="<?php echo $good['src']?>" alt=""></a>
  26.                         <span><?php echo $good['name']?></span>
  27.                         <span>价格：<i>&yen;<?php echo $good['pic']?></i></span>
  28.                     </div>
  29.                 <?php endforeach;?>
  30.             </div>
  31.         </div>
  33.         <div class="hot-goods">
  34.             <span>产品推荐</span>
  35.             <div>
  36.                 <?php foreach ($goods as $good):?>
  37.                     <div class="good">
  38.                         <a href="<?php echo $good['url']?>"><img src="<?php echo $good['src']?>" alt=""></a>
  39.                         <span><?php echo $good['name']?></span>
  40.                         <span>价格：<i>&yen;<?php echo $good['pic']?></i></span>
  41.                     </div>
  42.                 <?php endforeach;?>
  43.             </div>
  45.         </div>
  47.     </main>
  48. <?php include 'public/public_footer.php'?>

效果图：

产品列表页：

  1. <?php include 'public/public_header.php'?>
  2. <?php //echo $_GET['cid'];
  3.     $class='';
  4.     if(intval($_GET['cid'])===2) {
  5.     $h_goods=get_hot_goods($goods);
  6.     $class='最新上架';
  7.     } elseif (intval($_GET['cid'])===3){
  8.         $h_goods=$goods;
  9.         $class='产品推荐';
  10.     }
  11. ?>
  12. <main>
  16.     <div class="new-goods">
  17.         <span><?php echo $class ?></span>
  18.         <div>
  19.             <?php foreach ($h_goods as $good):?>
  20.                 <div class="good">
  21.                     <a href="<?php echo $good['url']?>"><img src="<?php echo $good['src']?>" alt=""></a>
  22.                     <span><?php echo $good['name']?></span>
  23.                     <span>价格：<i>&yen;<?php echo $good['pic']?></i></span>
  24.                 </div>
  25.             <?php endforeach;?>
  26.         </div>
  27.     </div>
  31. </main>
  32. <?php include 'public/public_footer.php'?>

效果图：

产品详情页和文章详情页：

1、产品详情页

  1. <?php include 'public/public_header.php'?>
  2. <?php
  3. function get_food_id($goods) {
  4.     foreach ($goods as $good) {
  5.         if (intval($_GET['id'])===$good['id']) {
  6.                     return $good;
  7.         }
  8.     }
  9. }
  10. $good=get_food_id($goods);
  11. ?>
  12. <main class="details">
  13.     <span><a href=""><i>最新上架</i></a>&nbsp;&nbsp;》产品详情</span>
  14.     <div class="good">
  15.         <a href="<?php echo $good['url']?>"><img src="<?php echo $good['src']?>" alt=""></a>
  16.         <div class="detail">
  17.             <span><?php echo $good['name']?></span>
  18.         <span>价格：<i>&yen;<?php echo $good['pic']?></i></span>
  19.         <p><?php echo $good['detail']?></p>
  20.         </div>
  21.     </div>
  22. </main>
  23. <?php include 'public/public_footer.php'?>

效果：

文章详情页

  1. <?php include 'public/public_header.php'?>
  2. <?php
  3. function get_new_id($news){
  4.     foreach ($news as $new) {
  5.         if ($new['nid']===intval($_GET['id'])){
  6.                 return $new;
  7.             }
  9.     }
  10. }
  12. $new=get_new_id($news);
  13. ?>
  15.     <div class="pages">
  16.         <span><a href="news-list.php"><i>行业新闻</i></a>&nbsp;&nbsp;》内容详情</span>
  17.         <div class="page">
  18.             <div><?php echo $new['title']?></div>
  19.             <p><?php echo $new['content']?></p>
  20.         </div>
  21.     </div>
  23. <?php include 'public/public_footer.php'?>

效果图：

作业总结：

1、网站网页规划不好，没能很好的利用组件效果。网页布局有些凌乱：
特别是在写CSS的时候，不同页面没有很好的区分class属性，在写首页是直接用标签选择器（没有用类），忽略了其他的面布局，造成不同页面相同结构的标签属性一直，有些页面无法调整css属性，
可重复利用的css属性和单个页面的css不能很好的区分；
2、数据已经可以动态化实现
3、网站：先写首页（先不考虑数据动态化）——在拆分头部和底部以及栏目分类等，组件化；——在写其他页面——然后捉个页面，修改元素内容（利用php实现数据动态化）。
4、php和html混编时：php分支语句和循环语句的简写：大括号以:代替，结尾以类似end开头endif结尾
5、css导入外部样式文件：@import（）；
php导入外部php文件：include ();或者require();(两者区别在于，include导入失败，依旧执行后面代码，require则不执行)；
6、array_rand($arr,int);随机获取数组中int个键名
7、__DIR__获取文件所在文件的绝对路径
8、利用php输出函数echo和print_r产看输出结果调试

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：以后调试, 可以直接用var_dump()+die;或者直接xdebug.... 前端写得不完美, 没关系的, 以后可以借助框架解决, 重要放在编程思维和业务逻辑上
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