1

我在 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; }
4

1 回答 1

1

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

于 2014-07-21T17:39:47.210 回答