2019年9月19日，用数组循环创建一个简单的网站

白天浪去了，闭关三个小时，作业贴上

1、数组部分common.php

实例

<?php

/**
 * 创建数组
 */
$system = [
    'sitename' => 'MySite',
    'copyright' => 'MySiteName',
];
$cates = [
    ['cate_id' => '1', 'cate_name' => 'gc', 'cate_title' => '国产电影'],
    ['cate_id' => '2', 'cate_name' => 'om', 'cate_title' => '欧美电影'],
    ['cate_id' => '3', 'cate_name' => 'rh', 'cate_title' => '日韩电影']
];
$movies = [
    [
        'mov_id' => '1',
        'title' => '鬼子来了',
        'image_url' => 'static/images/1.jpg',
        'descricption' => '　第二次世界大战期间，中国河北挂甲台村的农民马大三（姜文饰）在***人的统治下过着平静的生活。一个晚上，游击队绑架了日军陆军士兵花屋小三郎（香川照之饰）和翻译董汉臣，把他们捆绑塞入麻袋放在马大三家里，并吩咐马好***管，几天后的大年三十来带人。马大三和村民战战兢兢地看守两人，花屋小三郎和董汉臣数次发出求救信号，皆被村民化解。半年过去了，村民们担心事情暴露，却又不敢把花屋等放了。
        　　马大三最终被董汉臣说动，把花屋和董送到了日军宪兵队驻地，以换取粮食。日军宪兵军官酒冢猪吉是花屋的同乡。他表面上对马等人客气，但背后指责花屋让皇军蒙耻并殴打了他。宪兵队整队去马的村子里和村民联欢送粮，酒到酣时却乍露杀机',
        'cate_id' => '1'
    ],
    [
        'mov_id' => '2',
        'title' => '***照常升起',
        'image_url' => 'static/images/2.jpg',
        'descricption' => '姜文蛰伏七年之后的又一力作，由四个充满魔幻现实主义风格的小故事组成。
        　　1976年，南部一个边远的小山村，李东方（房祖名 饰）的母亲因为一双鞋子疯掉，成为疯妈（周韵 饰），终日疯疯癫癫，一天，李东方无意发现疯妈发疯的真相……
        　　1976年，一所大学里，晚上在操场放电影，有五个***声称被人“摸屁股”，梁老师（黄秋生 饰）阴差阳错成为嫌疑犯，有人开始在暗中帮他洗脱嫌疑……
        　　1976年，老唐（姜文 饰）和唐妻（孔镱珊 饰）下放到李东方所在的小山村。老唐天天和村里的孩子们一起上山打猎，逍遥自在，唐妻备受冷落之下，准备寻找自己新的生活……
        　　1958年，新疆，两个骑骆驼的***，唐妻和身怀六甲的疯妈，并肩而行，迎接她们的，是两段截然不同的命运……
        　　若干年后的纠葛，从茫茫戈壁上的相遇开始，早已冥冥注定。',
        'cate_id' => '1'
    ],
    [
        'mov_id' => '3',
        'title' => '让子弹飞',
        'image_url' => 'static/images/3.jpg',
        'descricption' => '民国年间，花钱捐得县长的马邦德（葛优 饰）携妻（刘嘉玲 饰）及随从走马上任。途经南国某地，遭劫匪张麻子（姜文 饰）一伙伏击，随从尽死，只夫妻二人侥幸活命。马为保命，谎称自己是县长的汤 师爷。为汤师爷许下的财富所动，张麻子摇身一变化身县长，带着手下赶赴鹅城上任。有道是天高皇帝远，鹅城地处偏僻，一方霸主黄四郎（周润发 饰）只手遮天，全然不将这个新来的县长放在眼里。张麻子痛打了黄的武教头（姜武 饰），黄则设计害死张的义子小六（张默 饰）。原本只想赚钱的马邦德，怎么也想不到竟会被卷入这场土匪和恶霸的角力之中。鹅城上空愁云密布，血雨腥风在所难免……
        　　本片根据马识途的小说《夜谭十记》中的《盗官记》一章改编。',
        'cate_id' => '1'
    ],
    [
        'mov_id' => '4',
        'title' => '肖申克的救赎',
        'image_url' => 'static/images/4.jpg',
        'descricption' => '20世纪40年代末，小有成就的青年银行家安迪（蒂姆·罗宾斯 Tim Robbins 饰）因涉嫌杀害妻子及她的情人而锒铛入狱。在这座名为肖申克的监狱内，希望似乎虚无缥缈，终身监禁的惩罚无疑注定了安迪接下来灰暗绝望的人生。未过多久，安迪尝试接近囚犯中颇有声望的瑞德（摩根·弗里曼 Morgan Freeman 饰），请求对方帮自己搞来小锤子。以此为契机，二人逐渐熟稔，安迪也仿佛在鱼龙混杂、罪恶横生、黑白混淆的牢狱中找到属于自己的求生之道。他利用自身的专业知识，帮助监狱管理层逃税、洗***，同时凭借与瑞德的交往在犯人中间也渐渐受到礼遇。表面看来，他已如瑞德那样对那堵高墙从憎恨转变为处之泰然，但是对自由的渴望仍促使他朝着心中的希望和目标前进。而关于其罪行的真相，似乎更使这一切朝前推进了一步……',
        'cate_id' => '2'
    ],
    [
        'mov_id' => '5',
        'title' => '阿甘正传',
        'image_url' => 'static/images/5.jpg',
        'descricption' => '阿甘（汤姆·汉克斯 饰）于二战结束后不久出生在***南方阿拉巴马州一个闭塞的小镇，他先天弱智，智商只有75，然而他的妈妈是一个性格坚强的女性，她常常鼓励阿甘“傻人有傻福”，要他自强不息。
        　　阿甘像普通孩子一样上学，并且认识了一生的朋友和至爱珍妮（罗宾·莱特·潘 饰），在珍妮和妈***爱护下，阿甘凭着上帝赐予的“飞毛腿”开始了一生不停的奔跑。
        　　阿甘成为橄榄球巨星、越战英雄、乒乓球外交使者、亿万富翁，但是，他始终忘不了珍妮，几次匆匆的相聚和离别，更是加深了阿甘的思念。
        　　有一天，阿甘收到珍妮的信，他们终于又要见面……',
        'cate_id' => '2'
    ],
    [
        'mov_id' => '6',
        'title' => '这个杀手不太冷',
        'image_url' => 'static/images/6.jpeg',
        'descricption' => '里昂（让·雷诺饰）是名孤独的职业杀手，受人雇佣。一天，邻居家小姑娘马蒂尔达（纳塔丽·波特曼饰)敲开他的房门，要求在他那里暂避杀身之祸。原来邻居家的主人是警方缉毒组的眼线，只因贪污了一小包毒品而遭恶警（加里·奥德曼饰）杀害全家的惩罚。马蒂尔达得到里昂的留救，幸免于难，并留在里昂那里。里昂教小女孩使***，她教里昂法文，两人关系日趋亲密，相处融洽。
        　　女孩想着去报仇，反倒被抓，里昂及时赶到，将女孩救回。混杂着哀怨情仇的正邪之战渐次升级，更大的冲突在所难免…',
        'cate_id' => '2'
    ],
    [
        'mov_id' => '7',
        'title' => '千与千寻 ',
        'image_url' => 'static/images/7.jpeg',
        'descricption' => '　千寻和爸爸妈妈一同驱车前往新家，在郊外的小路上不慎进入了神秘的隧道——他们去到了另外一个诡异世界—一个中世纪的小镇。远处飘来食物的香味，爸爸妈妈大快朵颐，孰料之后变成了猪！这时小镇上渐渐来了许多样子古怪、半透明的人。
        　　千寻仓皇逃出，一个叫小白的人救了他，喂了她阻止身体消 失的***，并且告诉她怎样去找锅炉爷爷以及汤婆婆，而且必须获得一份工作才能不被魔法变成别的东西。
        　　千寻在小白的帮助下幸运地获得了一份在浴池打杂的工作。渐渐她不再被那些怪模怪样的人吓倒，并从小玲那儿知道了小白是凶恶的汤婆婆的弟子。
        　　一次，千寻发现小白被一群白色飞舞的纸人打伤，为了救受伤的小白，她用河神送给她的***丸驱出了小白身体内的封印以及守封印的小妖精，但小白还是没有醒过来。
        　　为了救小白，千寻又踏上了她的冒险之旅。',
        'cate_id' => '3'
    ],
    [
        'mov_id' => '8',
        'title' => '龙猫',
        'image_url' => 'static/images/8.jpeg',
        'descricption' => '小月的母亲生病住院了，父亲带着她与四岁的妹妹小梅到乡间的居住。她们对那里的环境都感到十分新奇，也发现了很多有趣的事情。她们遇到了很多小精灵，她们来到属于她们的环境中，看到了她们世界中很多的奇怪事物，更与一只大大胖胖的龙猫成为了朋友。龙猫与小精灵们利用他们的神奇力量，为小月与妹妹带来了很多神奇的景观，令她们大开眼界。
        　　妹妹小梅常常挂念生病中的母亲，嚷着要姐姐带着她去看母亲，但小月拒绝了。小梅竟然自己前往，不料途中迷路了，小月只好寻找她的龙猫及小精灵朋友们帮助。',
        'cate_id' => '3'
    ],
    [
        'mov_id' => '9',
        'title' => '天空之城',
        'image_url' => 'static/images/9.jpg',
        'descricption' => '古老帝国拉比达是一座漂浮在空中的巨大的机器岛，传说那里已经无人居住，蕴藏着巨大的财富。因此，无论军方还是海盗，都在找寻着这座传说中的***岛。
        　　矿工帕克这天偶遇拉比达继承人希达，两人一见如故。因为希达身上有找寻拉比达帝国的重要物件***石，军方和海盗两帮人马都在追杀希达。帕克带着希达一起逃亡，最终都没有逃出军方的手中，希达被军队掳走了。
        　　为救朋友，帕克只能选择与海盗合作。帕克与海盗成功救出了希达，同时，他们也发现了军方的邪恶计划。为了阻止军方邪恶计划的实施，他们和海盗一起踏上了寻找拉比达之旅。 ',
        'cate_id' => '3'
    ],
];
$comments = [
    ['mov_id' => '1', 'com_user' => '张老师', 'com_time' => '1918664250', 'com_con' => '真***！'],
    ['mov_id' => '1', 'com_user' => '李老师', 'com_time' => '1718664250', 'com_con' => '真***！1'],
    ['mov_id' => '1', 'com_user' => '王老师', 'com_time' => '1918664250', 'com_con' => '真***！2'],
    ['mov_id' => '1', 'com_user' => '刘老师', 'com_time' => '1518664250', 'com_con' => '真***！3'],
    ['mov_id' => '2', 'com_user' => '朱老师', 'com_time' => '1718664250', 'com_con' => '真***！4'],
    ['mov_id' => '2', 'com_user' => '陈老师', 'com_time' => '1418664250', 'com_con' => '真***！5'],
];

