1、公共部分:header.php
<?php $arr = [ [ 'title' => 'php框架', 'url' => 'php.php', 'img' => '...', 'frame' => [ 'laravel', 'thinkphp', 'yii' ] ], [ 'title' => 'javascript框架', 'url' => 'js.php', 'img' => '...', 'frame' => [ 'vue', 'react', 'Angular' ] ], [ 'title' => '前端ui框架', 'url' => 'web.php', 'img' => '...', 'frame' => [ 'layui', 'phpcn-ui', 'vant-ui' ] ] ]; $copyright = '张浩刚,版权所有'; ..... <style> a{text-decoration: none;color:#333;} header{width: 100%; height: 60px;background-color: lightcoral;} header>nav{height: 100%;display:grid;grid-template-columns: repeat(4,1fr);place-items: center;} header>nav>a{color:white;text-decoration: none;font-size: 20px;} footer{width: 100%; height: 60px;background-color: lightcoral;display: flex;justify-content: center;align-items: center;color: white;} </style> //头部导航公共区 <header> <nav> <a href='index.php'>首页</a> foreach($arr as $v){ echo '<a href="' .$v['url']. '">'.$v['title'].'</a>'; } </nav> </header>
2、底部公共部分:footer.php
<footer><p><?php echo $copyright; ?></p></footer>
3、首页:index.php
<?php require 'header.php'; foreach ($arr as $v){ echo '<h2><a href="' . $v['url'] . '">' . $v['title'] . '</a></h2>'; echo '<ul>'; foreach($v['frame'] as $vv){ echo '<li><a href="">'.$vv.'</a></li>'; } echo '</ul>'; } require 'footer.php'; ?>
4、php框架页面:php.php
<?php include 'header.php'; echo '<h2><a href="' . $arr[0]['url'] . '">' . $arr[0]['title'] . '</a></h2>'; echo '<ul>'; foreach($arr[0]['frame'] as $v){ echo '<li><a href="">'.$v.'</a></li>'; } echo '</ul>'; require 'footer.php'; ?>
5、javascript框架页面:js.php
<?php include 'header.php'; echo '<h2><a href="' . $arr[1]['url'] . '">' . $arr[1]['title'] . '</a></h2>'; echo '<ul>'; foreach($arr[1]['frame'] as $v){ echo '<li><a href="">'.$v.'</a></li>'; } echo '</ul>'; require 'footer.php'; ?>
6、前端ui框架:web.php
<?php include 'header.php'; echo '<h2><a href="' . $arr[2]['url'] . '">' . $arr[2]['title'] . '</a></h2>'; echo '<ul>'; foreach($arr[2]['frame'] as $v){ echo '<li><a href="">'.$v.'</a></li>'; } echo '</ul>'; require 'footer.php'; ?>
总结:完整全手动演示两遍,自信掌握已经学习的这些!