编写响应式页面

Question

我对编码很陌生。我可以用html和css编码，目前正在学习javascript。我正在建立一个网站，到目前为止我对结果非常满意，但我不知道如何让我的网站响应。我正在谈论的页面是....我想制作这个页面，所以如果单击其中一个按钮，一个新页面将出现有关单击主题的信息和有关该主题的视频。

我的问题是：制作这样的东西最好的方法是什么？

我想过让每个页面都成为单独的.html文件，但发现这样我会有数百个.html文件，并且应该有一种更有效的方法。

对不起，我的语法不好，我的英语不是那么好。

*编辑

只是我想做的一个例子：

http://i61.tinypic.com/j67i2v.jpg

这将是我的主页，如果（在这种情况下）点击de cecco，我希望显示此页面：

http://i60.tinypic.com/2lo0r50.jpg

Answer 1

仅出于您自己的启发，术语"响应式"通常是指响应屏幕大小变化的网站（例如，使用 CSS 媒体查询根据用户是在移动设备上还是在桌面上浏览来更改网站的外观。

继续，您的问题有很多解决方案。 一种简单的方法（同时避免向服务器发出任何其他请求）是创建隐藏元素，当单击链接时，将显示该元素。

请参阅此 jsbin 示例。

.HTML

<button value="#box" id="box-button">Show info</button>
<div id="box">Some info is in this box<button class="x">x</button></div>

.CSS

button {
    cursor: pointer;
}
#box {
    display: none;
    position: absolute;
    margin: auto;
    left: 0; right: 0; top: 0; bottom: 0;
    width: 50%; height: 50%;
    padding: 1em;
    box-shadow: 0 0 20px 0 #555;
    border-radius: 10px;
    background: #fff;
}
.x {
    color: red;
    position: absolute;
    top: 0; right: 0;
    padding: 10px;
    border: none;
    background: #fff;
}

jQuery

$('#box-button').on('click',function() {
   $($(this).attr('value')).css('display','block');
});
$('.x').on('click', function() {
  $(this).parent().css('display','none');
});

这样做的缺点是，根据您有多少弹出框，浏览器将不得不加载更多的 DOM 元素，而可能所有这些元素都不会被使用。

另一种方法是使用 AJAX 调用，有点像您在原始问题中引用的（但是，是的，就像您所说的那样，可能有一百个.html文件）。

这样做的好处是 DOM 只包含它在任何给定时间需要的内容。缺点是您必须向服务器发送请求。

我很难为此制作一个 jsbin 示例，所以我将为您提供一些代码来显示一个示例：

.HTML

<button id="someButton" value="http://www.yourwebsite/someresource.html">show info</button>
<div id="popup"></div>

.CSS

#popup {
    display: none;
    position: absolute; /* etc. */
}

jQuery

$('#someButton').on('click',function() {
    $('#popup').load($(this).attr('value'));
});