ホームページ  >  記事  >  ウェブフロントエンド  >  ナビゲーションの各種設定 bar_html/css_WEB-ITnose

ナビゲーションの各種設定 bar_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:17:411033ブラウズ

注: 簡単なことだと思う人は、話さず、静かにしてください。 。 。 。私も純粋に記録しています

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 />

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。