CSS 최적화 텍스트 상자 및 버튼 코드

CSS 양식 미화를 위한 텍스트 상자와 버튼의 예

1. 먼저 웹페이지에 자주 등장하는 버튼과 텍스트 상자의 실제 색상을 살펴보겠습니다!

위 그림을 비교하면 텍스트 상자와 버튼의 모양을 어떻게 바꿀 수 있나요? 아래에서는 두 가지 텍스트 상자와 버튼 스타일을 예로 들어 보겠습니다. 첫 번째는 텍스트 상자와 버튼에 3차원 효과가 없고 선 색상과 채우기 색상만 있다는 것입니다. 많은 웹사이트에서 이 효과를 보셨을 것입니다. 그러나 사람들에게 특별한 느낌을 주는 것은 매우 좋습니다. 두 번째 효과는 텍스트 상자를 밑줄처럼 보이게 하는 동시에 버튼의 배경색이 더 이상 표시되지 않는 것입니다. 회색이지만 유색입니다. 이것은 매우 멋진 효과라고 할 수 있습니다. 이 두 가지 효과를 달성하는 자세한 단계에 대해 이야기하겠습니다.

2. 입체 효과가 없는 텍스트 상자와 버튼

그런 다음 DW3의 웹 페이지 편집 작업을 예로 들어 설명하겠습니다. 먼저 해당 양식 개체를 웹 페이지에 삽입했습니다. 텍스트 상자와 버튼을 삽입하는 등의 작업을 수행합니다. 이때 [F10] 키를 눌러 웹 페이지 소스 코드 편집 창을 표시합니다. 그런 다음 태그 사이에 이 스타일 시트를 삽입합니다. 웹 페이지:

　자, 이제 첫 번째 단계가 완료되었습니다. ：
　　class=smallInput
　예를 들어 및
　
　이 코드는 이 텍스트 상자와 버튼의 htm 문에 추가됩니다. 최종 효과는 아래와 같습니다.

어때요? 이전 사진의 표준 버튼과 비교해 보면 실제로 구현하기가 그리 어렵지 않습니다.

3. 컬러 밑줄 텍스트 상자 및 버튼 효과

마찬가지로 이 효과를 얻으려면 스타일 시트의 도움이 필요합니다. 단계는 웹 페이지 ;/head> 태그 사이에 스타일 시트 삽입:

.jb51.net]

위의 스타일 시트에서 볼 수 있듯이 이 효과는 텍스트 상자용 스타일과 버튼용 스타일을 통해 이루어집니다. 따라서 텍스트 상자와 코드의 htm 문에 두 개의 다른 문장을 삽입해야 합니다. class=smallInput 코드가 텍스트 상자에 삽입되었습니다.
　예를 들어 ,
　버튼 문에 삽입된 class="buttonface" 코드는 예와 같습니다
　
　실제로 이는 스타일 시트의 텍스트 상자 및 버튼 스타일에 해당합니다. 최종 효과는 다음과 같습니다.

위의 효과를 보면 여전히 단조로운 텍스트 상자와 버튼이 생각나나요? 위의 두 가지 효과는 스타일 시트를 통해 구현되며, 사용 방법도 매우 간단합니다.

　 폼 제작은 웹 개발의 핵심입니다. 폼을 통해 상호 작용과 의사 소통이 가능하며, 위의 두 기사에서는 의미와 구조의 관점에서 이에 대해 논의했습니다. 토론하고 배워보세요!

위 내용은 CSS 최적화 텍스트 상자 및 버튼 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!