微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 01月10日作业：运用已学的php制作动态网站
博主信息
博文 145
粉丝 7
评论 7
访问量 202261
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
01月10日作业：运用已学的php制作动态网站
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
原创
1397人浏览过

一、代码：

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条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

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