一个简单的页面，设置背景图平铺、table布局居中、响应式布局及响应式布局中em尺寸单位使用

最新推荐文章于 2022-12-12 15:24:42 发布

JackLiu16

最新推荐文章于 2022-12-12 15:24:42 发布

阅读量958

点赞数 1

分类专栏： web前端

web前端专栏收录该内容

140 篇文章 1 订阅

订阅专栏

大家可以通过table来设置居中：

display: table;

width: auto;
margin-left: auto;

margin-right: auto;

1、设置背景图尺寸background-size的方式：

设置背景图片的尺寸：background-size: length|percentage|cover|contain;
length|percentage：两个值，第一个值为宽、第二个值为高，如只设定一个值，第二个值为auto。
cover：拉伸背景图片短边尺寸，实现短边全覆盖，长边尺寸等比例拉伸，可能会超出背景定位区域边界。
contain：拉伸背景图片长边尺寸，实现长边全覆盖，短边等比例拉伸，可能无法完全覆盖背景定位区域边界。

使用场景：如果为了背景图全覆盖，则使用cover；如果为了最大化完整显示背景图，则使用contain。

    /* 
        设置背景图片的尺寸：background-size: length|percentage|cover|contain;
        length|percentage：两个值，第一个值为宽、第二个值为高，如只设定一个值，第二个值为auto。
        cover：拉伸背景图片短边尺寸实现短边全覆盖，长边尺寸等比例拉伸，可能会超出背景定位区域边界。
        contain：拉伸长边尺寸实现长边全覆盖，短边等比例拉伸，可能无法完全覆盖背景定位区域边界
     */
    background-size:cover;


    background-attachment:fixed;/* 当页面的其余部分滚动时，背景图像不会移动。 */

    background-color:#2D3032 ;
    background-image:url(image/background.jpg);
    background-repeat:no-repeat;
    background-position:center center;
/*  background:#2D3032 url(image/background.jpg) no-repeat center center fixed; */

2、如果背景图所在元素未设置宽高尺寸，背景图无法显示，可通过css定位设置偏移量实现

/* 当页面的其余部分滚动时，当前元素不会移动。  */
    position:fixed;
    /* 让这个层充满整个屏幕 */
    left:0;
    right:0;
    top:0;
    bottom:0;

3、通过设置display；table、display；table-cell布局，实现居中效果，辅加vertical-align:middle;text-align:center;属性值设置

/* table布局，实现居中效果 */
.wrap{
    display:table;
    margin:0 auto;
    height:94%;
}

.content{
    text-align:center;
    padding:0 30px;
    /* 设置content里面内容垂直居中 */
    display:table-cell;
    vertical-align:middle;

}

4、响应式布局中，文本尺寸随页面布局变化，使用em尺寸设置行高等，实现行高与文本等比例变化

h1{
    margin:0 0 0.2em 0;/* 使用em作为尺寸单位，实现与文本等比例变化 */
    font-size:60px;
    font-weight:700;
    font-family:'Open Sans',Lato,sans-serif;
    color:#fff;
    line-height:1.1em;/* 使用em作为尺寸单位，实现与文本等比例变化 */
}

5、页面完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body,div,h1,h2{
    margin:0;
    padding:0;
    border:none;
}

/* 背景图平铺 */
.outer{

    /* 
        设置背景图片的尺寸：background-size: length|percentage|cover|contain;
        length|percentage：两个值，第一个值为宽、第二个值为高，如只设定一个值，第二个值为auto。
        cover：拉伸背景图片短边尺寸实现短边全覆盖，长边尺寸等比例拉伸，可能会超出背景定位区域边界。
        contain：拉伸长边尺寸实现长边全覆盖，短边等比例拉伸，可能无法完全覆盖背景定位区域边界
     */
    background-size:cover;
    background-attachment:fixed;/* 当页面的其余部分滚动时，背景图像不会移动。 */
    background-color:#2D3032 ;
    background-image:url(image/background.jpg);
    background-repeat:no-repeat;
    background-position:center center;
/*  background:#2D3032 url(image/background.jpg) no-repeat center center fixed; */


    /* 当页面的其余部分滚动时，当前元素不会移动。  */
    position:fixed;
    /* 让这个层充满整个屏幕 */
    left:0;
    right:0;
    top:0;
    bottom:0;
}

/* table布局，实现居中效果 */
.wrap{
    display:table;
    margin:0 auto;
    height:94%;
}

.content{
    text-align:center;
    padding:0 30px;
    /* 设置content里面内容垂直居中 */
    display:table-cell;
    vertical-align:middle;
}

h1{
    margin:0 0 0.2em 0;/* 使用em作为尺寸单位，实现与文本等比例变化 */
    font-size:60px;
    font-weight:700;
    font-family:'Open Sans',Lato,sans-serif;
    color:#fff;
    line-height:1.1em;
}

h2,a{
    font-family:'Open Sans',Lato,sans-serif;
    font-weight:300;
    font-size:23px;
    color:#fff;
    line-height:2.2em;
}

/* 响应式布局代码 */
/* 设置max-width的值，从上到下的顺序，值从大到小才有效 */
@media screen and (max-width:1100px){
    h2{
        font-size:18px;
    }
    h1{
        font-size:50px;
    }
}

@media screen and (max-width:920px){
    h2{
        font-size:16px;
    }
    h1{
        font-size:40px;
    }
}

@media screen and (max-width:730px){
    .content{
        max-width:400px;
    }
}
</style>
</head>
<body>
    <div class="outer">
        <div class="wrap">
            <div class="content">
                <h1>This Monkey Should Not Be Here</h1>
                <h2>There's a problem with your custom domain - go back to the <a href="#">domain instructions</a> & try again</h2>
            </div>
        </div>
    </div>
</body>
</html>