Community Learn Tools Library Leisure
search
English
Home > List of blog posts > php环境-静态到动态-写一个页面
Blogger Information
Blog 70
fans 1
comment 0
visits 53099
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
php环境-静态到动态-写一个页面
葡萄枝子
Original
600 people have browsed it

php环境-静态到动态-写一个页面

  1. 将本地的php开发环境搭建好（不限制集成工具)
  2. 理解网站从静态到动态的发展历史，并写出你的理解
  3. 模仿老师的案例，自己写一个类似的页面出来

1. 将本地的php开发环境搭建好（不限制集成工具)

  • phpstudy 启动 mysql 和 nginx

本地环境

  • 网站添加本地网站 php.io 完成

添加网站

  • 写第一个 index.php <?='hello world!'?> 运行

hello world

2. 理解网站从静态到动态的发展历史，并写出你的理解

  • .txt 纯文本，不带格式

  • .html 格式化的文本，但内容固定

  • .php 由服务器端动态改变内容，产生输出到 html，更具多样化，从格式到内容都是可变

3. 模仿老师的案例，自己写一个类似的页面出来

  • inc 目录下新建3个 php 文件
  1. config.php 配置文件
  1. <?php
  2. // metas
  3. $title = 'Hello world';
  4. $keywords = 'Hello, world, keyword';
  5. $description = 'Hello world description';
  7. // 导航
  8. $navs = ['首页', '分类页', '标签页', '独立页面'];
  10. // 版权
  11. $copyr = '&copy;'. date('Y');
  1. header.php 头部文件
  1. <?php require __DIR__ .'/config.php'; ?>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title><?=$title?></title>
  8.     <meta name="keywords" content="<?=$keywords?>">
  9.     <meta name="description" content="<?=$description?>">
  10.     <style>
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.             box-sizing: border-box;
  15.         }
  16.         /* 外层容器 */
  17.         .container {
  18.             width: 480px;
  19.             margin: 0 auto;
  20.         }
  21.         .container > * {
  22.             margin-bottom: 10px;
  23.             padding: 10px;
  24.         }
  25.         /* 页头 */
  26.         .container > header {
  27.             color: white;
  28.             background-color: purple;
  29.         }
  30.         .container > header > ul  {
  31.             list-style-type: none;
  32.             display: flex;
  33.             justify-content: space-around;
  34.         }
  35.         /* 菜单分割线 */
  36.         .container > header > ul > li ~ * {
  37.             border-left: 1px solid #ccc;
  38.             padding: 0 28px;
  39.         }
  40.         .container > header > ul > li > a {
  41.             color: white;
  42.         }
  43.         /* 主体 */
  44.         .container > main {
  45.             border: 1px solid #ccc;
  46.         }
  47.         .container > main > ol {
  48.             list-style-position: inside;
  49.         }
  50.         /* 页脚 */
  51.         .container > footer {
  52.             color: white;
  53.             text-align: center;
  54.             background-color: grey;
  55.         }
  56.     </style>
  57. </head>
  58. <body>
  59.     <div class="container">
  60.         <header>
  61.         <?php if ($navs) : ?>
  62.             <ul>
  63.             <?php foreach($navs as $nav) : ?>
  64.                 <li><a href=""><?=$nav?></a></li>
  65.             <?php endforeach ?>
  66.             </ul>
  67.         <?php endif ?>
  68.         </header>
  1. footer.php 页脚文件
  1. <?php require __DIR__ .'/config.php'; ?>
  2. <footer><?=$copyr?></footer>
  3.     </div>
  4. </body>
  5. </html>
  • 上一级目录创建示例文件 0121.php
  1. <?php require __DIR__ .'/inc/header.php' ?>
  2. <main>
  3. <?php if ($navs) : ?>
  4.     <ol>
  5.     <?php foreach($navs as $nav) : ?>
  6.         <li><a href=""><?=$nav?></a></li>
  7.     <?php endforeach ?>
  8.     </ol>
  9. <?php endif ?>
  10. </main>
  11. <?php require __DIR__ .'/inc/footer.php' ?>
  • 打开 php.io/0121.php 测试图

页面模写

Correcting teacher：天蓬老师天蓬老师

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