CSS3多行多栏布局

当前布局由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,路标,钩子,表示代码中一个唯一的参照点,其他代码通过这个参照点可以与相应的代码交互。

相关推荐
悦涵仙子4 分钟前
vueuse中的useTemplateRefsList
前端·javascript·vue.js
萧萧玉树4 分钟前
分布式在线评测系统
前端·c++·后端·负载均衡
haima9530 分钟前
ubuntu安装chrome无法打开问题
前端·chrome
放逐者-保持本心,方可放逐39 分钟前
XSS 与 CSRF 记录
前端·xss·csrf·浏览器安全
徊忆羽菲39 分钟前
利用HTML5和CSS来实现一个漂亮的表格样式
前端·css·html5
不爱说话郭德纲44 分钟前
Stylus、Less 和 Sass 的使用与区别
前端·css·面试·less·sass·stylus
凄凄迷人1 小时前
如何调试 chrome 崩溃日志(MAC)
前端·chrome·macos·crash
蒙特网站1 小时前
网站布局编辑器前端开发:设计要点与关键考量
前端·javascript·学习·html
理想不理想v1 小时前
前端开发工程师需要学什么?
java·前端·vue.js·webpack·node.js
fhf1 小时前
感觉根本等不到35岁AI就把我裁了
前端·人工智能·程序员