1

我正在构建一个 jquery 移动网站，我希望我公司的横幅定位为stanford 的移动网站，在移动设备中看起来像这样：

在此处输入图像描述

此图像的大小为 320x280 ，这意味着它非常适合宽度为 320 的手机屏幕（就像我在这种情况下使用的 iphone）。在其他屏幕更大的手机中，它会左右留有空隙，但看起来仍然很棒。

我试图为我的网站复制这种行为。然而结果看起来远非如此。我使用了来自斯坦福网站的完全相同的图片，所以我确信没有尺寸问题。我的网站看起来像这样：

在此处输入图像描述

如您所见，左上角和左上角有一个间隙，我不明白为什么会在那里。

在 stanfords 移动网站上再深入一点，我找到了他们用于横幅的 css：

/* Home page banner */
h2#banner {
    background:transparent url(../img/banner/banner.jpg) no-repeat left 10px;
    width:320px;
    height:284px;
    margin:-10px auto -150px auto;
    text-indent:-9999px;
}
/* Home page banner landscape */
.landscape h2#banner {
    background:transparent url(../img/banner/banner-landscape.jpg) no-repeat left 10px;
    width:480px;
    height:290px;
    margin:-10px auto -175px auto;
    text-indent:-9999px;
}
/* Remove reduntant extra top padding - don't put h2's in front of ul.listview */
h2 {
    margin:0;
    font-size:20px;
}

我使用了完全相同的代码，但我仍然有问题。

有什么想法CSS在这里发生了什么以及我如何准确地将其居中？

----

我还在屏幕更大的手机上尝试了我的网站。横幅居中，左右有一个间隙。尽管如此，应该只有左右而不是向上的间隙。

编辑

结合建议的解决方案后，我得到了类似的结果：

h2#banner {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:transparent url(images/banner.png) no-repeat left 10px;
    width:320px;
    height:284px;
    margin:-10px auto -150px auto;
    text-indent:-9999px;
}

结果是：

在此处输入图像描述

但我不能，将图像向上移动，以便可以看到更多横幅。使用以前的解决方案，我只需要更改高度属性，就可以隐藏/覆盖更多空间。我真的认为解决方案在斯坦福网页内。我找不到它，因为我对此的理解还不成熟。但是 css 真的很小，应该很明显他们在做什么。我喜欢他们用图像覆盖标题的方式，并且图像与其余内容分开工作。

4

2 回答 2

2

工作示例：http: //jsfiddle.net/Gajotres/MgSP7/

HTML：

<div data-role="content">
    <h2 id="banner"></h2>
    <ul data-role="listview" data-theme="b" data-inset="true" id="custom-list">
        <li><a href="item1.html">item1</a></li>
        <li><a href="item1.html">item1</a></li>
        <li><a href="item1.html">item1</a></li>
    </ul>                
</div>

CSS：

#banner {
    position: absolute;
    top:43px;
    bottom: 0;
    left:0;
    right:0;
    padding: 0 !important;
    background:transparent url('http://m.stanford.edu/img/banner/banner.jpg') no-repeat center top !important;
}

#custom-list {
    margin-top: 150px;    
}
于 2013-06-06T08:25:36.203 回答
1

您可以使用任何图像尺寸。

请参阅 DEMO http://jsfiddle.net/yeyene/DHUup/2/，背景图像大小为 1600x1200 像素。

提示：在图像底部覆盖渐变颜色以匹配背景颜色。

HTML

<div id="myBanner" data-role="page">

    <!--<div data-role="header">
        <h1>Stanford</h1>
    </div> /header -->

    <div data-role="content" style="margin-top:200px;">
        <ul data-role="listview" data-inset="true">
            <li><a href="#">Acura</a></li>
            <li><a href="#">Audi</a></li>
            <li><a href="#">BMW</a></li>
            <li><a href="#">Cadillac</a></li>
            <li><a href="#">Ferrari</a></li>
        </ul>
    <div><!-- /content -->

</div><!-- /page -->

这个 CSS 将为你做这一切，包括肖像和风景。

#myBanner{
    float:left;
    width:100%;
    background:url(http://www.hdwallpapers.in/walls/the_glorious_church_at_stanford-normal.jpg);
    background-size:100% auto;
    background-repeat:no-repeat;
}
于 2013-06-06T08:26:57.267 回答