-3

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

像这样的东西：http: //www.news.com.au/

因此，您的两侧有白色（或灰色，或其他）边框，内容放置在“边框”内。

编辑：我试过这种风格，但它把盒子放在左上角：

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>
4

1 回答 1

1

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

我认为它只是一个宽度为 960px 和 margin: 0 auto; 的包装器。和一点盒子阴影。所以是这样的：

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>

希望这对您有所帮助。

于 2013-04-05T07:22:38.577 回答