6

だから私は小さなウェブサイトを作成しようとしています。（タイトルになりませんのでご安心ください）現在、「ホーム」、「ニュース」、「ギャラリー」、「会社概要」は、別のページに移動する実際のボタンではありません。私がする時

<a href="Mainpage.htm"> Home </a>

ボタンが紫色に変わり、下線が引かれます。（これがリンクの表示方法であることはわかっています）しかし、これらのボタンを青や下線を付けずに、写真のようにオレンジ色のままにする方法はありますか。ありがとう http://imgur.com/Czsk4

4

5 に答える 5

9

スタイルをインラインで設定できますが、それを行う最良の方法はcssクラスを使用することです。

インラインで行うには：

<a href="Mainpage.htm" style="color: #fb3f00; text-decoration: none;">Home</a>

クラスを通してそれを行うには：

<a href="Mainpage.htm" class="nav-link">Home</a>

a.nav-link:link
{
   color: #fb3f00;
   text-decoration: none;
}
a.nav-link:visited
{
   color: #fb3f00;
   text-decoration: none;
}
a.nav-link:hover
{
   color: #fb3f00;
   text-decoration: none;
}
a.nav-link:active
{
   color: #fb3f00;
   text-decoration: none;
}

クラスを介してそれを行うには、cssコードを別のcssファイルに入れてリンクする必要があります。または、ドキュメントの先頭に置くこともできます。ベストプラクティスは、それを外部のcssファイルに入れて、全体で使用できるようにすることです。

全体のすべてのリンクにオレンジ色を表示する場合は、クラスの「.nav-link」部分を削除し、linkタグからclass="nav-link"を削除します。これにより、別のクラスを定義してリンクタグに明示的に適用しない限り、すべてのリンクがオレンジ色になります。

幸運を！

于 2012-04-13T15:11:56.023 に答える
5

インラインスタイルの代わりにCSSを使用すると、はるかにうまく機能します。

a { 
    color:orange;
    text-decoration:none;
}

また、ホバーすると、より洗練されて下線が表示されるようにすることもできます。

a:hover, a:focus {
    text-decoration:underline;
}

これはユーザーエクスペリエンス（UX）の向上に役立ちますが、リンクがヘッダーにある場合は、それらがリンクであることが自然にわかる場合があります。（もちろん、UXデザインはこれよりも複雑です。これは、タッチスクリーンユーザーのように「ホバー」がないものを考慮する必要があるためです。:)）

于 2012-04-13T15:07:40.140 に答える
3

すべてのリンクには異なる状態が付属しているため、1つの色だけで維持したい場合は、次のようにすべての状態を一緒に変更できます。

a:link, a:visited, a:hover, a:active { color: orange }
于 2012-04-13T15:08:45.767 に答える
2

CSSを使用してそれを行うことができます。ヘッドセクションの最後にあるコードでこれを設定します

    <style TYPE="text/css">

   a:link, a:visited, a:hover, a:active { color: #ff8080;
       text-decoration: none;
     }

    </style>

＃ff8080を自分の色に変更します

于 2012-04-13T15:10:51.553 に答える
0

私はあなたにぴったりの解決策を持っています！

コードから直接コピーして貼り付けています。それをあなたに関連させてください。これは間違いなくあなたが達成しようとしていることのために働きます。

<style type="text/css" media="screen">
a:link { color:#ffffff; text-decoration: none; }
a:visited { color:#33348e; text-decoration: none; }
a:hover { color:#91ac48; text-decoration: none; }
a:active { color:#7476b4; text-decoration: underline; }
</style> <a href="/shop">Order Now</a>
于 2018-02-07T12:17:26.113 に答える