Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:
网页可以分为静态页和动态页两种,两种虽然呈现的页面可以做到同样的效果,但原理却不同。
所谓静态页,就是网页一旦生成,里面的内容就不会再改变,这里的静态不是静止不动,静态页也包括一些能动的部分,如GIF动画。
动态网页取决于由用户提供的参数,并随着用户的访问实时读取存储在数据库中的数据中创建页面。也就是说,动态页并没有以文件的形式存储到web服务器上。
动态网页的网页文件中除了HTML标记以外,还包括一些特定功能的程序代码,这些代码可以使得浏览器和服务器可以交互,所以服务器端根据客户的不同请求动态的生成网页内容。也就是说动态网页相对于静态网页来说,页面代码虽然没有变,但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。
config.php文件
<?php
return[
// 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>
效果图: