HTML CSS는 아이콘_HTML/Xhtml_웹페이지 제작으로 일반 텍스트와 버튼을 구현합니다.-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML CSS는 아이콘_HTML/Xhtml_웹페이지 제작으로 일반 텍스트와 버튼을 구현합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:36 PM

css html 단추

이 글은 일부 기본 페이지 요소의 구현 방법을 요약한 것이며 향후 업데이트될 예정입니다. 우선 우리가 접하는 가장 일반적인 것은 버튼의 모양이 여러 가지일 수 있지만 일반적으로 일반 텍스트 버튼과 아이콘이 있는 버튼으로 나눌 수 있습니다. 렌더링은 다음과 같습니다.

코드는 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

사전><사전 이름="코드" 클래스="html" >>
<html lang="zh- CN">
<머리>
<제목>按钮写法제목>
<메타 문자 집합="UTF- 8">
<메타 http-equiv=" X-UA 호환" 콘텐츠="IE=Edge,chrome=1">
<링크 rel="스타일시트" href="css/style.css">
<스타일 유형="text/ css">
a:hover{텍스트 장식: 없음;}
.btn{
디스플레이: 인라인 블록;
여백 상단: 10px;
패딩: 10px 24px;
테두리 반경: 4px;
배경색: #63b7ff;
색상: #fff;
커서: 포인터;
}
.btn:hover{
배경색: #99c6ff;
}
.inbtn{
경계: 없음;
}
.bubtn{
경계: 없음;
}
.btn{
글꼴 스타일: 일반;
}
.bgbtn 스팬{
왼쪽 여백: 10px;
여백-왼쪽: 20px;
배경: url(images/edit.png) 왼쪽 가운데 반복 없음;
}
.bgbtn02 img{
여백-하단: -3px;
여백 오른쪽: 10px;
}
스타일>
머리>
<몸>
<a href="" class="btn">라벨 버튼아>
<입력 클래스="inbtn btn " 유형="버튼" 값= "라벨 입력 버튼"/>
<버튼 class="bubtn btn ">버튼 라벨 버튼버튼>
<i class="ibtn btn ">i 태그 버튼i>
<a href="" 클래스="bgbtn btn">
<스팬>아이콘이 있는 버튼 스팬>
아>
<a href="" 클래스="bgbtn02 btn">
<img src="images/ edit.png"/>아이콘이 있는 버튼
아>
몸>
html>

다양한 태그의 장점과 단점에 대해서는 모두가 이해해야 합니다. 재미있는 버튼이 있으면 함께 구현해 보겠습니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7391

자바 튜토리얼

1630

Cakephp 튜토리얼

1357

라라벨 튜토리얼

1268

PHP 튜토리얼

1216

Related knowledge

웹 페이지에 로컬로 설치된 'Jingnan Mai Round Body'를 올바르게 표시하는 방법은 무엇입니까? Apr 05, 2025 pm 10:33 PM

최근 웹 페이지에 로컬로 설치된 글꼴 파일을 사용하여 인터넷에서 무료 글꼴을 다운로드하여 시스템에 성공적으로 설치했습니다. 지금...

CSS를 통해 일류 이름 항목으로 자식 요소를 선택하는 방법은 무엇입니까? Apr 05, 2025 pm 11:24 PM

요소 수가 고정되지 않은 경우 CSS를 통해 지정된 클래스 이름의 첫 번째 자식 요소를 선택하는 방법. HTML 구조를 처리 할 때 종종 다른 요소를 만듭니다 ...

H5 페이지 생산에는 지속적인 유지 보수가 필요합니까? Apr 05, 2025 pm 11:27 PM

코드 취약점, 브라우저 호환성, 성능 최적화, 보안 업데이트 및 사용자 경험 개선과 같은 요소로 인해 H5 페이지를 지속적으로 유지해야합니다. 효과적인 유지 관리 방법에는 완전한 테스트 시스템 설정, 버전 제어 도구 사용, 페이지 성능을 정기적으로 모니터링하고 사용자 피드백 수집 및 유지 관리 계획을 수립하는 것이 포함됩니다.

H5 페이지 제작의 장점은 무엇입니까? Apr 05, 2025 pm 11:48 PM

H5 페이지 제작의 장점에는 경량 경험, 빠른 로딩 속도 및 사용자 유지 개선이 포함됩니다. 교차 플랫폼 호환성, 다른 플랫폼에 적응할 필요가 없어 개발 효율성을 향상시킵니다. 유연성 및 동적 업데이트, 감사가 필요하지 않아 콘텐츠를 쉽게 수정하고 업데이트 할 수 있습니다. 기본 앱보다 비용 효율적이고 개발 비용이 낮습니다.

모바일 터미널의 멀티 라인 오버 플로우 누락과 호환되는 방법은 무엇입니까? Apr 05, 2025 pm 10:36 PM

VUE 2.0을 사용하여 모바일 애플리케이션을 개발할 때 다른 장치에서 멀티 로우 오버플로의 호환성 문제가 종종 텍스트를 넘어서야 할 필요성을 만듭니다 ...

H5 페이지 제작은 프론트 엔드 개발입니까? Apr 05, 2025 pm 11:42 PM

예, H5 페이지 제작은 HTML, CSS 및 JavaScript와 같은 핵심 기술을 포함하는 프론트 엔드 개발을위한 중요한 구현 방법입니다. 개발자는 & lt; canvas & gt; 그래픽을 그리거나 상호 작용 동작을 제어하기 위해 JavaScript를 사용하는 태그.

H5 페이지 프로덕션의 임계 값이 높습니까? Apr 05, 2025 pm 11:45 PM

H5 페이지를 만드는 임계 값은 목표에 따라 높거나 낮지 않습니다. 간단한 정적 페이지를 만드는 것이 더 쉽습니다. HTML 및 CSS의 기본 지식 만 마스터하면됩니다. 인터랙티브하고 풍부한 기능이 강한 페이지를 만드는 것은 비교적 높으며 HTML, CSS, JavaScript, 프론트 엔드 프레임 워크, 성능 최적화 및 호환성에 대한 심층적 인 지식이 필요합니다.