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-content将为 data-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 回答