1

我是Foundation and Interchange的新手。我在http://foundation.zurb.com/docs/components/interchange.html上参考了关于背景图像的非常有限的文档，但找不到任何适合我的东西。我相信我没有做错任何事情，但屏幕上没有出现图像，或者即使它出现在我以“像素”为单位指定高度之后，它也不会调整大小。这太令人沮丧了！

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

此外，酒店网站还有 2 个预订引擎。我希望在您选择酒店 1 后，您应该在单击立即预订后转到 BOOKING ENGINE-1。同样，当单击 BOOK NOW 时，HOTEL-2 应该转到 BOOKING ENGINE-2。同时，它应该将 CHECK-IN & NIGHTS 的数据发送到相应的预订引擎。

非常感谢任何专家的帮助。

我的设计是：我希望背景图像与“中”和“小”屏幕的替代图像选项一起响应。

我的代码是：

<!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>
4

0 回答 0