CSS3多行多栏布局

Code成立2024-08-25 9:29

当前布局由6个等宽行组成，其中第四行有三栏，第五行有四栏。

重点第四行设置：

代码：

html 复制代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img {
            height: 100px;
            ;
        }

        section#feature_area {
            background: #dcd9c0;
        }

        section#feature_area article {
            float: left;
            width: 320px;
            padding: 10px 0;
            background: #fff;
            border-top: 4px solid #f7be84;
        }

        section#feature_area article:nth-child(2) {
            background: gold;
        }

        section#feature_area article .inner {
            margin: 10px 20px;
            padding: 5px;
            background: #fff;
            border: 5px solid;
        }

        section#feature_area article:nth-child(1) .inner {
            border-color: #d7dd6f;
        }

        section#feature_area article:nth-child(2) .inner {
            border: 5px solid #f6dec5;
        }

        section#feature_area article:nth-child(3) .inner {
            border-color: #d1d8e4;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <header>
            <h1>全宽度内容</h1>
        </header>
        <nav>
            <p>导航到菜单</p>
        </nav>
        <section id="branding">
            <img src="./img/charlie.png" alt="查理" />
        </section>
        <section id="feature_area">
            <article>
                <div class="inner">
                    <p>演示文本</p>
                </div>
            </article>
            <article>
                <div class="inner">
                    <p>演示文本</p>
                </div>
            </article>
            <article>
                <div class="inner">
                    <p>演示文本</p>
                </div>
            </article>
        </section>
        <section id="promo_area">
            <article>
                <div class="inner">
                    <p>演示文本</p>
                </div>
            </article>
            <article>
                <div class="inner">
                    <p>演示文本</p>
                </div>
            </article>
            <article>
                <div class="inner">
                    <p>演示文本</p>
                </div>
            </article>
            <article>
                <div class="inner">
                    <p>演示文本</p>
                </div>
            </article>
        </section>
        <footer>
            <p>一个CSS模板，<a href="http://www.stylinwithcss.com">
                    Stylin' with CSS,第三版
                </a>作者Charles Wyke-Smith</p>
        </footer>
    </div>
</body>

</html>

小结：hook,路标，钩子，表示代码中一个唯一的参照点，其他代码通过这个参照点可以与相应的代码交互。