Question

我是Foundation and Interchange的新手。我在http://foundation.zurb.com/docs/components/interchange.html提到了关于背景图像的非常有限的文档，但找不到任何可以让它对我有用的文档。我相信我没有做错任何事情，但屏幕上没有图像，或者即使在我指定像素中的高度后出现图像，＆＃39;它只是没有调整大小。这太令人沮丧了！

我希望网站设计中的背景图像能够与“媒体”中的图像选项一起响应。和＆＃39;小＆＃39;屏幕。并且可能有一个自动更改图像的旋转木马，但具有响应背景是目前最大的挑战所以我不知道我将如何到达那里。

此外，酒店还有2个预订引擎。我想要在你选择让我们说HOTEL-1后，你应该在点击现在预订后去BOOKING ENGINE-1。同样，当点击BOOK NOW时，HOTEL-2应该转到BOOKING ENGINE-2。同时它应该发送CHECK-IN＆amp;的数据。相应预订引擎的夜晚。

非常感谢任何专家帮助。

我的设计是：

我的代码是：

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/octave-home.css" />
<script src="js/vendor/modernizr.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
<div class="row">
<div class="large-12 columns">
<div data-interchange="[images/img-1.jpg, (default)], [images/img-1.jpg, (large)], [images/img-1.jpg, (small)]" style="height:596px; width:100%"></div>
  <div class="large-9 large-centered columns">
    <div id="headerTop">
      <div id="date"> 
        <script type="text/javascript">
var d=new Date();
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthname=new Array("January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December");
document.write(monthname[d.getMonth()] + " ");
document.write(d.getDate() + ", ");
document.write(d.getFullYear() + " – ");
document.write(weekday[d.getDay()]);
</script> 
      </div>
      <div id="number"><img src="images/phoneIcon.jpg" alt="Phone" width="13" height="17" align="left">+91 7676 555 222</div>
      <div id="smiWrapper"><a href="http://www.facebook.com/OctaveHotels" target="_blank" onMouseOver="MM_swapImage('facebook','','images/f_o.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/f.jpg" alt="facebook" name="facebook" width="22" height="22" border="0"></a><a href="https://plus.google.com/117243465718548987723/about" target="_new" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('google+','','images/g+_o.jpg',1)"><img src="images/g+.jpg" alt="twitter" name="google+" width="24" height="22" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('linkedin','','images/in_o.jpg',1)"><img src="images/in.jpg" alt="linkedin" name="linkedin" width="23" height="22" border="0"></a></div>
      </div>
    </div>
  </div>
</div>

<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.min.js"></script>
<script>
      $(document).foundation();
    </script>


    <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.interchange.js"></script>
  <!-- Other JS plugins can be included here -->

</body>
</html>

基金会的交汇处不适用于背景图片

0 个答案: