关于 css:Jquery Mobile: Custom Header with/ background image navbar

Jquery Mobile: Custom Header w/ background image + navbar

一整天都在苦苦挣扎,我觉得如果有人对这个问题有更多的了解,可以为我省去很多悲伤……

我使用 Jquery Mobile 创建了一个网站,我想在我的所有页面上使用自定义图像/徽标而不是标准标题。让它稍微复杂一点的是,我还在自定义标题/图像下方使用导航栏进行导航。请参阅下图了解我在说什么:

http://postimage.org/image/ywh1wajjr/

所以这是我遇到问题的地方……自定义图像/标题的缩放让我做噩梦。在某个分辨率下(例如 Dreamweaver 中的 480×800 预设),一切看起来都很好。但是,当分辨率增加时,我开始遇到问题:

首先,图像高度不断变大,使得整体标题(图像和导航栏)比我想要的大很多。其次,如果您使用的分辨率非常高,超过了图像的总宽度,则图像会停在其最大宽度处,而导航栏(和页面的其余部分)会继续扩展至 100% 的宽度页面 – 这显然看起来很奇怪。

我正在使用以下文件/设置:

jquery-1.8.2.min.js、jquery.mobile.structure-1.2.0.css、jquery.mobile.theme-1.2.0.css、jquery-1.8.2.min.js、jquery.mobile -1.2.0.js 和 Dreamweaver cs6.

我已经尝试了对上述文件中的 CSS 以及页面中的 html 的一百万种不同的变体,但没有成功。我感觉它会涉及媒体查询,有 3 或 4 个不同版本的图像,但尽管我尽了最大努力,但我还没有找到最好的方法。

我的理想方案 – 链接的背景图像导航栏组合(或类似的东西)在所有流行的移动设备上都可以在纵向和横向模式下运行良好。

任何建议将不胜感激…


这不是 100%,但希望它能让您了解 CSS 可以做什么,只使用徽标图像而不是背景:

enter image description here

然后用CSS制作顶层和底层

示例:

  • http://jsfiddle.net/PMhXe/

CSS:

1
2
3
4
5
6
7
8
9
10
.bgimg {
    background-image: url(http://dummyimage.com/5×5/a80c10/ffffff.png), url(http://dummyimage.com/5×5/a80c10/ffffff.png);
    background-repeat:repeat-x;
    background-position:100% 120px, 100% -120px;
    background-size:100% 180px;
}
.logo-font {
    font-size:x-large;
    font-weight:bold;
}

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
        <img src="http://www.albionroad.com/images/stories/logos/manchester-united-logo-1.png" alt="logo" /><br />MANCHESTER UNITED<br /><>
       
           
<ul>

               
<li>
One
</li>

               
<li>
Two
</li>

               
<li>
Three
</li>

               
<li>
Four
</li>

               
<li>
Five
</li>

           
</ul>

        <! /navbar >
    <! /header >
?


您的 jquery 移动应用程序标题有这样的内容,您的徽标图像将显示在哪里:

1
2
3
  <h1 class="manU-logo ui-title" role="heading" aria-level="1">
   
      <img src="css/themes/default/images/logo_header.png">

只需应用这个 css:

1
2
3
.ui-mobile .header-manU a img {
  width: 100%;
 }

希望对你有帮助


原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/268821.html

(0)
上一篇 2022年6月20日
下一篇 2022年6月20日

相关推荐

发表回复

登录后才能评论