0

ナビゲーションを div 全体に広げようとしています。背景色/ターゲットの幅を 33% にしたいです。

<nav>
<a href="index.html" id="nav1">Home</a>
<a href="lesson1.html" id="nav2">Lesson 1: Intro</a>
<a href="lesson2.html" id="nav1">Lesson 2: Creating a Project</a>
</nav>

#nav1 {
    background-color: #a43200;
    color: white;
    text-decoration: none;
    padding: 10px 100px 10px 100px;
    font-size: 1.3em;
}
#nav2 {
    background-color: #c73d00;
    color: white;
    padding: 10px 100px 10px 100px;
    font-size: 1.3em;
    text-decoration: none;
}
4

3 に答える 3

1

セットアップにはいくつか問題があります (たとえば、複数idの s があり、これは no-noであるため、それらをclasses に変更しました)。

また、繰り返しのスタイリングをいくつか削除しようとしました。#nav a多くのボタン スタイルが 1 つのスタイルに凝縮され、カスタム カラーが個別のスタイルに適用されていることがわかります。

font-sizeプロパティを 12px に設定しました#navが、これはデモンストレーションのみを目的としています。これを好きなように編集してください。

このフィドルは役立つはずです：

フィドル:
http://jsfiddle.net/fACmM/

HTML:

<div id="nav">
<a href="index.html" class="nav1">Home</a>
<a href="lesson1.html" class="nav2">Lesson 1: Intro</a>
<a href="lesson2.html" class="nav1">Lesson 2: Creating a Project</a>
</div>

CSS:

#nav
{
    width:100%;
    font-size:12px;
}
#nav a
{
    width:33%;
    float: left;
    color: white;
    padding: 10px 0px;
    font-size: 1.3em;
    text-decoration: none;
    text-align:center;
}

.nav1 {
    background-color: #a43200;
}
.nav2 {
    background-color: #c73d00;
}
于 2013-04-01T02:58:49.517 に答える
0

CSS に display:block を追加しました。

フィドルを参照してください：http://jsfiddle.net/djwave28/audAt/6/

<nav>
    <ul>
        <li><a href="index.html" id="nav1">Home</a>
        </li>
        <li><a href="lesson1.html" id="nav2">Lesson 1: Intro</a>
        </li>
        <li><a href="lesson2.html" id="nav1">Lesson 2: Creating a Project</a>
        </li>
    </ul>
</nav>

nav ul {
    list-style:none;
}
nav ul li {
    float:left;
    width:30%;
}
#nav1 {
    position:relative: float:left;
    background-color: #a43200;
    color: white;
    text-decoration: none;
    padding: 10px 0px 10px 0px;
    font-size: 1.3em;
    display:block;
}
#nav2 {
    display:block;
    position:relative: float:left;
    background-color: #c73d00;
    color: white;
    padding: 10px 0px 10px 0px;
    font-size: 1.3em;
    text-decoration: none;
}
于 2013-04-01T02:54:11.813 に答える
0

この記事classは、現在のコードで id の代わりに class を使用した理由を理解するのに役立ちます。id

html

<nav>
<a href="index.html" class="nav1">Home</a>
<a href="lesson1.html" class="nav2">Lesson 1: Intro</a>
<a href="lesson2.html" class="nav1">Lesson 2: Creating a Project</a>
</nav>

CSS

nav {width:960px}
nav a {
    float:left; 
    text-decoration: none;
    padding: 10px 50px 10px 50px;
    font-size: 1.3em;
    color: white;
}
.nav1 {
    background-color: #a43200;
}
.nav2 {
    background-color: #c73d00;
}

動作デモ

これがあなたを助けることを願っています

于 2013-04-01T03:04:19.067 に答える