0

私はこれをcssで作ろうとしています。このナビゲーションバーを作ろうとしています。どんな助けでも素晴らしいでしょう。これは私がやろうとしていることです:

ここに画像の説明を入力

最初の写真は、ユーザーが Web サイトに入ったときの様子です。次に、いずれかのタブにカーソルを合わせると、色が変わるだけです。これを作ろうとする上での助けは素晴らしいでしょう。私はこれを試しましたが、うまくいきません。

HTML:

<div class="horizontal">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Register.html">Register</a></li>
<li><a href="Rules.html">Rules</a></li>
</ul>
</div>

cssがどのように見えるかを確認する必要があります。再度、感謝します

人々が望むように私がやったことを編集します 2 見てください:

div.horizontal
{
width:809px;
height:63px;
position:relative;
top: -1046px;
left: 104px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
  display: inline-block;
  margin-left: 5px;
}
div.horizontal a
{
display:block;
width:809px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#999999;
}

私が言ったように、これは正しくありませんが、これが私がatmでできるすべてです。ありがとう

4

1 に答える 1

2

HTMLを使用すると、次のようなことができます。

CSS

ul{
    list-style:none;
}

li{
    float:left;
    width:100px;
    height:50px;
    background:black;
    border:2px solid gray;
    text-align:center;
}

a{
    color:white;
    text-decoration:none;
    font-size:24px;
    font-weight:bold;
    line-height:50px;
    font-style:italic
}

li:hover{
    background:gray;
}

JSFiddle。

色を変えるだけ。

于 2013-04-02T17:52:31.747 に答える