Question

我不确定它叫什么，但有人可以告诉我如何制作一个CSS样式表，使所有页面都适合给定的宽度，然后添加一个投影类型效果，使它看起来像一个页面？

因此，您在侧面有白色（或灰色或任何）边框，内容放在“边框”内。

编辑：我尝试过这种风格，但是它放在左上角的方框中：

style>
    html, body {
        background-color: #F0F0F0;
        width: 100%;
        margin: 0 auto;
        font-family: "Trebuchet MS", Helvetica, sans-serif;
        font-size: small;

    }

    #wrapper {
        background-color: #fff;
        width: 920px;
        padding: 20px;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 8px#888;
        box-shadow: 0 0 8px #888;
    }
</style>

我的用法是：

<div id="wrapper">

    <h1>Location Search</h1>

    <h2>Simple Lookup</h2>

    ....

</div>

Answer 1

它可能是一个图像，但你可以使用box-shadow制作类似的东西。

我认为它只是一个宽度为960px且边距为0的自动包装器;还有一点盒子阴影。所以像这样：

CSS：

html,body{
background-color: #F0F0F0; // a little darker then the wrapper.
width: 100%;
padding: 0;
margin: 0 auto;
}

#wrapper{
background-color: #fff;
width: 920px; // because of padding.
margin: 0 auto;
padding: 20px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

和这样的HTML。

HTML：

<div id="wrapper"> // you just put this div around all of your other divs so it makes it one big div.

...
Some divs for the layout.
...

</div>

希望这会对你有所帮助。

页面大小固定宽度在中间

1 个答案: