シンプルな小さなウェブサイトを作りたいです。この Web サイトのテンプレートを自分で書きたいのですが、CSS を使用して Web ページ要素をレイアウトする場合、その制御が難しいと感じます。
写真はこのホームページの様子です。
ナビゲーションバーの位置を制御する方法。
。
これは私が作ったものですが、違いは非常に大きいです。
ナビゲーションの幅を親クラスの幅と同じにするにはどうすればよいですか。次に、それぞれの幅を均等に配分する方法です。
これは私のコードです。
communityAdvance main .css" rel="stylesheet" type="text/css">
@charset "utf-8";
body {
}
#wrapper {
background-color: # 20455A;
幅: 100%;
最大幅: 1306px;
左: 5%; }
ヘッダー {
背景色: #6CEBE5;
マージン-左: 自動;
浮動小数点: 左
}
#フッター ul {
背景色: # 6CEBE5 ;
テキスト装飾: なし;
マージン-右: 自動;
パディング-右: 0px; : 0px;
幅: 1306px;
幅: 0px;
マージン-下: 0px;マージン-左: 0px;
パディング-右: 0px;
テキスト整列: 0px; : left;
背景色: #6CEBE5;
#mainnav li {
width: left;
a {
text-decoration: none; }
a:link {
color: #FF6600;
}
#mainnav a:hover、#mainnav a:active、#mainnav a:focus、#mainnav a.thispage {
text-decoration: none; - color: #43A6CB;
A:visited {
color: #FF944C;
a:hover, a:active, a:focus {
背景色: #7F3300;
テキスト装飾: 下線;
}
#mainnav a {
表示: ブロック;
テキスト整列: 中央;
色: #F1EBEB;
テキスト変換: 大文字: 6px ;
margin-right: 自動;
#mainnav ul {
margin-top: 0px; : 0px;
余白: 0px;
余白: 0px;
幅: 1306px;マージン -left: 自動;
背景位置: 左
}
id "main" のコンテンツがここに入ります
;