![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：作业完成的相当出色, 看得出用心了
Collection
Collection
简单企业站小案例（通过数组数据实现动态网站）
先了解下网站文件结构图（公共头部、底部、静态文件进行了分类存储）
实现效果-首页
实现效果-列表
实现效果-详情页
CSS
/*大灰狼9-7-23*/
*{margin: 0; padding: 0; text-decoration: none; }
.header{background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%); text-align: center;color: #FFFFFF;}
.header li{list-style: none; display: inline-block; line-height: 40px;}
.header li a{color: #FFFFFF;padding: 0 8px;}
.header li a:hover{color:#CD5C5C;}
.header span{padding-right: 88px;}
.footer{background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%); text-align: center;line-height: 38px;color: #FFFFFF;}
.main{min-height: 300px;min-width: 500px;text-align: center; margin: 36px 0; color:#999999;}
.main a{color: #44AAFF;}
.main h2{line-height: 2em;margin-top:15px; color: #9AA4FF;}
.main h3{line-height: 2em; max-width: 640px; margin:0 auto;color: #FFFFFF;border-radius: 16px; background-image: linear-gradient( 135deg, #5EFCE8 10%, #736EFE 100%);}
.main li{line-height: 1.8em;}
.main img{margin: 20px 0;}index.php
<?php
include __DIR__.'/inc/header.php';
foreach ($menu as $key => $value) {
echo "<h2>{$value['nameCn']}</h2>";
echo "<ol>";
foreach ($musics as $keym => $valuem) {
if ($value['classify']===$valuem['classify']) {
echo "<li><a href='details.php?mus_id={$valuem['mus_id']}'>{$valuem['name']}</a></li>";
}
}
echo "</ol>";
}
include __DIR__.'/inc/footer.php';点击 "运行实例" 按钮查看在线实例
list.php
<?php
include __DIR__ . '/inc/header.php';
//取当前栏目id 并将其转为整数
$classId = intval($_GET['classify']);
foreach ($menu as $key => $value) {
if ($value['classify'] === $classId) {
echo "<h2>{$value['nameCn']}</h2>";
echo "<ol>";
foreach ($musics as $keym => $valuem) {
if ($value['classify'] === $valuem['classify']) {
echo "<li><a href='details.php?mus_id={$valuem['mus_id']}'>{$valuem['name']}</a></li>";
}
}
echo "</ol>";
}
}
include __DIR__ . '/inc/footer.php';点击 "运行实例" 按钮查看在线实例
details.php
<?php
include __DIR__ . '/inc/header.php';
//取当前详情id 并将其转为整数
$musicId = intval($_GET['mus_id']);
foreach ($musics as $key => $value) {
if($value['mus_id']===$musicId){
echo "<h3>{$value['name']}</h3>";
echo '<img src="./static/images/'.$value['images']. '" >';
echo "<p>{$value['lyric']}</p>";
echo "<span>{$value['name']}歌曲下载网址:{$value['mus_url']}{$value['mus_id']}</span>";
};
};
include __DIR__ . '/inc/footer.php';点击 "运行实例" 按钮查看在线实例
header.php
<?php //网站的系统配置 $webConfig=[ 'sys_id'=>1, 'title'=>'大灰狼音乐馆', 'webname'=>'php写的第一个网站', 'desc'=>'80后的音乐馆', 'key'=>'刘德华 周杰伦 邓紫棋', 'copy'=>'大灰狼' ]; //网站导航数组数据 $menu=[ ['classify'=>1,'nameEn'=>'ldh','nameCn'=>'刘德华'], ['classify'=>2,'nameEn'=>'zjl','nameCn'=>'周杰伦'], ['classify'=>3,'nameEn'=>'dzq','nameCn'=>'邓紫棋'] ]; //music音乐数组数据 $musics=[ [ 'mus_id'=>1, 'name'=>'练习', 'images'=>'ldh.jpg', 'lyric'=>'练习的歌词~', 'classify'=>1, 'mus_url'=>'http://music.xx***/music_id=1' ], [ 'mus_id'=>2, 'name'=>'笨小孩', 'images'=>'ldh.jpg', 'lyric'=>'笨小孩的歌词~', 'classify'=>1, 'mus_url'=>'http://music.xx***/music_id=1' ], [ 'mus_id'=>3, 'name'=>'***哭吧不是罪', 'images'=>'ldh.jpg', 'lyric'=>'***哭吧不是罪的歌词~', 'classify'=>1, 'mus_url'=>'http://music.xx***/music_id=1' ], [ 'mus_id'=>4, 'name'=>'龙卷风', 'images'=>'zjl.jpg', 'lyric'=>'龙卷风的歌词~', 'classify'=>2, 'mus_url'=>'http://music.xx***/music_id=1' ], [ 'mus_id'=>5, 'name'=>'简单爱', 'images'=>'zjl.jpg', 'lyric'=>'简单爱的歌词~', 'classify'=>2, 'mus_url'=>'http://music.xx***/music_id=1' ], [ 'mus_id'=>6, 'name'=>'七里香', 'images'=>'zjl.jpg', 'lyric'=>'七里香的歌词~', 'classify'=>2, 'mus_url'=>'http://music.xx***/music_id=1' ], [ 'mus_id'=>7, 'name'=>'你把我灌醉', 'images'=>'dzq.jpg', 'lyric'=>'你把我灌醉的歌词~', 'classify'=>3, 'mus_url'=>'http://music.xx***/music_id=1' ], [ 'mus_id'=>8, 'name'=>'光年之外', 'images'=>'dzq.jpg', 'lyric'=>'光年之外的歌词~', 'classify'=>3, 'mus_url'=>'http://music.xx***/music_id=1' ], [ 'mus_id'=>9, 'name'=>'多远都要在一起', 'images'=>'dzq.jpg', 'lyric'=>'多远都要在一起的歌词~', 'classify'=>3, 'mus_url'=>'http://music.xx***/music_id=1' ], ]; ?> <!DOCTYPE html> <html lang="zh"> <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="Keywords" content="<?php echo $webConfig['key'] ;?>"/> <meta name="Description" content="<?php echo $webConfig['desc'] ;?>"/> <title><?php echo $webConfig['webname'] ;?>-<?php echo $webConfig['title'] ;?></title> <link rel="stylesheet" type="text/css" href="./static/css/style.css"/> </head> <body> <div class="header"> <ul> <span>大灰狼的音乐馆</span> <li><a href="index.php">首页</a></li> <?php foreach($menu as $key=>$value): ?> <li><a href="list.php?classify=<?=$value['classify'];?>"><?=$value['nameCn'];?></a></li> <?php endforeach ?> </ul> </div> <!--网站通用顶部结束--> <div class="main">
点击 "运行实例" 按钮查看在线实例
footer.php
</div> <!--网站底部--> <div class="footer"> <p><?php echo $webConfig['copy'] ;?>©版权所有</p> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
为了方便预览效果可访问 http://www.xdidc点com/test0723/demo/