html - jQuery Mobile - ページの周りに実線の境界線を配置する方法

Question

私は jQuery モバイルを使用して最初のアプリを構築していますが、すでに最初から行き詰まっています。以下は、私が求めているもののスクリーンショットです。内容を黒く塗りつぶしました。

永続的なフレームの周りに実線の境界線を追加するにはどうすればよいですか?

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

簡単：

<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>

Answer 3

.ui-page クラスをオーバーライドできます

.ui-page {
    border: 0;
}

次のようなものに：

.ui-page { 境界線: 2px 単色の赤; }