博客列表 >PHP初学者实例演示PHP+HTML编写

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

xosing的博客
xosing的博客原创
2021年01月22日 01:34:562009浏览

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

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

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

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

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

PHP和HTML混写演示例子

css代码

  1. *{
  2. padding: 0;
  3. margin: 0;
  4. box-sizing: border-box;
  5. list-style: none;
  6. }
  7. body{max-width: 500px;}
  8. a{
  9. color: lightslategrey;
  10. text-decoration:none;
  11. }
  12. header{
  13. height: 60px;
  14. background-color: slategray;
  15. display: grid;
  16. grid-template-columns: repeat(6,80px);
  17. place-items: center;
  18. }
  19. header li{
  20. padding: 0px 10px;
  21. line-height: 58px;
  22. }
  23. .on{background: yellowgreen;}
  24. header li a{color: white;font-size: 20px;}
  25. header li:hover{background-color: #666;}
  26. .banner{width: 500px;}
  27. .banner img { width: 100%; }
  28. main .hot-view{
  29. margin: 10px 0;
  30. display: grid;
  31. grid-template-columns: repeat(3 ,1fr);
  32. gap: 5px;
  33. }
  34. main .hot-view li{
  35. text-align: center;
  36. color: #888888;
  37. }
  38. main .hot-view img{
  39. width: 100%;
  40. border: 5px solid #c7c7c7;
  41. }
  42. .hot h2{
  43. font-size: 18px;
  44. background:lightgrey;
  45. line-height: 30px;
  46. padding: 5px;
  47. color:midnightblue;
  48. }
  49. footer{
  50. height: 60px;
  51. background-color: slategray;
  52. }
  53. .new-view li {line-height: 35px;color: white;padding: 0 10px;}
  54. .new-view li:nth-of-type(Odd ){background: #f2f2f2;}
  55. footer p{text-align: center;line-height: 60px;color: oldlace;}

inc/header.php 头部代码

  1. <?php
  2. $title ='PHP文学网';
  3. $weburl='http://php.com';
  4. $navs=['男生','女生','书库','排行','文章'];
  5. $hotView=['大佬,你女人翻墙了!','农家娘子美又娇','穿成偏执九爷心尖宠','强娶攻略:老婆,充值送儿子!','无婚不爱:薄少追妻要翻车','穿成霸总的白月光'];
  6. $newView=['大佬,你女人翻墙了','农家娘子美又','穿成偏执九爷心尖','强娶攻略:老婆,充值送儿子','无婚不爱:薄少追妻要翻','穿成霸总的白月','大佬,你女人翻墙了','强娶攻略:老婆,充值送儿子','穿成霸总的白月'];
  7. $webname='PHP文学网';
  8. $keywords='PHP文学网,小说排行榜,小说排行,无弹窗,手机阅读';
  9. $description='PHP文学提供恐怖小说、灵异小说、玄幻小说、武侠小说、都市小说等小说在线阅读、手机阅读,无弹窗。';
  10. ?>
  11. <!DOCTYPE html>
  12. <html lang="zh-CN">
  13. <head>
  14. <meta charset="UTF-8">
  15. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  16. <meta name="keywords" content="<?= $keywords ?>">
  17. <meta name="description" content="<?= $description ?>">
  18. <link rel="stylesheet" href="<?= $weburl.'/css/style.css' ?>">
  19. <title><?= $title ?></title>
  20. </head>
  21. <body>
  22. <header>
  23. <li class='on'><a href="" >首页</a></li>
  24. <?php foreach ($navs as $nav) : ?>
  25. <li><a href=""><?=$nav?></a></li>
  26. <?php endforeach ?>
  27. </header>
  1. <footer>
  2. <p><?= $webname ?>@版权所有</p>
  3. </footer>
  4. </body>
  5. </html>

index.php 主体代码

  1. <?php require __DIR__ . '/inc/header.php' ?>
  2. <main>
  3. <div class="banner"><img src="images/banner.png" ></div>
  4. <div class="hot">
  5. <h2>热门推荐</h2>
  6. <ul class='hot-view'>
  7. <?php for ($i = 0; $i < count($hotView); $i++ ) {
  8. echo '<li><a href=""><img src="images/'.($i+1).'.jpg" ></a><span>'.$hotView[$i].'</span></li>' ;
  9. } ?>
  10. </ul>
  11. </div>
  12. <div class="hot">
  13. <h2>最近更新</h2>
  14. <ul class='new-view'>
  15. <?php foreach ($newView as $nv) : ?>
  16. <li><a href=""><?=$nv?></a></li>
  17. <?php endforeach ?>
  18. </ul>
  19. </div>
  20. </main>
  21. <?php require __DIR__ . '/inc/footer.php' ?>

效果图如下

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议