次のようなHTMLナビゲーションリンクを作成したいと思います。
しかし、HTMLの下線を非表示にする方法と、デフォルトのHTMLカラーを変更する方法がわかりません。これを行うための基本的な例を教えていただけますか?
次のようなHTMLナビゲーションリンクを作成したいと思います。
しかし、HTMLの下線を非表示にする方法と、デフォルトのHTMLカラーを変更する方法がわかりません。これを行うための基本的な例を教えていただけますか?
a{color: green; text-decoration: none;}
HTML:
<ul>
<li>GeForce > <a href="#">Link 1</a></li>
<li>GeForce > <a href="#">Link 2</a></li>
<li>GeForce > <a href="#">Link 3</a></li>
</ul>
CSS:
body {
background: #000;
}
ul {
list-style-type: none;
padding: 40px;
}
li {
color: #fff;
font-family: Arial;
font-size: 14px;
}
li > a {
color: #76b900;
text-decoration: none;
}
li > a:hover {
text-decoration: underline;
}
ライブデモ: jsFiddle
すでにナビゲーション バーがあるのはおかしいですね。
「a」の色を設定するには、「color: rgb(256,256,256);」を使用します。または、「color: #000000;」を使用します。
a{
text-decoration: none;
color: rgb(256,256,256);
}
To hide the underline and add colours, your answer is CSS.
Here's an example for you:
HTML:
<ul class="navigation-list"> <!--the name 'navigation-list' is arbitrary-->
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
CSS:
ul.navigation-list {
background-color: rgb(30,30,30);
height:35px;
}
ul.navigation-list li{
float:left;}
ul.navigation-list li a{
padding:4px 8px;
text-decoration:none; /**this removes the underline part **/
color:rgb(250,250,250);
font-family:Verdana;
}
ul.navigation-list li a:hover{
text-decoration:underline; /**this adds the underline part **/
background-color:rgb(80,80,80);
}
JSfiddle here: http://jsfiddle.net/u9A5K/2/
If you have any questions don't hesitate to ask :)