css - 不确定如何使 CSS 框定位相对于调整大小/缩放

Question

我对 CSS 的 HTML 经验为零，一直在尝试创建博客 - http://ics.restlessrayner.com/ .我制作了一个标题图像，但想让该图像的两个特定区域可点击。为此，我想我会制作两个透明盒子，我将它们称为红色盒子的 box-link 和黄色盒子的 box-link2 。在我的浏览器中查看时，它们的位置正确，但在较大的显示器上或调整页面大小时，它们无法适当缩放并失去正确的位置。我已尽力找到解决方案或尝试理解相对定位命令，但遗憾的是，这似乎超出了我目前的能力范围。

代码如下:

    <div class='box-wrap'> 
    <div class='box-wrap1'>
            <a href='http://ics.restlessrayner.com/p/other-blogs.html' id='box-link'/>
            <p/>
            </div>
    <div class='box-wrap1'>
            <a href='http://ics.restlessrayner.com/' id='box-link2'/>
            <p/>
            </div>

还有 CSS:

    #box-link {
    position: absolute;
    top: 40px;
    left: 725px;
    width: 210px;
    height: 65px;
    background-color: red;
    border: 3px solid transparent; }

    #box-link2 {
    position: absolute;
    top: 50px;
    left: 40px;
    width: 500px;
    height: 70px;
    background-color: yellow;
    border: 3px solid transparent; }

Answer 1

如果您需要它在以不同分辨率查看时应该能够正常运行，这反过来意味着您需要一个响应式网站。所以你应该选择 twitter bootstrap 之类的框架。它是一个有助于构建响应式网站的网格系统。否则，您必须为整个框架编写媒体查询(如果您是新手，则有点复杂)。因此最好使用 Twitter Bootstrap。该网站上几乎没有文档可以帮助您使用它。