与えられたCSSコードは、htmlページ内の私のヘッダーの下の境界線を与えます。私は、ヘッダーの境界線からページの下端まで、同様の縦線を追加して、左からサイドバーパネルを取得できるようにしたいと思います。私を助けてください。ヘッダーの境界線からhtmlとcssの下に垂直線を追加
header {
border-bottom: #bfa161 solid 3px;
height: 60px;
background-color: #fff;
position: relative;
z-index: 9999;
}
このような単純な、あなただけのdivに境界線の色を与える必要があります。条件に合うようにdivのサイズを調整できます。
header {
border-bottom: #bfa161 solid 3px;
height: 60px;
background-color: #fff;
position: relative;
z-index: 9999;
}
footer {
border-top: #bfa161 solid 3px;
background-color: #fff;
}
#mainContent {
display: inline-flex;
}
#vertical_line {
border-left: 3px solid #bfa161;
width: 60px;
}<header>
MY HEADER
</header>
<body>
<div id="mainContent">
<div>
<p>THIS IS SIDEBAR</p>
</div>
<div id="vertical_line">
<p>THIS IS MY CONTENT</p>
</div>
</div>
</body>
<footer>
MY FOOTER
</footer>うん、ハッシュが言ったことを行います。サイトを「div」タグを使用してラッパーと「サブ」ラッパーに編成する必要があります。 W3Schoolsには実際によく書かれたドキュメントがあります。私は強くそれを読むことをお勧めします。それほど長くはありません。ちょうどそれをGoogle。
ここでは、わかりにくい場合の基本概念を説明するリンクです。 What is the correct way to do a CSS Wrapper?
bodyタグの中で最初にdivを、終了タグの前で最後にdivを作成する必要があります。そのタグにIDを割り当てます。ほとんどの人がそのラッパーを呼び出します。 HTMLがどのように見えるかは次のとおりです。
<body>
<div id=wrapper>
#content for your page
</div>
</body>
次に、CSSを作成するときに、このようなものを追加します。 注 "最大幅"を定義することをお勧めします。 CSSでもっと複雑な作業をするのが快適になると、さまざまな解像度の範囲で異なる幅を実際にカスタマイズできます。あなたのページの内容のいずれかを妨害しなかった左側のナビゲーションメニューを持っていると思った場合
#wrappper{
max-width: 900px;
max-height: 1750px;
border: #bfa161 solid 3px;
margin: 0 auto; <---"This is so the wrapper centers itself on your screen"
}
さて、あなたはあなたのラッパーdivの内側にさらに2個のdivタグを作ることができます。ある人に、のナビゲーション部のようなIDと、もう1つのコンテンツIDのようなIDを与えます。コンテンツdivを右に浮動させ、ナビゲーションdivを左に浮動させます。明らかに、ナビはのナビゲーション部に、その他はのコンテンツ部に配置してください。両方のdivタグを必ずインラインブロックにしてください。幅を定義することも決して痛いことではありません。
navigationdiv{
display: inline-block;
width: 200px;
border-right: #bfa161 solid 3px; <---"This will make the line you wanted"
float: left;
}
contentdiv{
display: inline-block;
max-width: 700px;
float: right;
}
これは明確で徹底したものでしたか？
スニペット – core114
を使用してコードを入力してください。これはあなたのヘッダーのみを制御しますが、メインコンテンツ所有者の左に置くことができます – Stender
2 divssを作成し、 – Hash