2011-09-30 124 views
0

基本上我试图设置背景颜色(或图像)。我正在写HTML CSS和JQuery Mobile。AppMobi背景问题

我试图创建一个基本AppMobi应用程序,但我似乎并没有能够改变我在下面的例子中背景:

<div data-role="page" id="page"> 
    <div data-role="header" data-theme="c"> 
     <h1>Page One</h1> 
    </div> 
    <div data-role="content" data-theme="c">  
     <ul data-role="listview" data-theme="b"> 
      <li><a href="#page2">Page Two</a></li> 
      <li><a href="#page3">Page Three</a></li> 
      <li><a href="#page4">Page Four</a></li> 
      <li><a href="#page3" data-role="button" data-icon="delete">Delete</a></li> 
     </ul>  
    </div> 
    <div data-role="footer" style="position:fixed; bottom:0;" data-theme="c"> 
     <h4>Page Footer</h4> 
    </div> 
</div> 

我试图既改变背景HTML和CSS,但我似乎无法更改背景颜色页面1(示例)。第1页包括4个按钮和一个“粘性页脚”。屏幕顶部显示的按钮,但按钮或列表与页脚之间的内容不会改变颜色。我试图在头文件中编写HTML或CSS,并且也是内联的。

我该如何改变这个'div'块的背景颜色?

Thanx提前

回答

0

在标准的示例应用程序,这里是index.html中的代码,设置你的背景块。

/* Set up the page with a default background image */ 
    body { 
     background-color:#fff; 
     color:#000; 
     font-family:Arial; 
     font-size:48pt; 
     margin:0px;padding:0px; 
     background-image:url('images/background.jpg'); 
    } 

你可以看到的只是设置了标题为background.jpg的图像,位于images目录中。您可以编辑的背景图像,得到一个新的,并指向,或放一些漂亮的webkit代码或东西:(index.html的头标记)

<style type="text/css"> 
     * { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 8); } 
     input, textarea { -webkit-user-select:text; } 
     body 
     { 
      font-family:Arial;font-size:24pt;font-weight:bold; 
      background: 
      -webkit-gradient(radial, 50% 60%, 0, 53% 50%, 50, from(rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,.15)), to(rgba(255,255,255,0))), 
      -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,.1)), to(rgba(255,255,255,0))), 
      -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 200, from(rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,.1)), to(rgba(255,255,255,0))), 
      -webkit-gradient(radial, 40% 50%, 0, 40% 55%, 25, from(rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,.1)), to(rgba(255,255,255,0))), 
      -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8D4212), to(#28580C), color-stop(.5,#DA881B)); 
      background-size: 400px 400px, 470px 470px, 600px 600px, 300px 300px, 100% 100%; 
      background-color: #28580C; 
     } 
    </style> 

所以,你应该能够给你第1页div一个id,只是应用图像或任何你想要的div ID。

+0

Thanx,实际上尝试了不同的方式,既设置ID和类。此外,我试图设置与标签内联的背景(应该有最高优先级)。它仍然不起作用,但我发现可能包含jquery相关的css文件压倒了设置,我试图将它评论出来。我一解决,就会回到这个问题。 – Chizpa

1

您的问题与AppMobi无关,但与一般的JQuery Mobile无关。

JQuery Mobile的工作方式是加载内容,然后“处理”它并应用样式。发生什么事是JQuery Mobile覆盖了默认的CSS样式。打开JQuery Mobile CSS文件并在那里修改它。