0

我想要实现的是这样的：http ://www.svkariburnu.com/ ，我不知道我是否应该在我的css中只使用 % 作为我的价值观，或者还有更多的东西，什么我想做的是例如创建一个宽度与窗口相同的菜单，

我已经尝试对元素使用 % 并且它有效，但是我怎么知道确切的百分比来设置我想要的剩余值？

我看了看，发现有人用js来实现这个，有必要吗？

到目前为止，这是我的代码：

HTML：

<div id="wrapper">

<div id="banner"></div>

<div id="menu">

<div id="buttom"></div>
<div id="buttom"></div>
<div id="buttom"></div>
<div id="buttom"></div>
<div id="buttom"></div>


</div>

<div id="iframe"></div>

</div>

CSS 示例：

 body{
        background:#f7f7f7 url(../images/pattern.png) repeat top left;
        color:#000;
        font-family:'Georgia', 'Trebuchet MS', serif;
        font-size:12px;
    }

    #wrapper{
        width:100%;
        height:900px;
        margin:auto;
    }

    #banner{
        width:100%;
        height:200px;
        float:left;
        background-color:#333
    }

    menu{
        width:100%;
        height:50px;
        float:left;
    }

    #buttom{
        width:20%;
        height:50px;
        float:left;
        background-color:#063;
    }

它工作但现在对于 iframe 我不知道如何将它设置在中间我不希望 iframe 是全宽我需要它在 80% 有 10% 在每边自由，等等，怎么能我能做到吗？有这个教程吗？

提前致谢！

4

4 回答 4

0

获得有关宽度的实时视觉体验：

  • Firefox -> 获取 FireBug -> 右键单击​​ -> 使用 FireBug 检查元素
  • Chrome -> 右键单击​​ -> InspectElement

现在您可以选择左侧的 html 元素并获取右侧的 css 部分。此时您可以单击 n%（例如 100%）并使用向上和向下键进行更改。

于 2013-11-04T21:36:06.733 回答
0

只需使用它，无论发生什么，每边总会有间距；

 #wrapper{
        width:100%;
        height:900px;
        margin:auto;
        padding:0 20px 0 20px;
    }
于 2013-11-04T21:29:53.543 回答
0

首先，对于 <div>id 为“bottom”的元素，请class="bottom"改用。

对于<div id="iframe">，您可以尝试使用width:80%; margin:auto;，看看是否能给您带来想要的效果。

于 2013-11-04T21:31:13.920 回答
0

如果您希望您的页面基于视口大小，您可能需要viewport units。但是请小心使用它们，您正在开发的浏览器可能不支持它们。

所以，如果你需要一个元素的大小是视口的 80%，你可以添加width: 80vw到你的 css 中。同样，如果您需要 10% 的视口在每边的空间中，您可以添加margin: 0 10vw;. （实际上，让边距自己处理可能会更好margin: 0 auto;）

于 2013-11-04T21:41:55.163 回答