Question

我对CSS的HTML没有经验，并且一直在尝试创建一个博客 - http://ics.restlessrayner.com/。我制作了一个标题图像，但想让所述图像的两个特定区域可点击。为了做到这一点，我想我会制作两个透明盒子，我把它称为盒子链接用于红色盒子，盒子链接用于黄色盒子。在我的浏览器中查看时，它们具有正确的位置，但是在较大的显示器上或者在调整页面大小时，它们无法适当缩放并失去正确的位置。我已尽力找到解决方案或尝试理解相对定位命令，但唉它似乎超出了我目前的能力范围:(如果有人能指出我正确的方向或帮助我会永远感激这是代码：

    <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。该网站上的文档很少会帮助您使用它。

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

1 个答案: