html - jQuery Mobile - 如何在页面周围放置实心边框

Question

我正在使用 jQuery mobile 构建我的第一个应用程序，并且从一开始就已经坚持了下来。下面是我所追求的屏幕截图。我已经把内容涂黑了。

如何在持久的框架周围添加实心边框？

Answer 1

使用以下方法自己解决了：

.ui-mobile [data-role="page"] {
    box-sizing: border-box !important;
    border: 10px solid #e6e6e6 !important;
    height: 100% !important;
}
.ui-mobile [data-role="header"] {
    box-sizing: border-box !important;
    border: 10px solid #e6e6e6 !important;
    border-bottom: none !important;
}
.ui-mobile [data-role="footer"] {
    box-sizing: border-box !important;
    border: 10px solid #e6e6e6 !important;
    border-top: none !important;
}

和

<div data-role="page">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">
        <p>Hello world</p>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <h1>My Title</h1>
    </div><!-- /footer -->
</div><!-- /page -->

到目前为止，没有遇到任何问题，如果以后我遇到此代码的问题，我不会感到惊讶。

Answer 2

您可以覆盖 .ui-page 类

.ui-page {
    border: 0;
}

类似于：

.ui-page { 边框：2px 纯红色；}

Answer 3

简单的：

<div data-role="page" id="some_page">
    <div data-role="content" class="ui-content" id="main_content">
        <div class="ui-corner-all ui-shadow" style="padding: 1em;">
        </div>
    </div>
</div>