0

所以我正在尝试为我们镇上的一个地板球队制作网站。我想有一个地板球目标的图像，上面有链接和东西（我稍后会提供一个图像）。但我与响应式设计作斗争。

我希望 ORKA 标题的位置如下： 即使我调整浏览器窗口的大小，标题也应该固定到位。

这是代码：

/* 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>

我希望我很清楚，你明白这一点。对不起我的英语不好，它不是我的母语。先感谢您。

4

2 回答 2

0

通过添加位置：相对；+顶部：；和权利：; 使其居中。这样，每当您调整浏览器大小时，您所需要做的就是添加媒体查询以修复某些断点。除此之外，这应该可以解决您的问题。（我将 css 属性添加到#Nadpis）

/* 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;
}
<!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>

于 2016-04-07T17:49:25.920 回答
0

我想这就是你想要的，如果还有什么可以问的

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;
}
<!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>

于 2016-04-07T17:45:14.157 回答