さて、私はウェブサイトで作業しています。私は中央のウェブサイトのメインコンテンツを持ち、メインコンテンツの左側には、ウェブサイト上の異なるリンクを含む垂直ナビゲーションバーが必要です。私は、ナビゲーションバーとスタイル、それを作成する方法を知っているが、私はちょうど私がウェブサイトのコンテンツの残りの部分と干渉するナビゲーションバーなしでこれを行うことが方法がわからない、ここでの例です:垂直ナビゲーションバー
https://gyazo.com/8f8fc2f7e57e9b419671e6fda603546c
あなたがリンクで見ることができるように、ナビゲーションバーのコンテンツはメインコンテンツの残りの部分の上にあるので、私はfloat:leftを追加することにしました。スタイルシートに戻って、私はそれがメインコンテンツとインラインになってしまった。なぜウェブサイトはこれをしますか?ウェブページのさまざまな要素をどのように分離し、他のものに干渉することなく自由に移動できますか?
HTML:
<DOCTYPE html>
<html lang="en">
<head>
<title>CSGOMarble</title>
<link rel="stylesheet" type="text/css" href="homepage.css">
</head>
<body>
<div class="navbar">
<ul>
<li>Coin Flip</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</html>
CSS:
body {
background-color: #999999;
font-family: Arial, Verdana, sans-serif;
margin-top: 50px
}
h1 {
background-color: black;
color:white;
padding-top: 30px;
padding-bottom: 30px;
margin-left: 275px;
margin-right: 275px;
border-radius: 10px;
margin-bottom: 50px;
}
.container{
margin-left: 275px;
margin-right: 275px;
}
li {
list-style-type: none;
float: left;
}
navと他のオブジェクトを分割する必要があります表示。あなたが持っているものは、Webページの始まりに過ぎません。時間がたつにつれて、より多くのスタイリング「クラス」を作成してください。そうすれば、ページにあまり多くのCSSコードは必要ありません。 – Sparky256