이 글은 일부 기본 페이지 요소의 구현 방법을 요약한 것이며 향후 업데이트될 예정입니다. 우선 우리가 접하는 가장 일반적인 것은 버튼의 모양이 여러 가지일 수 있지만 일반적으로 일반 텍스트 버튼과 아이콘이 있는 버튼으로 나눌 수 있습니다. 렌더링은 다음과 같습니다.
코드는 다음과 같습니다.
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>
다양한 태그의 장점과 단점에 대해서는 모두가 이해해야 합니다. 재미있는 버튼이 있으면 함께 구현해 보겠습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
