如何在windows 8 html5 metro应用程序中显示图像及其下的2个按钮

How to display an image and 2 buttons under it in windows 8 html5 metro app?

本文关键字：图像 显示图 按钮 2个 显示 windows html5 应用程序 metro      更新时间：2024-01-15

在我的metro应用程序中，我试图创建一个带有图像（第一行）和图像下的两个按钮（表示下一行）的主页。第一个按钮"更多"应该在屏幕左侧，"播放"应该在第二行屏幕右侧。

我希望屏幕的顶部90%（高度）应该被图像覆盖（宽度应该是从左到右的整个屏幕），其余10%（位于屏幕底部）应该只有这两个按钮。

有人能帮我写HTML代码吗？

我试着使用两个分区，一个用于显示图像，另一个用于按钮。但目前它只显示带有图像的整个页面，并且也只显示了图像的一半。

<div style="height:60%;" >
    <img src="images/games.jpg" style="width:100%;" />
</div> 
<div style="vertical-align:bottom;background-color:orange;grid-cell-stacking:columns;margin:4px;padding-bottom:2px;padding-top:40%;padding-left:60%">
    <input type="button" id="btnMore" name="Mute" value="More"  />
    <input type="button" id="btnPlay" name="Play" value="Play" />
</div>

这听起来像是您需要的新的-ms网格布局类型。

<div class="mainGrid">
  <img class="mainimage" src="yourImage.jpg"/>
  <div class="button1">Your Button 1</div>
  <div class="button2">Your button 2</div>
</div>

和css：

.mainGrid {
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr;
  -ms-grid-rows: 90fr 10fr;
 }
 .mainImage {
   -ms-grid-row: 1;
   -ms-grid-column: 1;
   -ms-grid-column-span: 2;
   width: 100%;
   height: 100%;
 }
 .button1 {
     -ms-grid-row: 2;
     -ms-grid-column: 1;
     -ms-grid-column-align: start;
 }
 .button2 {
     -ms-grid-row: 2;
     -ms-grid-column: 1;
     -ms-grid-column-align: end;
 }

有关CSS网格支持的全部详细信息：http://msdn.microsoft.com/en-us/library/ie/hh673533（v=vs.85）.aspx

这是正在进行的标准（我相信webkit目前正在实施它）

这对你来说怎么样？

http://jsfiddle.net/nT3eB/

我可以想象你会想拉伸图片，或者是这样。

HTML:

<html><head><title>Title</title></head>
<body>
    <div id="container">
        <div id="imageSection"></div>
        <div id="buttonSection">
            <input type="button" id="btnMore" name="Mute" value="More" />
            <input type="button" id="btnPlay" name="Play" value="Play" />    
        </div>
    </div>
</body>
</html>​

和CSS：

html, body, #container {
    width: 100%;
    height: 100%;
}
#imageSection {
    height: 90%;
    background-image: url(../images/games.jpg);
}
#buttonSection {
    height: 10%;
    width: 100%;
    background-color:orange;
}
#btnMore,
#btnPlay {
    height: 100%;
    width: 50%;
    float: left;
}
​
相关文章：