昨日から解決策を探していましたが、解決策が見つからなかったか、検索する適切なキーワードが見つかりませんでした。
だから私は自分のウェブサイトにヘッダーを持っています。これはヘッダーであり、それをうまく中央に配置し、背景色を拡張しました。
今、私は素敵なインタラクティブ/光沢のあるナビゲーションバーをフッターとして作成する方法を見つけましたが、それを上部で使用しています。また、サイズを拡張したいのですが、それ自体を中央に配置するだけで拡張しません。これをスクリーンショットで表示し、コードを投稿します。
また、#main_inner_area という div に含まれるボックスを中央に配置したいと考えています。
注: Navbar は、CSS/HTML コードではまだ #footer と呼ばれています。ヘッダーの背景色が全幅に拡張されるように、navbar の側面を拡張したいと考えています。 私のスクリーンショット: i41 DOT tinypic DOT com SLASH 2qk6mmt.png (申し訳ありませんが、スクリーンショットなしで説明するのは難しいです)
HTML:
<div id="main_area">
<header>
<h1>This is a header</h1>
</header>
<div id="footer">long code for layout navbar</div>
<div id="main_inner_area">
<article>d fsdf sdf sdf dsf dsf dsf</article>
</div>
</div>
CSS:
*{
padding: 0px;
margin: 0px;
}
#main_area{
background:#4863A0;
display: block;
text-align: left;
}
header {
height:100px;
background: #4863A0;
color:white;
border:none;
width:700px;
margin: 0 auto;
}
#footer{
width:700px;
top:100px;
margin:0 auto;
padding:0;
left:0;
right:0;
margin: 0 auto;
height: 40px;
border-radius:7px 7px 7px 7px;
font-family:Arial;
text-shadow: 1px 1px 1px black; /*h,v,blur,color */
/* glass effect */
border-bottom: 1px solid rgba(0,0,0,0.3);
background: rgba(0,0,0,0.5);
/*inset = inner shadow ----------- this just creates multiple shadows*/
/*top border, top white section, overlay top white, bottom*/
box-shadow: inset 0px -2px rgba(255,255,255,0.3),
inset 0px -15px 20px rgba(0,0,0,0.2),
inset 0 -10px 20px rgba(255,255,255,0.25),
inset 0 15px 30px rgba(255,255,255,0.3);
}
#main_inner_area{
float: left;
width:735px;
margin:25px 0px 10px 0px;
}
article{
background: rgba(255,255,255, 0.5);
border: 1px solid #4863A0;
margin:0px;
margin-bottom: 10px;
padding: 15px;
font-family: Tahoma;
font-size: 14px;
text-align:left;
display:block;
width:700px;
height:auto;
border-radius: 7px 7px 7px 7px;
}
PS 本当に感謝しています。私は 18 歳の学生で、書斎の隣で特別なことを学ぼうとしています。