Question

我正在寻找页面外观;当中心有一个（看起来像什么样的）框架和周围的图像或空白背景时。 http://hopelessrecords.com/about-us/这是一个指向网站的链接，页面和背景构思是我想要实现的目标。

（我不知道如何恰当地说出这个，所以请原谅我，如果我的术语已经关闭，并且我在搜索时遗漏了一些内容。）

Answer 1

只需将以下内容添加到styles.css

即可

body { padding: 5em 15em; /* adds a spacing of 5x the font size to the top and bottom, and 15x of that to the left and right sides of the page. */

阅读 for a complete guide on padding，或查看MDN article on box-model

Answer 2

在css中试用

html {
    height: 100%;
    width: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: url(./yourImage.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.yourPage {
    max-width: 1230px;
    margin: 0 auto;
    background-color: #fff;
}

这是在html中

<div class="yourPage">
    Your content
</div>

＆＃13;

html {
        height: 100%;
        width: 100%;
    }
    body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        background: url(http://lorempixel.com/400/200/);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
    }
    .yourPage {
        max-width: 400px;
        margin: 0 auto;
        background-color: #fff;
    }

＆＃13;

<div class="yourPage">
    Your content
</div>

＆＃13;

在页面中心创建页面

2 个答案: