Question

通过一个教程来学习CSS，我试图弄清楚如何创建一些空白。当我检查页面时，空格位于body标记内。我认为body标记会将所有文本放在背景图像中。但是当我重新调整窗口大小时，会产生不同程度的空白区域（如图所示）。

我想为More Text创建一个新行，这样当屏幕重新调整大小时，行仍然在图像下方 - 而不是在它们之间创建空格。谢谢你的帮助。

HTML

{% load staticfiles %}
<html>

<head>

    <title>Title</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="{% static 'css/blog.css' %}">
    <link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">

</head>

<body>

    <div class="page-header">
        <h1><a href="/">Title</a></h1>
    </div>

    <div class="page-footer">
        <h1>More text</a></h1>
    </div>

</body>

</html>

CSS

h1 a {
    color: #666699;
    font-family: 'Lobster';
}

body {
    background-image: url('../images/Death_to_stock_photography_wild_6.jpg');
    background-repeat: no-repeat;
    background-size: 100%; 
}

.page-header {
    background-color: transparent;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}

.page-footer {
    background-color: transparent;
    position:absolute;
    padding: 20px 20px 20px 40px;
    bottom:0;
}

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
    color: gray;
    font-size: 26pt;
    text-decoration: none;
    position: relative;
    bottom: 10px;
    height: 5px;
}

.content {
    margin-left: 40px;
}

h1, h2, h3, h4 {
    font-family: 'Lobster', cursive;
    color: #666699;
}

Answer 1

您可以使用媒体查询为较小屏幕定义给定元素的属性。

@media screen and (max-width: 800px){
    .myclass{
        myattribute:myvalue; 
    }
}

更简单，更好的解决方案是使用第三方框架，如bootstrap或foundation，它具有用于响应式设计的网格系统。

Answer 2

我在codepen上看了你的css： http://codepen.io/artchibald/pen/KrJdpY

看来你在css中声明了一个底部0，下面是更正后的版本：

h1 a {
    color: #666699;
    font-family: 'Lobster';
}

body {
    background-image: url('../images/Death_to_stock_photography_wild_6.jpg');
    background-repeat: no-repeat;
    background-size: 100%; 
}

.page-header {
    background-color: transparent;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}

.page-footer {
    background-color: transparent;
    position:absolute;
    padding: 20px 20px 20px 40px;
    /* REMOVE THIS--------bottom:0; */
}

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
    color: gray;
    font-size: 26pt;
    text-decoration: none;
    position: relative;
    bottom: 10px;
    height: 5px;
}

.content {
    margin-left: 40px;
}

h1, h2, h3, h4 {
    font-family: 'Lobster', cursive;
    color: #666699;
}

CSS背景图片和页脚文本

2 个答案: