欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

PHP初学者实例演示PHP+HTML编写

程序员文章站 2022-04-28 22:33:34
...

1. 进入搭建本地服务器的官网xp.cn下载软件（phpstudy)

PHP初学者实例演示PHP+HTML编写

2. 网站的静态方式增删改查不方便,动态方式就不一样了,他们有以下优点:

1. “交互性”，即网页会根据用户的要求和选择而动态改变和响应，将浏览器作为客户端界面,这将是今后WEB发展的大势所趋.

2. “自动更新”，即无须手动地更新HTML文档,便会自动生成新的页面，可以大大节省工作量.

3. “因时因人而变”，即当不同的时间，不同的人访问同一网址时会产生不同的页面。

PHP和HTML混写演示例子

css代码

    

  1. *{
    2. 

  2.     padding: 0;
    3. 

  3.     margin: 0;
    4. 

  4.     box-sizing: border-box;
    5. 

  5.     list-style: none;
    6. 

  6. }
    7. 

  7. body{max-width: 500px;}
    8. 

  8. a{
    9. 

  9.     color: lightslategrey;
    10. 

  10.     text-decoration:none;
    11. 

  11. }
    12. 

  12. header{
    13. 

    14. 

  14.     height: 60px;
    15. 

  15.     background-color: slategray;
    16. 

  16.     display: grid;
    17. 

  17.     grid-template-columns: repeat(6,80px);
    18. 

  18.     place-items: center;
    19. 

  19. }
    20. 

  20. header li{
    21. 

  21.     padding: 0px 10px;
    22. 

  22.     line-height: 58px;
    23. 

    24. 

  24. }
    25. 

  25. .on{background: yellowgreen;}
    26. 

  26. header li a{color: white;font-size: 20px;}
    27. 

  27. header li:hover{background-color: #666;}
    28. 

  28.  .banner{width: 500px;}
    29. 

  29.  .banner img { width: 100%; }
    30. 

  30. main .hot-view{
    31. 

  31.  margin: 10px 0;
    32. 

  32.     display: grid;
    33. 

  33.     grid-template-columns: repeat(3 ,1fr);
    34. 

  34.     gap: 5px;
    35. 

  35. }
    36. 

  36. main .hot-view li{
    37. 

    38. 

  38.     text-align: center;
    39. 

  39.     color: #888888;
    40. 

    41. 

  41. }
    42. 

  42. main .hot-view img{
    43. 

  43.     width: 100%;
    44. 

  44.     border: 5px solid #c7c7c7;
    45. 

  45. }
    46. 

  46. .hot h2{
    47. 

  47.     font-size: 18px;
    48. 

  48.     background:lightgrey;
    49. 

  49.     line-height: 30px;
    50. 

  50.     padding: 5px;
    51. 

  51.     color:midnightblue;
    52. 

  52. }
    53. 

  53. footer{
    54. 

  54.     height: 60px;
    55. 

  55.     background-color: slategray;
    56. 

  56. }
    57. 

  57. .new-view li {line-height: 35px;color: white;padding: 0 10px;}
    58. 

  58. .new-view li:nth-of-type(Odd ){background: #f2f2f2;}
    59. 

  59. footer p{text-align: center;line-height: 60px;color: oldlace;}
    60.

inc/header.php 头部代码

    

  1. <?php
    2. 

  2. $title ='PHP文学网';
    3. 

  3. $weburl='http://php.com';
    4. 

  4. $navs=['男生','女生','书库','排行','文章'];
    5. 

  5. $hotView=['大佬，你女人*了！','农家娘子美又娇','穿成偏执九爷心尖宠','强娶攻略：老婆,充值送儿子！','无婚不爱：薄少追妻要翻车','穿成霸总的白月光'];
    6. 

  6. $newView=['大佬，你女人*了','农家娘子美又','穿成偏执九爷心尖','强娶攻略：老婆,充值送儿子','无婚不爱：薄少追妻要翻','穿成霸总的白月','大佬，你女人*了','强娶攻略：老婆,充值送儿子','穿成霸总的白月'];
    7. 

  7. $webname='PHP文学网';
    8. 

  8. $keywords='PHP文学网,小说排行榜,小说排行,无弹窗,手机阅读';
    9. 

  9. $description='PHP文学提供恐怖小说、灵异小说、玄幻小说、武侠小说、都市小说等小说在线阅读、手机阅读,无弹窗。';
    10. 

  10. ?>
    11. 

  11. <!DOCTYPE html>
    12. 

  12. <html lang="zh-CN">
    13. 

  13. <head>
    14. 

  14. <meta charset="UTF-8">
    15. 

  15. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    16. 

  16. <meta name="keywords" content="<?= $keywords ?>">
    17. 

  17. <meta name="description" content="<?= $description ?>">
    18. 

  18. <link rel="stylesheet" href="<?= $weburl.'/css/style.css' ?>">
    19. 

  19.     <title><?= $title ?></title>
    20. 

  20. </head>
    21. 

  21. <body>
    22. 

  22. <header>
    23. 

  23.      <li class='on'><a href="" >首页</a></li>
    24. 

  24.     <?php foreach ($navs as $nav) : ?>
    25. 

  25.      <li><a href=""><?=$nav?></a></li>
    26. 

  26.     <?php endforeach ?>
    27. 

  27.     </header>
    28.

inc/footer.php 底部代码

    

  1. <footer>
    2. 

  2.     <p><?= $webname ?>@版权所有</p>
    3. 

  3. </footer>
    4. 

  4. </body>
    5. 

  5. </html>
    6.

index.php 主体代码

    

  1. <?php require __DIR__ . '/inc/header.php' ?>
    2. 

  2.     <main>
    3. 

  3.     <div class="banner"><img src="images/banner.png" ></div>
    4. 

  4.     <div class="hot">
    5. 

  5.     <h2>热门推荐</h2>
    6. 

  6.      <ul class='hot-view'>
    7. 

  7.      <?php for ($i = 0; $i < count($hotView); $i++ ) {
    8. 

  8.       echo '<li><a href=""><img src="images/'.($i+1).'.jpg" ></a><span>'.$hotView[$i].'</span></li>' ;
    9. 

  9.       } ?>
    10. 

  10.      </ul>
    11. 

  11.     </div>
    12. 

  12.     <div class="hot">
    13. 

  13.         <h2>最近更新</h2>
    14. 

  14.      <ul class='new-view'>
    15. 

  15.      <?php foreach ($newView as $nv) : ?>
    16. 

  16.         <li><a href=""><?=$nv?></a></li>
    17. 

  17.         <?php endforeach ?>
    18. 

  18.      </ul>
    19. 

  19.     </div>
    20. 

  20.     </main>
    21. 

  21. <?php require __DIR__ . '/inc/footer.php' ?>
    22.

效果图如下

PHP初学者实例演示PHP+HTML编写

上一篇： 箭头函数，rest，sprend，dom元素， classList，dataset各种应用场景的使用方法

下一篇： Flex弹性盒元素介绍和实例

推荐阅读