CSS에서 검색 상자를 구현하는 방법: 먼저 페이지 구조를 구성한 다음 자리 표시자를 사용하여 텍스트 상자에 주석을 추가한 다음 마지막으로 페이지의 기본 외부 여백과 내부 여백을 재설정하고 외부 테두리를 설정합니다. 검색창 스타일.
이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
CSS 검색창은 어떻게 작성하나요?
p+css를 사용하여 그림과 같은 검색창 효과 얻기:
1. Markman을 사용하여 원본 이미지의 너비, 높이, 색상 및 기타 측면을 분석합니다. , 아래와 같이 표시됩니다.
2. 분석 요소:
검색 상자는 주로 입력 텍스트 상자, 버튼 버튼 및 버튼 왼쪽의 삼각형 표시 기호로 구성됩니다. 먼저 페이지 구조를 정리하세요:
<input>
<button>SEARCH</button>
<button>SEARCH <span></span> </button>
*{ margin:auto; padding:0; }
.form{ width: 454px; height: 42px; background:rgba(0,0,0,.2); padding:15px; border:none; border-radius:5px; }Settings 검색 상자의 외부 테두리 스타일, 투명도 설정, 외부 테두리선 제거, 테두리 라디안 설정:
background:rgba(0,0,0,.2); border:none; border-radius:5px;
input{ width: 342px; height: 42px; background-color: #eeeeee; border:none; border-top-left-radius:5px; border-bottom-left-radius:5px; font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma'; font-style:italic; }테두리 라디안은 다음과 같이 축약될 수도 있습니다.
border-radius:5px 0 0 5px;
style-style:italic다른 속성 값이 있습니다:
속성 값
normal | |
---|---|
italic | 브라우저는 기울임꼴 글꼴 스타일을 표시합니다. |
oblique | 브라우저에 기울어진 글꼴 스타일이 표시됩니다. |
inherit | 은 글꼴 스타일이 상위 요소에서 상속되어야 함을 지정합니다. |
버튼 스타일: |
position: relative;
는 삼각형의 스타일을 나타냅니다.
.t{ border-width:6px; border-style:solid; border-color: transparent #d93c3c transparent transparent; position: absolute; right:100%; }이것은 요소는 절대 위치를 사용하며 참조 요소의 100% 경계 위치에서 y 좌표를 오른쪽에서 왼쪽으로 배치합니다. x 좌표가 설정되지 않은 경우 기본값은 0입니다.
position: absolute; right:100%;
삼각형의 범위 요소 정의:
<span></span>
.triangle { display: inline-block; border-width: 100px; border-style: solid; border-color: #000 #f00 #0f0 #00f; }border-color 네 가지 값은 위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리의 색상을 차례로 나타냅니다.
삼각형이 필요한 방향에서 나머지 세 개의 삼각형을 투명하게 설정하세요
border-color: #000 transparent transparent transparent;범위를 사용하지 말고 의사 클래스를 사용하여 직접 위치를 지정하세요. 그런 다음 삼각형의 범위 요소와 스타일을 삭제하고 버튼 요소의 스타일 앞에 직접 추가하면 다음과 같습니다.
nbsp;html> <meta> <title>Document</title> <style> *{ margin:auto; padding:0; } .form{ width: 454px; height: 42px; background:rgba(0,0,0,.2); padding:15px; border:none; border-radius:5px; } input{ width: 342px; height: 42px; background-color: #eeeeee; border:none; border-top-left-radius:5px; border-bottom-left-radius:5px; font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma'; font-style:italic; } button{ /*display:inline-block;*/ width:112px; height: 42px; background-color:#d93c3c; color:#fff; border:none; border-top-right-radius:5px; border-bottom-right-radius:5px; position: relative; font-size:16px; font-weight: bold; } /*使用伪类来添加三角符号*/ button:before{ content:""; border-width:6px; border-style:solid; border-color: transparent #d93c3c transparent transparent; position: absolute; right:100%; top:38%; } </style>
위 내용은 CSS 검색창 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!