简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 7.23 简单企业站 首页、列表页、详情页三个模板组成了一个小网站
Blogger Information
Blog 36
fans 4
comment 3
visits 31558
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
7.23 简单企业站 首页、列表页、详情页三个模板组成了一个小网站
大灰狼的博客
Original
873 people have browsed it

简单企业站小案例（通过数组数据实现动态网站）

先了解下网站文件结构图（公共头部、底部、静态文件进行了分类存储）

1.png

实现效果-首页

1.png

实现效果-列表

2.png

3.png

实现效果-详情页

4.png


5.png

6.png

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/

Correction status：qualified

Teacher's comments：作业完成的相当出色, 看得出用心了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！