ホームページ > 記事 > ウェブフロントエンド > ナビゲーションの各種設定 bar_html/css_WEB-ITnose
注: 簡単なことだと思う人は、話さず、静かにしてください。 。 。 。私も純粋に記録しています
Web ページにはデフォルトでマージンとパディングの値があり、後続の要素によるマージンとパディングの変更は有効になりません。そのため、スタイル設定プロセス中に、最初にマージンとパディングを変更します。すべての要素の値は 0 にクリアされます
Code: *{padding: 0px; margin: 0px;} //* はすべての要素を表します
次の要素に必要なマージンとパディングの値を設定できます。例を一つあげてください: (このため、赤ちゃんは疲れ果てています。この考えは非常に論理的ですが、それはあなたが望むものではありません)
私はimooc Webサイトのナビゲーションをコピーしました(すべて練習です、私は初心者なので、すべて試してみたいです)
以下はコード部分です
<div class="nav"> <ul> <li><a href="#">评论</a></li> <li><a href="#">问答</a></li> <li><a href="#">笔记</a></li> <li><a href="#">同学代码</a></li> </ul> </div><br /><strong>css样式</strong>
*{ margin:0px; padding:0px; } .nav{ border-bottom:1px solid #c0c0c0; width:1000px; height:60px; margin-left:40px; //background-color:#c3ffdd; } ul li{ list-style-type:none; width:120px; float:left; } li a{ display:block; text-decoration:none; color:black; font-family:"微软雅黑"; text-align:center; line-height:60px; } li a:hover,li a:active{ color:#f00; } li a:focus{ border-bottom:2px solid #f00; }<br /><strong>效果图</strong>
先前我是死活标签hover的设置内容顶不到下边框的最左边,设置完代码后就可以了
<br /><br />