ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用して、テキスト ハイパーリンク テキストの右側に矢印アイコンを追加します。
CSS を使用して、テキスト ハイパーリンク テキストの右側に矢印アイコンを追加します。
- 巴扎黑オリジナル
- 2017-05-22 11:37:123041ブラウズ
Google ウェブマスター管理バックエンド、Alexa 公式 Web サイトなど、多くの有名な Web サイトでは、テキスト リンクの右側に矢印アイコンが追加されています。このデザインの利点は、リンクがより目を引き、識別しやすくなることです。
テキストリンクの右側に矢印アイコンを追加するには、ほとんどの人がこれを実現するために、上記のGoogleウェブマスター管理の背景、Alexa公式Webサイトなどを含む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，可以随心所欲的实现自己想要的样式效果，使得下拉菜单与网页整体布局搭配的更美观和谐。
[関連する推奨事項]
2. H5 および CSS3 フォーム検証の使用に関するチュートリアル
4. 5.標準化された方法で CSS スタイルを記述する方法を説明します
以上がCSS を使用して、テキスト ハイパーリンク テキストの右側に矢印アイコンを追加します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。