HTML响应网站

所以我想在我们的城镇为一个floorball团队做网站。我想要有一个floorball目标的形象，并在其上的链接和内容（我将在稍后提供一个图像）。但我与响应设计斗争。HTML响应网站

我想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>

我希望我是明确的，你得到的点。对不起，我的英语不好，它不是我的母语。预先感谢您。

来源

2016-04-07 Vojta Plocica

我强烈建议检查引导，很容易上手，它会为你节省很多头痛 –

的，所以你希望你的'orka'在左上角 –

@Marwan Alani这是一个微小的切线，但Bootstrap是否会自动处理移动设备上的网页设计，还是有什么额外的你必须做的？我在网站上使用过bootstrap，但从未在移动设备上进行过测试。 –

我想这是你想要什么，如果什么都随便问

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-07 17:45:14

通过添加位置：相对; + top :;和右：;使其成为中心。通过这种方式，无论您何时调整浏览器大小，您只需添加媒体查询以修复某些中断点。除此之外，这应该可以解决你的问题。（我加的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-07 17:49:25 Gianni

回答

相关问题