我試圖讓我的博客,但我堅持這個問題。我試圖在頂部使用繁星點點的設計,然後在它下面的一個小導航欄中獲得標題,但是無論何時調整頁面大小,標題圖像都會在頁面上出現,並且下面的導航欄會與其斷開連接。如何將導航欄附加到標題,以便在調整大小,連接並且不分開時?這裏是我的代碼Navbar下面的標題響應問題
body {
background-color: #D3D3D3;
margin: 0 0 100px;
font-family: "PT-Sans", sans-serif;
}
.header {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 25%;
background-image: url("./img/header-img.png");
background-repeat: no-repeat;
background-size: 100%;
}
.topnav {
background-color: #333;
overflow: hidden;
position: relative;
top: 0;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.item-right {
}
<html>
<title>Political Blog</title>
<link rel="stylesheet" type="text/css" href="/blog/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/blog/style.css">
<head>
</head>
<body>
<div class="header">
</div>
<div class="topnav">
<a href="/">Home</a>
<a href="./latest">Latest</a>
<a href="./all">All</a>
<a href="./about">About</a>
</div>
</body>
<hr>
任何特別的原因,你叫引導和不使用它?這將是最快捷的方式。 試着把任何東西放在標題中,它應該改變行爲,因爲某些原因空元素表現奇怪。 –
您已將背景圖像的高度設置爲25%。什麼是25%?用你提供的代碼看不到頭。 – Gerard