CSS 텍스트 상자 및 버튼 미화 효과 코드_경험 교환

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

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

2. 입체감이 없는 텍스트 상자와 버튼

그러면 먼저 DW3의 웹페이지 편집 작업을 예로 들어보겠습니다. 우리는 이미 웹 페이지를 편집했고, 텍스트 상자와 버튼을 삽입하는 등 해당 양식 개체가 삽입되었습니다. 이때 [F10] 키를 눌러 웹 페이지 소스 코드 편집 창을 표시합니다. 웹페이지의 및 태그 사이에 삽입하세요.

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

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

3. 밑줄이 그어진 텍스트 상자 및 버튼 효과
마찬가지로 이 효과를 얻으려면 스타일 시트의 도움이 필요하며 이는 첫 번째 효과와 유사합니다. . 단계는 동일하며 웹페이지의 태그와 사이에 스타일 시트를 삽입합니다.


.jb51.net]

위의 스타일 시트에서 볼 수 있듯이 이 효과는 이는 텍스트 상자용 스타일과 버튼용 스타일의 두 가지 스타일을 통해 이루어지므로 텍스트 상자와 버튼의 htm 문에 두 개의 다른 코드를 삽입해야 합니다. 텍스트 상자에는 class=smallInput 코드가 삽입됩니다.
예를 들어 ,

class="buttonface" 코드를 버튼 문에 삽입합니다(예:

실제로 이는 스타일 시트의 텍스트 상자 및 버튼 스타일에 해당합니다. 최종 효과는 다음과 같습니다. 아래:





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

웹 개발의 핵심은 폼 제작이며, 폼을 통해 상호작용과 소통이 가능하고, 정보수집과 공유도 가능하다는 관점에서 진행됩니다. 의미와 구조에 대한 토론, 토론과 학습에도 참여할 수 있습니다!