文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML响应式网站

问HTML响应式网站
EN

Stack Overflow用户

提问于 2016-04-08 01:23:20

回答 2查看 132关注 0票数 0

所以我正在试着为我们镇上的一支地板球队做网站。我想有一个地板球门的图像和它的链接和东西(我稍后会提供一个图像)。但我在响应式设计上苦苦挣扎。

我希望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>

我希望我说得很清楚，你明白我的意思。对不起，我的英语不好，它不是我的母语。提前谢谢你。

html

css

contain

background-size

responsive

回答 2

Stack Overflow用户

发布于 2016-04-08 01:45:14

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

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>

票数 0

Stack Overflow用户

发布于 2016-04-08 01:49:26

通过添加Position:relative；+ top:；和right:；使其居中。这样，无论何时调整浏览器的大小，您所需要做的就是添加媒体查询，以便在某些断点进行修复。除此之外，这应该可以解决您的问题。(我在#Nadpis中添加了css属性)

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36483175

复制

相似问题

问HTML响应式网站
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML响应式网站EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML响应式网站
EN