Question

所以我想为我们镇上的一个地板球队建立网站。我想要一个楼层球目标的图像，并在其上链接和东西（我稍后会提供一个图像）。但是我很反应设计。

我希望ORKA标头的位置如下： The header should be fixed in place even if i resize the browser window.

以下是代码：

/* CSS Document */
body {
  margin: 0px;
  background-color: #D0D5D6;
}

#main {
  margin: 0px;
  background-image: url(http://ploca.9e.cz/branka.png);
  background-repeat: no-repeat;
  background-size: contain;
  height: 100vh;
  display: flex;
  background-position: center;
  min-height: 280px;
  background-position: top;
}

h1 {
  font-family: Montserrat;
  width:100vw;
  height: 100vh;
  margin: 0 auto;
}

#Nadpis {
  margin: 0px;
  height: 100vh;
  display: flex;
  background-position: center;
  min-height: 280px;
  text-align: center;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
 <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="UTF-8">
  <meta name="Orka Cool" content="Orka Cool">
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
  <meta name="author" content="Orka Cool">
  <meta name="description" content="Orka Cool - Florbal Čelákovice">
  <meta name="keywords" content="florbal, orka, cool, čelákovice">
  <title>Orka Cool</title>
</head>
<body>
 <div id="main">
 <div id="Nadpis"><h1>ORKA</h1></div>
 </div>
</body>
</html>

我希望我很清楚，你明白了。抱歉我的英文不好，不是我的母语。提前谢谢。

Answer 1

我认为这是你想要的，如果有其他任何事情可以随意提出

＆＃13;

body {
  margin: 0px;
  background-color: #D0D5D6;
}

#main {
  margin: 0px;
  background-image: url(http://ploca.9e.cz/branka.png);
  background-repeat: no-repeat;
  background-size: contain;
  height: 100vh;
  display: flex;
  background-position: center;
  min-height: 280px;
  background-position: top;
}

h1 {
  font-family: Montserrat;
  width:100vw;
  height: 100vh;
  margin: 0 auto;
}

#Nadpis h1 {
  margin: 0px;
  height: 100vh;
  display: flex;
  background-position: center;
  min-height: 280px;
  text-align: center;
}

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
 <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="UTF-8">
  <meta name="Orka Cool" content="Orka Cool">
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
  <meta name="author" content="Orka Cool">
  <meta name="description" content="Orka Cool - Florbal Čelákovice">
  <meta name="keywords" content="florbal, orka, cool, čelákovice">
  <title>Orka Cool</title>
</head>
<body>
 <div id="main">
 <div id="Nadpis"><h1>ORKA</h1></div>
 </div>
</body>
</html>

＆＃13;

Answer 2

通过添加位置：相对; +顶部：;和右：;使它成为中心。这样，无论何时调整浏览器大小，您只需添加媒体查询即可修复某些断点。除此之外，这应该可以解决您的问题。（我将css属性添加到#Nadpis）

＆＃13;

/* CSS Document */
body {
  margin: 0px;
  background-color: #D0D5D6;
}

#main {
  margin: 0px;
  background-image: url(http://ploca.9e.cz/branka.png);
  background-repeat: no-repeat;
  background-size: contain;
  height: 100vh;
  display: flex;
  background-position: center;
  min-height: 280px;
  background-position: top;
}

h1 {
  font-family: Montserrat;
  width:100vw;
  height: 100vh;
  margin: 0 auto;
}

#Nadpis {
  margin: 0px;
  height: 100vh;
  display: flex;
  background-position: center;
  min-height: 280px;
  text-align: center;
  position:relative;
  top:18px;
right:5px;
}

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
 <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="UTF-8">
  <meta name="Orka Cool" content="Orka Cool">
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
  <meta name="author" content="Orka Cool">
  <meta name="description" content="Orka Cool - Florbal Čelákovice">
  <meta name="keywords" content="florbal, orka, cool, čelákovice">
  <title>Orka Cool</title>
</head>
<body>
 <div id="main">
 <div id="Nadpis"><h1>ORKA</h1></div>
 </div>
</body>
</html>

＆＃13;

HTML响应式网站

2 个答案: