PHP 作业2.10 网页布局

最新推荐文章于 2024-07-07 08:02:30 发布

Bealei

最新推荐文章于 2024-07-07 08:02:30 发布

阅读量1.7k

点赞数 2

分类专栏： PHP 文章标签： php

本文链接：https://blog.youkuaiyun.com/bealei/article/details/116209603

版权

PHP 专栏收录该内容

16 篇文章

订阅专栏

这个博客展示了如何使用PHP进行网页布局，包括一个带有header、footer和双栏内容的页面。`index.php`通过`include`语句分别引入`left.php`和`right.php`来展示图片和PHP培训课程信息。`left.php`显示图片列表，而`right.php`则显示多个PHP课程的开班详情。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求

使用include导入php

效果图

在这里插入图片描述

index.php代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8"/>
    <title>网页布局</title>
    <style>
        body {
            margin: 0;
            padding: 10px;
            list-style: none;
        }

        .a1 {
            width: 100%;
            height: 150px;
            line-height: 150px;
            text-align: center;
            background-color: #bbb;
        }

        .main {
            height: 595px;
            width: 100%;
            margin: 10px auto;
        }

        .left {
            background-color: #E1F9FF;
            float: left;
            width: 60%;
            height: 595px;

        }

        ul {
            list-style: none;
            float: left;
            margin-left: 200px;
            margin-top: 10px;
        }

        li {
            margin-top: 50px;
        }

        .right {
            background-color: #E1F9FF;
            float: right;
            width: 39%;
            height: 595px;
            padding: 20px;
            box-sizing: border-box;
        }

        .right p {
            margin-left: 50px;
            font-size: 20px;
        }
    </style>
</head>

<body>


<header class="a1">header</header>

<div class="main">
    <div class="left">
        <?php
        include("./left.php");
        ?>
    </div>
    <div class="right">
        <?php
        include("./right.php");
        ?>
    </div>
</div>

<footer class="a1">footer</footer>
</body>

</html>

left.php代码

<?php

$photos = [
    "1.jpg",
    "2.jpg",
    "3.jpg",
    "4.jpg",
    "5.jpg",
    "6.jpg"
];
$p1 = array_slice($photos, 0, 3);
$p2 = array_slice($photos, 3); ?>
<ul>
    <?php
    foreach ($p1 as $v) :
        ?>
        <li><img src="img/<?php echo $v; ?>"></li>
    <?php endforeach ?>
</ul>

<!--右边-->
<ul>
    <?php
    foreach ($p2 as $v) :
        ?>
        <li><img src="img/<?php echo $v; ?>"></li>
    <?php endforeach ?>

right.php代码

<?php
$xinxi = array(
    0 => array("PHP基础班",
        " 北京--第35期（2015年03月06号）",
        " 北京--第36期（2015年04月06号）",
        " 广州--第10期（2015年04月22号）"
    ),
    1 => array(" PHP就业班",
        "北京--第36期（2015年03月06号）",
        "广州--第09期（2015年04月06号）"),
    2 => array(" PHP远程班",
        "基础班--第35期（2015年03月06号）",
        "就业班--第36期（2015年04月07号）")
)
?>

<h2>PHP培训开班信息</h2>



<?php
foreach ($xinxi as $a => $b):?>
    <p style="font-weight: bold">  <?php
        echo $xinxi[$a][0]; ?>  </p>
    <p>  <?php
        echo $xinxi[$a][1]; ?>  </p>
    <p>  <?php
        echo $xinxi[$a][2]; ?>  </p>
    <p>  <?php
        echo $xinxi[$a][3]; ?>  </p>
<?php
endforeach;
?>