九宫格

最新推荐文章于 2025-04-21 09:06:05 发布

原创最新推荐文章于 2025-04-21 09:06:05 发布 · 512 阅读

0 ·

CC 4.0 BY-SA版权

HTML+CSS 专栏收录该内容

4 篇文章

订阅专栏

本文通过两个实例展示了如何使用HTML与CSS进行响应式网页布局，并介绍了一种基于PHP的方法来动态生成这些布局，这种方法可以提高开发效率并增强页面的灵活性。

第一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="/static/materialize/css/materialize.css" rel="stylesheet">
    <title>demo</title>
    <style>
        * {
            font-family: "微软雅黑";
        }

        .box {
            height: 33vw;
            border-right: #eeeeee 1px solid;
            border-bottom: #eeeeee 1px solid;
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        @media only screen and (min-width: 601px) {
            .box {
                height: 25vw;
            }
        }

        @media only screen and (min-width: 993px) {
            .box {
                height: 16.666vw;
            }
        }

        .box div {
            width: 100%;
            display: inline-block;
        }

        .box div .logo {
            width: 55px;
            height: 55px;
            line-height: 55px;
            font-size: 30px;
            font-style: normal;
        }

        .box div p {
            margin-top: 7px;
            margin-bottom: 0;
            color: black;
        }
    </style>
</head>
<body>
<main class="row center">
    <a href="">
        <div class="col s4 m3 l2 box">
            <div>
                <div class="logo circle white-text red">今</div>
                <p>今天</p>
            </div>
        </div>
    </a>

    <a href="">
        <div class="col s4 m3 l2 box">
            <div>
                <div class="logo circle white-text amber">明</div>
                <p>明天</p>
            </div>
        </div>
    </a>

</main>
</body>
</html>

第二种

public function Index()
    {
        $aItem = $this->itemBuilder("地址链接", "今天", "text", "今", "red");
        $bItem = $this->itemBuilder("地址链接", "明天", "logo", "明", "amber");

        $list = [$aItem, $bItem];
        $this->assign("list", $list);
        $this->assign("title", "");
        return view("index");
    }

    private function itemBuilder($url = "#", $text = "测试", $type = "text", $logo = "测", $color = "red", $isBlank = false)
    {
        $item = (object)null;
        $item->href = $url;
        $item->text = $text;
        $item->type = $type;
        $item->logo = $logo;
        $item->color = $color;
        if ($isBlank)
            $item->target = "target='_blank'";
        else
            $item->target = "";
        return $item;
    }

<main class="row center">
    {foreach $list as $item}
    <a href="{$item->href}" {$item->target}>
        <div class="col s4 m3 l2 box">
            <div>
                {switch name="item->type"}
                {case value="logo"} <i class="fa {$item->logo} {$item->color} white-text circle logo"></i>{/case}
                {case value="text"}
                <div class="logo circle white-text {$item->color}">{$item->logo}</div>
                {/case}
                {/switch}
                <p>{$item->text}</p>
            </div>
        </div>
    </a>
    {/foreach}
</main>