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

博主信息

博文 20

粉丝 1

访问量 22615

专题推荐

更多>

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

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

1. “交互性”，即网页会根据用户的要求和选择而动态改变和响应，将浏览器作为客户端界面,这将是今后WEB发展的大势所趋.
2. “自动更新”，即无须手动地更新HTML文档,便会自动生成新的页面，可以大大节省工作量.
3. “因时因人而变”，即当不同的时间，不同的人访问同一网址时会产生不同的页面。

PHP和HTML混写演示例子

css代码

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
}
body{max-width: 500px;}
a{
    color: lightslategrey;
    text-decoration:none;
}
header{
    height: 60px;
    background-color: slategray;
    display: grid;
    grid-template-columns: repeat(6,80px);
    place-items: center;
}
header li{
    padding: 0px 10px;
    line-height: 58px;
}
.on{background: yellowgreen;}
header li a{color: white;font-size: 20px;}
header li:hover{background-color: #666;}
 .banner{width: 500px;}
 .banner img { width: 100%; }
main .hot-view{
 margin: 10px 0;
    display: grid;
    grid-template-columns: repeat(3 ,1fr);
    gap: 5px;
}
main .hot-view li{
    text-align: center;
    color: #888888;
}
main .hot-view img{
    width: 100%;
    border: 5px solid #c7c7c7;
}
.hot h2{
    font-size: 18px;
    background:lightgrey;
    line-height: 30px;
    padding: 5px;
    color:midnightblue;
}
footer{
    height: 60px;
    background-color: slategray;
}
.new-view li {line-height: 35px;color: white;padding: 0 10px;}
.new-view li:nth-of-type(Odd ){background: #f2f2f2;}
footer p{text-align: center;line-height: 60px;color: oldlace;}

inc/header.php 头部代码

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

inc/footer.php 底部代码

<footer>
    <p><?= $webname ?>@版权所有</p>
</footer>
</body>
</html>

index.php 主体代码

<?php require __DIR__ . '/inc/header.php' ?>
    <main>
    <div class="banner"><img src="images/banner.png" ></div>
    <div class="hot">
    <h2>热门推荐</h2>
     <ul class='hot-view'>
     <?php for ($i = 0; $i < count($hotView); $i++ ) {
      echo '<li><a href=""><img src="images/'.($i+1).'.jpg" ></a><span>'.$hotView[$i].'</span></li>' ;
      } ?>
     </ul>
    </div>
    <div class="hot">
        <h2>最近更新</h2>
     <ul class='new-view'>
     <?php foreach ($newView as $nv) : ?>
        <li><a href=""><?=$nv?></a></li>
        <?php endforeach ?>
     </ul>
    </div>
    </main>
<?php require __DIR__ . '/inc/footer.php' ?>

效果图如下

批改老师：

天蓬老师

批改状态：合格

老师批语：用心了

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

JS里 in_array() 的封装.

2022-01-21 09:15:57