html + cssで枠線を作る方法はありますか？

Question

これは混乱しやすいと思いますが、ヘッダーがあるはずの太い境界線を作ることが可能かどうか疑問に思っていますか？

私はイメージを与えることによってそれを説明しようとします：

私は別の色を別の色を持っている私のウェブサイトのページの上部をしたい、してから下の部分。

これを実現するためにhtml/cssコードを使用する方法はありますか？

Answer 1

ヘッダーの要素を使用すると、コンテンツを含めることができます。

HTML5は、あなたがそれのためにタグheaderを使用して、例えばタグmain

内部のあなたがコンテンツを定義することができ、より良く理解するために、複数の新しいタグを追加しました：

body { 
 
    background: #FAFAFA; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
header { 
 
    background: #3F51B5; 
 
    padding: 20px; 
 
    text-align: center; 
 
    color: white; 
 
} 
 

 
main { 
 
    padding: 20px; 
 
}

<header>This is the header</header> 
 

 
<main> 
 
    This is the content 
 
</main>

Answer 2

これはそれを行う方法ですが、このような質問のために少し再読して基礎を学ぶべきです

.header{ 
 
    background-color:yellow; 
 
    width:100%; 
 
    height:150px; 
 
    } 
 
    .rest{ 
 
    background-color:black; 
 
    width:100%; 
 
    height:700px; 
 
    }

<div class="header"> 
 
</div> 
 
<div class="rest"> 
 
</div>

Answer 3

私が正しく理解していれば、あなたはdiv要素を作成し、次のCSSを追加することができます

のborder-top：は50px黄色の固体; 背景色：＃000000;

==============

ヘッダ部分のみ設計になります。このように、あなたは国境の内側の相対コードを置くことはできません。

あなたは次の操作を行うことができ、そのスペースを使用する場合：

<style type="text/css"> 

div.header { 
text-align:center; 
background-color: yellow; 
color: #00000; 
padding: 20px; 
width: 100%; 
} 

div.body { 
width: 100%; 
backgroun-color: #000000; 
color: #ffffff; 
} 
</style> 

<div class="header">Title</div> 
<div class="body">Content</div> 

うまくいけばは 乾杯

Answer 4

、あなたを助ける方法がありますが、あなたはこの ができますを行うためにCSSを使用する必要があります今、あなたはに追加する必要がある唯一の例である

<section>Header</section> 
<article>Body</article> 

あなたは以下のコードHTML5やHTML4を使用している場合は、doesntの問題をhave.It言います、スタイルタグ

<style></style> 

いますが、HTML4を使用している場合、それは今、あなたはそれらのいずれかを選択し、それらに色を与える必要があり

<style type="text/css"></style> 

でなければならない、私の例では、私は彼らの両方の色を与える

<style> 
section{ 
    background-color:#000000; 
} 
article{ 
    background-color:#FFFFFF; 
} 
</style> 

背景色は#FFFFFFのように16進数で表示する必要はありません。これはrgb（0,0,0）またはrgba（0,0,0,0）にすることができます。