0

私はこのページを持っています

<head>
<title>Real Life Achievements</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width">

<link rel="stylesheet" type="text/css" href="frameworks/jquerymobile.css"/> 
    <link rel="stylesheet" type="text/css" href="application.css"/>

<script type="text/javascript" charset="utf-8" src="frameworks/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="frameworks/jquerymobile.js"></script>

<script type="text/javascript" charset="utf-8">

    document.addEventListener("deviceready", initApp, false);

</script>
</head>
<body>
<div data-role="page" id="start"> 

    ...

</div>
</body>

これを行うことで data-role="page" コンテナ全体にスタイルを適用できることをここで読みました

.ui-page {
   background: #eee;
}

しかし、うまくいきません。ページの背景は常に白です。JQM スタイルを使用したくありません。ボディスタイルをjqueryモバイルの「ページ」に適用するにはどうすればよいですか?

4

2 に答える 2

2

.ui-contentdata-role=content 領域をスタイルします。たとえば、ページ領域全体をスタイルしたい場合は、次のようにします。

.ui-content, .ui-page{background: #eee;}

他の誰かがすでに提案したように、css を JQM スタイル シートの下に移動する必要があることに注意してください。

これが動作する例ですhttp://jsfiddle.net/codaniel/7M4Pg/1/

于 2012-04-30T19:38:12.207 に答える
1

application.cssフレームワークの読み込みによってスタイルが上書きされるため、ヘッダーをフレームワーク css ファイルの下に移動する必要があります。!importantまたは、のようなバックグラウンド ルールに追加して、background: #eee !important;後のスタイルシートによって上書きされないようにすることもできます。

于 2012-04-30T19:36:19.393 に答える