찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >HTML CSS는 아이콘_HTML/Xhtml_웹페이지 제작으로 일반 텍스트와 버튼을 구현합니다.

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

WBOY
WBOY원래의
2016-05-16 16:36:032682검색

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

코드는 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. 사전><사전 이름="코드" 클래스="html" >>     
  2. <html lang="zh- CN">     
  3. <머리>     
  4.   <제목>按钮写法제목>     
  5.   <메타 문자 집합="UTF- 8">     
  6.   <메타 http-equiv=" X-UA 호환" 콘텐츠="IE=Edge,chrome=1">     
  7.   <링크 rel="스타일시트"  href="css/style.css">     
  8. <스타일 유형="text/ css">     
  9.   a:hover{텍스트 장식: 없음;}     
  10.   .btn{     
  11.     디스플레이: 인라인 블록;     
  12.     여백 상단: 10px;     
  13.     패딩: 10px 24px;     
  14.     테두리 반경: 4px;     
  15.     배경색: #63b7ff;     
  16.     색상: #fff;     
  17.     커서: 포인터;     
  18.   }     
  19.   .btn:hover{     
  20.     배경색: #99c6ff;     
  21.   }     
  22.   .inbtn{     
  23.     경계: 없음;     
  24.   }     
  25.   .bubtn{     
  26.     경계: 없음;     
  27.   }     
  28.   .btn{     
  29.     글꼴 스타일: 일반;     
  30.   }     
  31.   .bgbtn 스팬{     
  32.     왼쪽 여백: 10px;     
  33.     여백-왼쪽: 20px;     
  34.     배경: url(images/edit.png) 왼쪽 가운데 반복 없음;     
  35.   }     
  36.   .bgbtn02 img{     
  37.     여백-하단: -3px;     
  38.     여백 오른쪽: 10px;     
  39.   }     
  40. 스타일> 
  41. 머리> 
  42. <몸> 
  43.  
  44. <a href="" class="btn">라벨 버튼아> 
  45.  
  46. <입력 클래스="inbtn btn " 유형="버튼" 값= "라벨 입력 버튼"/> 
  47.  
  48. <버튼 class="bubtn btn ">버튼 라벨 버튼버튼> 
  49.  
  50. <i class="ibtn btn ">i 태그 버튼i> 
  51.  
  52. <a href="" 클래스="bgbtn btn">
  53. <스팬>아이콘이 있는 버튼 스팬> 
  54. 아> 
  55. <a href="" 클래스="bgbtn02 btn">
  56. <img src="images/ edit.png"/>아이콘이 있는 버튼
  57. 아> 
  58. 몸> 
  59. html> 
다양한 태그의 장점과 단점에 대해서는 모두가 이해해야 합니다. 재미있는 버튼이 있으면 함께 구현해 보겠습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Html_HTML/Xhtml_Web 페이지 제작 시 수평 탐색 구조를 설정하는 방법다음 기사：Html_HTML/Xhtml_Web 페이지 제작 시 수평 탐색 구조를 설정하는 방법

관련 기사

더보기