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