Question

我有这个页面

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

我读了here我可以通过这样做为整个data-role =“page”容器应用样式

.ui-page {
   background: #eee;
}

但它不起作用。我的页面背景总是白色的。我不想使用JQM样式。如何将我的身体样式应用到jquery移动“页面”？

Answer 1

.ui-content将设置data-role = content区域的样式。因此，例如，如果您想要整个页面区域的样式，您可以这样做：

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

请记住，您必须像其他人已经建议的那样将您的CSS移到JQM样式表下面。

以下是工作http://jsfiddle.net/codaniel/7M4Pg/1/

的示例

Answer 2

您需要在框架css文件下面移动application.css标头，因为框架加载会覆盖您的样式。或者，您可以将!important添加到后台规则，例如background: #eee !important;，以防止被后续样式表覆盖。

将CSS应用于jquerymobile中的data-role =“page”

2 个答案: