页面大小固定宽度在中间

时间:2013-04-05 07:16:39

标签: html css

我不确定它叫什么,但有人可以告诉我如何制作一个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>

1 个答案:

答案 0 :(得分: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>

希望这会对你有所帮助。