登录  /  注册
首页 > 博客列表 > 01月10日作业：运用已学的php制作动态网站
博主信息
博文 145
粉丝 7
评论 7
访问量 159365
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
01月10日作业：运用已学的php制作动态网站
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
原创
1017人浏览过

一、代码：

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产看输出结果调试

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：以后调试, 可以直接用var_dump()+die;或者直接xdebug.... 前端写得不完美, 没关系的, 以后可以借助框架解决, 重要放在编程思维和业务逻辑上
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录