CSS背景圖像和頁腳文本

通過教程瞭解CSS，並試圖找出如何創建一些空白。當我檢查頁面時，空格在body標籤內。我認爲body標籤會將所有文字放在背景圖片中。但是，當我重新調整窗口大小時，會創建不同程度的空白（如圖所示）。CSS背景圖像和頁腳文本

我想爲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; 
}

來源

2016-08-12 Jebediah15

與填充？保證金？ –

issus與填充 - 填充：20px 20px 20px 40px;刪除它並嘗試..hope它的工作原理 –

@NagaSaiA仍然有下面的空白時，我刪除填充後重新大小 – Jebediah15

您可以使用媒體查詢定義給定元素的屬性爲更小的屏幕。

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

一個更簡單，更好的解決辦法是使用像引導或粉底第三方框架，具有響應式設計網格系統。

來源

2016-08-12 18:09:19 shawon191

謝謝，我在看這個，但想先從小開始，這似乎比值得更多的麻煩 – Jebediah15

我看着你的CSS上codepen： http://codepen.io/artchibald/pen/KrJdpY

看來你有一個底部0在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; 
    /* 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; 
}

來源

2016-08-12 18:23:54

謝謝@Archie，但空白仍然存在。 – Jebediah15

CSS背景圖像和頁腳文本

回答

相關問題