0

我即将编写我的个人“Hello World Firefox OS App”。为了与系统的风格指南保持一致，我想使用Mozilla提供的Building Blocks 。

由于我想有可能设置一些偏好，我决定复制抽屉示例。

虽然示例代码在 buildingfirefoxos.com 上运行良好，但我自己的代码缺少一些带有封闭侧边栏的白色背景。我想，我正在努力正确使用 Building Blocks。

这是我的源代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <title>
            some simple app
        </title>
        <link rel="stylesheet" href="./css/util.css" />
        <link href="./style/headers.css" rel="stylesheet" type="text/css">
        <link href="./style_unstable/progress_activity.css" rel="stylesheet" type="text/css">
        <link href="./style_unstable/drawer.css" rel="stylesheet" type="text/css">

    </head>
    <body  role="application">
        <section data-type="sidebar">
            <header>
                <menu type="toolbar">
                    <a href="#content"><span class="icon icon-add">add</span></a>
                </menu>
                <h1>Title <em>(9)</em></h1>
            </header>
            <nav>
                <ul>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label</a></li>
                </ul>
                <h2>Subtitle</h2>
                <ul>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label larger label than the </a></li>
                    <li><a href="#content">label</a></li>
                </ul>
            </nav>
        </section>
        <section role="region" id="main">
            <header>
                <a href="#content"><span class="icon icon-menu">hide sidebar</span></a>
                <a href="#main"><span class="icon icon-menu">show sidebar</span></a>
                <h1>Title</h1>
            </header>
            <progress value="80" max="100"></progress>
            <header>
                <h2>Subtitle</h2>
            </header>
            <article role="main">
                1234
            </article>
        </section>
    </body>
</html>

在这里您可以看到，主要部分与侧边栏重叠（如预期的那样），但缺少背景或其他东西，即隐藏侧边栏。

带封闭侧栏的抽屉式积木 带开口侧栏的抽屉式积木

我必须更改一些 CSS 吗？我只想使用 Building Blocks，因为当 Building Blocks 适应新的风格指南时，这将帮助我减少花在更新上的时间......

提前谢谢:)

4

1 回答 1

0

我有同样的问题。对我有用的解决方案是确保我包含更多源代码中的标签，以便 CSS 知道它需要采取什么行动。

<section id="drawer" role="region">
  <article class="content scrollable header">
    ...
  </article>
</section>

确保您在正确的位置有上述标签（不要忘记结束标签）。您可以查看 Building Blocks 源代码以了解它们的去向。

于 2014-02-11T21:41:04.350 回答