ホームページ > 記事 > ウェブフロントエンド > DIV+CSS ナビゲーション バーを作成している初心者が助けを求めています。 _html/css_WEB-ITnose
DIV+CSS ナビゲーション バーを作成している初心者が助けを求めています。 _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:25:361742ブラウズ
みなさん、こんにちは。別のナビゲーション バーを作成しているのですが、次の問題が発生しました
対象の Web サイトの Web ナビゲーションは次のようになります:
DIV+CSS でレイアウトすると、スタイルは次のようになります。下の図のナビゲーションでは、テキストの間隔がターゲット Web サイトの間隔よりも明らかに大きくなっています。
画像のように幅を小さくしても収まらない場合は
以下はHTML部分です
<div class="maindiv"> <div class="head"> <div class="menu"> <ul> <li>home</li> <li>SPECIALS</li> <li>ALL PRODUCTS</li> <li>CONTACT US</li> <li>ABOUT</li> <li>BACK TO TUTORIAL</li> </ul> </div> <div></div> <div></div> </div> </div></body>
以下はCSS部分です
body{ background:url(../images/body-bg.jpg) fixed}.maindiv{ width:1000px; height:1200px; margin:0 auto}.head{ width:1000px; height:210px; margin:25px auto 0px} .menu{ width:1000px; height:30px; background:#060; color:#FFF; text-align:left} .menu ul { width:1000px; height:30px;} .menu ul li{font-size:11px; line-height:35px; text-transform:uppercase; text-align:left; width:100px; font-weight:bolder; float:left; list-style:none;} その方法ターゲット Web サイトのようなナビゲーション バーを実現できますか。専門家の指導をお願いします。ありがとうございました。 ！ ！ ！
ディスカッションへの返信 (解決策)
.maindiv { width: 1000px; height: 1200px; margin: 0 auto } .head { width: 1000px; height: 210px; margin: 25px auto 0px } .menu { width: 1000px; height: 30px; background: #060; color: #FFF; text-align: left } .menu ul { width: 1000px; /*height: 30px;*/ padding-left:0; overflow:hidden; } .menu ul li { font-size: 11px; line-height: 30px; text-transform: uppercase; text-align: left; /*width: 100px;*/ font-weight: bolder; float: left; list-style: none; } .menu ul li a{ text-decoration:none; color:#ffffff; padding: 10px 15px; } .homeSpecail{ padding-left:0; background-color:#333333; } <body> <div class="maindiv"> <div class="head"> <div class="menu"> <ul> <li class="homeSpecail"> <a href="#">home</a> </li> <li> <a href="#">SPECIALS</a> </li> <li> <a href="#">ALL PRODUCTS</a> </li> <li> <a href="#">CONTACT US</a> </li> <li> <a href="#">ABOUT</a> </li> <li> <a href="#">BACK TO TUTORIAL</a> </li> </ul> </div> <div></div> <div></div> </div> </div> </body>
ここでのナビゲーションの「オプション」は通常リンクなので、HTML のタグでナビゲーションの「オプション」をラップすることができます。次に、a タグのパディングを通じて「オプション」間の間隔を制御します。
私も初心者ですが、一緒に話し合って学びましょう（笑）。
ターゲット画像から、
メニューの幅が異なることがわかります
メニューの間隔は同じです
それで、幅が自動であることを証明し、コンテンツが
間隔をサポートできるようにしますか?パディングとマージンの両方を設定できますが、パディングは重ならずマージンが重なります
上の図から、左側のスペースが内側のスペースより小さいため、パディングを使用する必要があることがわかります。ここのナビゲーションの「オプション」は通常リンクなので、HTML のタグでナビゲーションの「オプション」を囲み、「オプション」間の間隔を制御できます。 " a タグのパディングを介して。
私も初心者ですが、一緒に話し合って学びましょう（笑）。
上の階の人、ありがとうございます。問題は解決しました、ありがとうございます
えー、どういたしまして...
文字間隔
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。