批改状态:合格
老师批语:
网页可以分为静态页和动态页两种,两种虽然呈现的页面可以做到同样的效果,但原理却不同。
所谓静态页,就是网页一旦生成,里面的内容就不会再改变,这里的静态不是静止不动,静态页也包括一些能动的部分,如GIF动画。
动态网页取决于由用户提供的参数,并随着用户的访问实时读取存储在数据库中的数据中创建页面。也就是说,动态页并没有以文件的形式存储到web服务器上。
动态网页的网页文件中除了HTML标记以外,还包括一些特定功能的程序代码,这些代码可以使得浏览器和服务器可以交互,所以服务器端根据客户的不同请求动态的生成网页内容。也就是说动态网页相对于静态网页来说,页面代码虽然没有变,但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。
config.php文件
<?phpreturn[// head'title' =>'仿电影网站首页','keywords' => '国产,欧美,日韩','description' => '为你搜集全网最新最好看的电影',// 科幻'nav' => ['喜剧','爱情','动作','恐怖','科幻'],'tag' => ['封神三部曲','急先锋','唐人街探案','成龙','周星驰'],'data' => [['id' => '1', 'name' => '《侍神令》生死与共预告','img' => '1php/images/1.png'],['id' => '2', 'name' => '《复身犯》首支预告','img' => '1php/images/2.png'],['id' => '3', 'name' => '《唐探3》终极预告','img' => '1php/images/3.png'],['id' => '4', 'name' => '《涉过愤怒的海》灼心升级','img' => '1php/images/4.png'],['id' => '5', 'name' => '《姜武张颂文《扫黑·决战》','img' => '1php/images/5.png'],['id' => '6', 'name' => '《吉祥如意》曝主题曲','img' => '1php/images/6.png']]];
index.php文件
<?php$config = include_once './1php/config.php';?><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 关键字 --><meta name="" content="<?= $config['keywords'] ?>"><!-- 描述 --><meta name="" content="<?= $config['description'] ?>"><!-- 标题 --><title><?= $config['title'] ?></title></head><style>*{margin: 0; padding: 0; box-sizing: border-box;}html{font-size: 16px}a{text-decoration: none; color: #000;}/* li{list-style: none;} */.nav>ul{background: #ccc; display: flex;}.nav>ul>li,.content>.main>ul>li{padding: 1em; list-style: none;}.nav>ul>li>a:hover{color: #ef5b9c;}.nav{margin-bottom: 1em;}.content{ display: grid; grid-template-columns: 25em 1fr;grid-template-rows: 1fr; gap:1em;}.content>.main,.content>.aside{ border: #ccc 1px solid; padding: 1em;}.content>.aside>h3,.content>.main>h3{border-bottom: #ccc 1px solid;margin-bottom: 1em}.content>.aside>ol>li{margin-left: 1em;}.content>.main{display: grid; grid-template-columns: repeat(3,1fr);grid-template-rows: 1fr; gap:1em}.content>.main>div>img{ width: 100%;border: none;}</style><body><header class="nav"><ul><?php foreach($config['nav'] as $row): ?><li><a href=""><?= $row ?></a></li><?php endforeach ?></ul></header><div class="content"><div class="aside"><h3>热门标签</h3><ol><?php foreach($config['tag'] as $row): ?><li><a href=""><?= $row ?></a></li><?php endforeach ?></ol></div><div class="main"><!-- <h3>热门预告</h3> --><?php foreach($config['data'] as $row): ?><div><img src="<?= $row['img'] ?>" alt=""><a href=""><?= $row['name'] ?></a></div><?php endforeach ?></div></div></body></html>
效果图:
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号