CSS を使用して、テキストハイパーリンクテキストの右側に矢印アイコンを追加します。-CSSチュートリアル-php.cn

CSS を使用して、テキストハイパーリンクテキストの右側に矢印アイコンを追加します。

巴扎黑

リリース： 2017-05-22 11:37:12

オリジナル

3037 人が閲覧しました

Google ウェブマスター管理バックエンド、Alexa 公式 Web サイトなど、多くの有名な Web サイトでは、テキストリンクの右側に矢印アイコンが追加されています。このデザインの利点は、リンクがより目を引き、識別しやすくなることです。

テキストリンクの右側に矢印アイコンを追加するには、ほとんどの人がこれを実現するために、上記のGoogleウェブマスター管理の背景、Alexa公式Webサイトなどを含むCSS背景画像を使用します。はい、この方法は習得して適用するのが最も簡単です。この記事で紹介するのはまさにこの方法です。

まずレンダリングを見てみましょう。

CSS を使用して、テキストハイパーリンクテキストの右側に矢印アイコンを追加します。

CSS 背景画像は、テキストリンクの右側に矢印アイコンを追加することを実装します

上の図は 2 つの異なる矢印アイコンを示しています。実際、これらは背景画像です。 CSSを通してテキスト内にこのような背景画像がチェーンの右側に自動的に追加されます。

CSSコードは次のとおりです:

.content{
    width:600px;
    margin:30px 30px 30px 30px;
    font-family:"Microsoft Yahei",Georgia,"Times New Roman",Times,serif;
    font-size:14px;
    color:#333;
    line-height:185%;
}
.content a {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat;
    padding-right:13px;
    margin-left:3px;
    margin-right:3px;
    text-decoration: underline;
    color: #c30;
}
.content a:hover {
    color: blue;
}

ログイン後にコピー

キーコードはbackground:urlです。ここで、urlは画像アドレスです。上記の CSS コードでは、URL で矢印アイコンの Base64 文字列が使用されています (はじめに: ブラウザを使用して画像の Base64 文字列を簡単に取得できます)。この利点は、画像をリクエストする必要がなくなり、時間と時間を節約できることです。提出効率の向上。

以下は HTML のキーコードです:

<p>
    <font style="font-size:16px;font-weight:bold">超链接样式一</font><br>

ログイン後にコピー

HTML で select control を使用すると、ドロップダウンメニューの効果を非常に簡単に実現できます。ただし、select コントロールは長さのみを変更でき、高さ、色などのスタイルは変更できないため、Web デザイン全体のレイアウトに合わせると見苦しく感じることがあります。このため、p+css によって実装されたドロップダウンメニューは Web デザイナーによって広く使用されています。 p+css を使用すると、希望するスタイル効果を自由に実現でき、ドロップダウンメニューと Web ページ全体のレイアウトをより美しく、調和のとれたものにすることができます。

上記の HTML コードからわかるように、実際には追加のコードを記述する必要はなく、通常のハイパーリンクを記述するだけです。この利点は、右側の矢印アイコンが必要かどうかに関係なく、CSS コードをいつでも変更してさまざまなスタイルのハイパーリンクを設定できることです。

完全な HTML コードは次のとおりです:

css实例_文字超链接右边加一个箭头_卡卡网 webkaka.com

超链接样式一
html里使用select控件，非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度，不能更改高度和颜色等样式，因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因，p+css实现的下拉菜单便大量被网页设计师使用。通过p+css，可以随心所欲的实现自己想要的样式效果，使得下拉菜单与网页整体布局搭配的更美观和谐。

ログイン後にコピー

[関連する推奨事項]

1. CSS3 の無料ビデオチュートリアル

2. H5 および CSS3 フォーム検証の使用に関するチュートリアル

3.ボックス角丸効果のコードチュートリアル

CSS で標準的な円形パターンを描画する方法を説明します

標準化された方法で CSS スタイルを記述する方法を説明します

以上がCSS を使用して、テキストハイパーリンクテキストの右側に矢印アイコンを追加します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。