1
私は最近、フリータイムにいくつかのWebページを作成し始めました。使用しているウィンドウが小さくなり、したがって自動的に次の要素と同じような95ピクセルの距離を持つリストを作成して、一定の最小値まで距離を減少させる。別の解決策は、ウェブページの最小幅を強制することですが、私はそれを行う方法も見つけられませんでした。私の現在の問題は、2つのヘッダーがあり、ページを十分に小さくするたびに、2番目のヘッダーの1ワードで新しい行を作成することです。ウェブページにどのように幅を適用しますか？
HTML
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Nunito|PT+Serif+Caption|Heebo" rel="stylesheet">
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div class='header'>
<h1>This is my homepage welcome!</h1>
<nav id='nav'>
<ul>
<li>
<a href='#'>My Life</a>
</li>
<li>
<a href='#'>My Skills</a>
</li>
<li>
<a href='#'>My Hobbys</a>
</li>
<li>
<a href='#'>My Qualifications</a>
</li>
</ul>
</nav>
</div>
<div class='container'>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
border: 0;
}
.header {
width: 100%;
height: 60px;
line-height: 60px;
background: #222;
color: white;
text-align:center;
}
h1{
font-family: 'Heebo', sans-serif;
text-align: center;
text-transform: uppercase;
}
#nav {
height: 25px;
line-height: 25px;
width: 100%;
background: LightGrey;
position: absolute;
}
#nav ul li {
display: inline-block;
list-style: none;
}
#nav ul li a {
color: grey;
font-family: 'Heebo', sans-serif;
text-decoration:none;
margin: 50 ;
width: 500px;
}
.container{
height: 500px;
width: 100%;
background-image: url("https://wallpaperscraft.com/image/mountain_lake_landscape_reflection_86115_3840x2400.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
あなたのコードのうちのスニペットを作る気にしませんか？これはあなたの事例を試してみるのに役立ちます。 –
あなたが言うことは、レスポンシブデザインと呼ばれ、通常は「CSS Media Queries」が含まれます。ここで説明する項目は多すぎますが、これらの両方の用語をたとえばYouTubeでは、想像以上に多くのチュートリアルを見つけられると確信しています。 –
Responsive Designと同じように、一般的なサイズ変更のWebページで遊んでいました。私は基本的に自分のアイディアをグーグルで見つけ出して遊んでいたということについて、チュートリアルはありませんでした。私は仕事から家に帰るときにあなたが言うものを見上げるので、どうもありがとう。 - 今、私が達成したいのは、 "nav"バーボックス（My life、My Skills ...）もリサイズ可能な一般的なサイズ変更のホームページです。つまり、ウィンドウを大きくするとマージンが大きくなり、小さくなる反対側のBUTはスクロールバーが作成される特定のポイントにのみ適用されます。 –