2、头部header.php

实例

<? require_once('common.php') ?>
<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <link rel="stylesheet" href="static/css/style.css">
    <title>
        <? echo $system['sitename'] ?>
    </title>
</head>
<div class="header">
    <div class="container">
        <a href="index.php">首页</a>
        <? foreach ($cates as $cate) : ?>
            <a href="list.php?cate_id=<? echo $cate['cate_id'] ?>"><? echo $cate['cate_title'] ?></a>
        <? endforeach; ?>
    </div>
</div>

3、底部footer.php

实例

<div class="footer">
    <div class="container">
        <p><?php echo $system['copyright'] ?>©版权所有</p>
    </div>
</div>

<body>

</body>

</html>

4、首页部分index.php

实例

<? require_once('header.php') ?>
<div class="main">
    <div class="container">
        <? foreach ($cates as $cate) : ?>
            <div class="movie_list">
                <h2><? echo $cate['cate_title'] ?></h2>
                <ul>
                    <? foreach ($movies as $movie) : ?>
                        <? if ($cate['cate_id'] == $movie['cate_id']) : ?>
                            <li><a href="content.php?mov_id=<? echo $movie['mov_id'] ?>"><? echo $movie['title'] ?> </a></li>
                        <? endif; ?>
                    <? endforeach ?>
                </ul>
            </div>
        <? endforeach; ?>
    </div>
