0121-仿电影网站用php动态填充数据

静态页面和动态页面有什么区别

网页可以分为静态页和动态页两种，两种虽然呈现的页面可以做到同样的效果，但原理却不同。

1.静态页面

所谓静态页，就是网页一旦生成，里面的内容就不会再改变，这里的静态不是静止不动，静态页也包括一些能动的部分，如GIF动画。

2.动态页面

动态网页取决于由用户提供的参数，并随着用户的访问实时读取存储在数据库中的数据中创建页面。也就是说，动态页并没有以文件的形式存储到web服务器上。
动态网页的网页文件中除了HTML标记以外，还包括一些特定功能的程序代码，这些代码可以使得浏览器和服务器可以交互，所以服务器端根据客户的不同请求动态的生成网页内容。也就是说动态网页相对于静态网页来说，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。

仿电影网站用php动态填充数据

1.数据配置

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>

效果图：

静态页面和动态页面有什么区别

1.静态页面

2.动态页面

仿电影网站用php动态填充数据

1.数据配置

相关文章