CSS를 사용하여 텍스트 하이퍼링크 텍스트 오른쪽에 화살표 아이콘을 추가합니다.-CSS 튜토리얼-php.cn

CSS를 사용하여 텍스트 하이퍼링크 텍스트 오른쪽에 화살표 아이콘을 추가합니다.

巴扎黑

풀어 주다： 2017-05-22 11:37:12

원래의

3040명이 탐색했습니다.

Google 웹마스터 관리 백엔드, Alexa 공식 웹사이트 등 많은 유명 웹사이트에서는 텍스트 링크 오른쪽에 화살표 아이콘을 추가합니다. 이 디자인의 장점은 링크를 더욱 눈길을 끌고 쉽게 볼 수 있다는 것입니다. 식별하다.

텍스트 링크 오른쪽에 화살표 아이콘을 추가하려면 위에서 언급한 Google 웹마스터 관리 배경, Alexa 공식 웹사이트 등을 포함하여 대부분의 사람들이 CSS 배경 이미지를 사용합니다. 예, 이 방법은 익히고 적용하기 가장 쉽습니다. 이것이 바로 이 글이 여러분에게 소개할 방법입니다.

먼저 렌더링을 살펴보겠습니다.

CSS를 사용하여 텍스트 하이퍼링크 텍스트 오른쪽에 화살표 아이콘을 추가합니다.

Css 배경 이미지는 텍스트 체인 오른쪽에 화살표 아이콘을 추가하는 것을 구현합니다.

위 그림은 두 개의 서로 다른 화살표 아이콘인 두 가지 하이퍼링크 스타일을 보여줍니다. 실제로는 배경 이미지이며 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에서 선택 컨트롤을 사용하면 드롭다운 효과를 쉽게 얻을 수 있습니다. 메뉴. 그러나 선택 컨트롤은 길이만 변경할 수 있고 높이, 색상 및 기타 스타일은 변경할 수 없기 때문에 웹 디자인의 전체 레이아웃과 일치하는 것이 때로는보기 흉해 보일 수 있습니다. 이러한 이유로 p+css에 의해 구현된 드롭다운 메뉴는 웹 디자이너들에 의해 널리 사용됩니다. p+css를 통해 원하는 스타일 효과를 원하는대로 얻을 수 있어 드롭다운 메뉴와 웹 페이지의 전체 레이아웃을 더욱 아름답고 조화롭게 만들 수 있습니다.

위의 HTML 코드에서 볼 수 있듯이 실제로는 추가 코드를 작성할 필요가 없고 일반 하이퍼링크만 작성하면 됩니다. 이것의 장점은 언제든지 CSS 코드를 수정하여 다양한 스타일의 하이퍼링크를 설정할 수 있다는 것입니다. 오른쪽 화살표 아이콘이 필요한지 여부에 관계없이 CSS에서 쉽게 수행할 수 있습니다.

전체 HTML 코드는 다음과 같습니다.

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

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

로그인 후 복사

[관련 추천]

1. CSS3 무료 동영상 튜토리얼

2 . H5 및 CSS3 양식 유효성 검사 튜토리얼

3. 사각 상자 둥근 모서리 효과를 완성하는 CSS3 코드 튜토리얼

4. CSS를 사용하여 표준 원형 패턴을 그리는 방법을 가르칩니다.

5. 표준화된 방식으로 CSS 스타일을 작성하는 방법을 가르칩니다.

위 내용은 CSS를 사용하여 텍스트 하이퍼링크 텍스트 오른쪽에 화살표 아이콘을 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!