</div>
<? require_once('footer.php') ?>

5、列表页部分list.php

实例

<? require_once('header.php');
$cate_id = intval($_GET['cate_id']);
?>

<div class="main">
    <div class="container">
        <div class="movie_list">
            <? foreach ($cates as $cate) : ?>
                <? if ($cate_id == $cate['cate_id']) : ?>
                    <h2><? echo $cate['cate_title'] ?></h2>
                    <ul>
                        <? foreach ($movies as $movie) : ?>
                            <? if ($cate_id == $movie['cate_id']) : ?>
                                <li><a href="content.php?mov_id=<? echo $movie['mov_id'] ?>"><? echo $movie['title'] ?> </a></li>
                            <? endif; ?>
                        <? endforeach; ?>
                    </ul>
                <? endif; ?>
            <? endforeach; ?>
        </div>
    </div>
</div>

<? require_once('footer.php') ?>

6、内容也部分content.php

实例

<? require_once('header.php');
$mov_id = intval($_GET['mov_id']);
?>
<div class="main">
    <div class="container">
        <div class="content">
            <? foreach ($movies as $movie) : ?>
                <? if ($mov_id == $movie['mov_id']) : ?>
                    <img src="<? echo $movie['image_url'] ?>" alt="">
                    <p><? echo $movie['descricption'] ?></p>
                <? endif; ?>
            <? endforeach; ?>
        </div>
        <h3>评论</h3>
        <div class="comment">
            <? foreach ($comments as $comment) : ?>
                <? if ($mov_id == $comment['mov_id']) : ?>
                    <div class="com_header">
                        <span class="com_user"><? echo $comment['com_user'] ?></span><span class="com_time"><? echo date('Y-m-d h:m:s', $comment['com_time']) ?></span>
                    </div>
                    <div class="com_con">
                        <p><? echo $comment['com_con'] ?></p>
                    </div>
                <? endif; ?>
            <? endforeach; ?>
        </div>
    </div>
