ホームページ > 記事 > ウェブフロントエンド > Web ページのレイアウトを手伝ってください_html/css_WEB-ITnose
Web ページのレイアウトを手伝ってください_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:05:161167ブラウズ
シンプルな小さなウェブサイトを作りたいです。この Web サイトのテンプレートを自分で書きたいのですが、CSS を使用して Web ページ要素をレイアウトする場合、その制御が難しいと感じます。
写真はこのホームページの様子です。
ナビゲーションバーの位置を制御する方法。
。
これは私が作ったものですが、違いは非常に大きいです。
ナビゲーションの幅を親クラスの幅と同じにするにはどうすればよいですか。次に、それぞれの幅を均等に配分する方法です。
これは私のコードです。
aba7b36f87decd50b18c7e3e3c150106
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7communityAdvance6e916e0f7d1e588d4f442bf645aedb2f main .css" rel="stylesheet" type="text/css">
9c3bca370b5104690d9ef395f2c5f8d1
@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: 自動;
背景位置: 左
}
f005529f17a8328d00deaded84cdd461 ;
3a36840922094795ad69a5c2b25f2b12 939bd2272ea576d5b88c3ce2e99c92cc ;
;私たちについて5db79b134e9f6b82c0b36e0489ee08ed61e28a4af713c34167ffafb47502bcd1ee7959cc8dd4be16ef633321c03dac32ボランティア/仕事5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32特別なイベント5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32寄付/寄付5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
44f9630a3d507ae7532760da37622b0f
ab946e7546ab66a280dd9c9f9310ecd5
16b28748ea4df4d9c2150843fecfba68
243a8f3f087936dc3f96e2f0cf018c22id "main" のコンテンツがここに入ります16b28748ea4df4d9c2150843fecfba68
774c916c2fdb9fccdaa16933d065e968
25edfb22a4f469ecb59f1190150159c68c915055671d1c508986bee7de493e09オフィスアワー5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c68c915055671d1c508986bee7de493e09場所5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c68c915055671d1c508986bee7de493e09お問い合わせ5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
回复讨论(解决方案)
导航用table不就行了
table宽度设100%自動就平分了
具体点！新しい手
<!doctype html> <html> <head> <meta charset="utf-8"> <title>communityAdvance</title> <link href="styles/main.css" rel="stylesheet" type="text/css"> <style type="text/css"> body {}#wrapper {background-color: #20455A;width: 100%;min-width: 740px;max-width: 1306px;margin-left: auto;margin-right: auto;left: 5%;right: 5%;}header {background-color: #6CEBE5;margin-right: auto;margin-left: auto;width: 100%;float: left;}#footer ul {background-color: #6CEBE5;text-decoration: none;list-style-type: none;margin-right: auto;margin-left: auto;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;width: 1306px;}#footer li {width: 33%;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;text-align: center;text-decoration: none;float: left;background-color: #6CEBE5;}#mainnav li {width: 20%;float: left;}a {font-weight: bold;text-decoration: none;}a:link {color: #FF6600;}#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {text-decoration: none;background-color: #43A6CB;}A:visited {color: #FF944C;}a:hover, a:active, a:focus {background-color: #7F3300;text-decoration: underline;}#mainnav a {display: block;float: left;text-align: center;background-color: #4d4d4d;color: #F1EBEB;text-transform: uppercase;padding-top: 6px;padding-bottom: 6px;margin-right: auto;margin-left: auto;}#mainnav ul {list-style-type: none;margin-top: 0px;margin-bottom: 0px;padding-top: 0px;padding-bottom: 0px;margin-right: auto;margin-left: 0px;}#mainnav {width: 1306px;margin-right: auto;margin-left: auto;float: left;background-position: left 0%;} </style> </head> <body> <div id="wrapper"> <div id ="head"> <header id="top"> <img src="LogoUse.png" width="1306" height="473" alt=""/> <nav id="mainnav"> <!-- <ul> <li><a href="CommunityAdvance.html">home</a></li> <li><a href="Untitled-4.html">about us</a></li> <li><a href="#">programs</a></li> <li><a href="#">volunteer/job</a></li> <li><a href="#">special events</a></li> <li><a href="#">give/donate</a></li> </ul>--> <table style="width:100%;text-align:center;"> <tr> <td style="border-right:1px solid red;">home</td> <!--线出来了 后面效果自己慢慢调吧--> <td>about us</td> <td>>programs</td> <td>volunteer/job</td> <td>special events</td> <td>give/donate</td> </tr> </table> </nav> </header> </div> <div id="main">Content for id "main" Goes Here</div> <div id="footer"> <ul> <li><a href="www.google.com">Office hours</a></li> <li><a href="www.google.com">Location</a></li> <li><a href="www.google.com">Contact us</a></li> </ul> </div> </div> </body> </html> CSS 能制御ネットワーク上の任意の HTML 要素
これは、一般的な表の td 値も使用される人の度合いであるため、一般的な td の増加により 1 が追加されたため、以下に
各位を省略しました。