</div>
<? require_once('footer.php') ?>

7、css部分 style.css

实例

html,
body,
ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 0 auto;
}

.header,
.footer {
    height: 60px;
}

.header {
    background-color: #ee4c4c;
    line-height: 60px;
}

.header a {
    text-decoration: none;
    color: #ffffff;
    margin: 0 15px;
}

.header a:hover {
    text-decoration: underline;
    font-size: 1.1em;
}


/* .main {
    min-height: 600px;
} */

.main .movie_list h2 {
    padding: 10px 15px;
    background-color: #eee;
}

.main .movie_list ul {
    padding: 20px 15px;
}

.main .movie_list ul li {
    list-style: none;
    line-height: 2em;
}

.main .movie_list ul li a {
    text-decoration: none;
    color: #000000;
}

.main .movie_list ul li a:hover {
    color: red;
    text-decoration: underline;
    font-size: 1.1em;
}

.main .container .content {
    padding: 10px;
}

.main .container .content img {
    max-width: 90%;
    display: block;
    margin: 0 auto;
}

.main .container .content p {
    text-indent: 2em;
    margin-top: 20px;
}

.main h3 {
    padding: 10px;
    margin-top: 30px;
}

.comment {
    border: 1px solid #cccccc;
    margin-bottom: 15px;
}

.comment .com_header {
    height: 20px;
    line-height: 20px;
    padding: 10px;
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #cccccc
}

.comment .com_header .com_user {
    font-size: 0.8em;
    font-weight: bold;
    color: blue
}

.comment .com_header .com_time {
    float: right;
    font-size: 0.8em;
}

.comment .com_con {
    padding: 10px
}

.footer {
    background-color: #888888;
    text-align: center;
    line-height: 60px;
}

运行效果：