CSS 검색창 작성 방법

CSS에서 검색 상자를 구현하는 방법: 먼저 페이지 구조를 구성한 다음 자리 표시자를 사용하여 텍스트 상자에 주석을 추가한 다음 마지막으로 페이지의 기본 외부 여백과 내부 여백을 재설정하고 외부 테두리를 설정합니다. 검색창 스타일.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS 검색창은 어떻게 작성하나요?

p+css를 사용하여 그림과 같은 검색창 효과 얻기:

분석:

1. Markman을 사용하여 원본 이미지의 너비, 높이, 색상 및 기타 측면을 분석합니다. , 아래와 같이 표시됩니다.

2. 분석 요소:
검색 상자는 주로 입력 텍스트 상자, 버튼 버튼 및 버튼 왼쪽의 삼각형 표시 기호로 구성됩니다. 먼저 페이지 구조를 정리하세요:

 

   <input>      SEARCH        <span></span>             

텍스트 상자, 텍스트 상자 주석에 자리 표시자 사용:

<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은 글꼴 스타일이 상위 요소에서 상속되어야 함을 지정합니다. 버튼 스타일:

button{
    width:112px;
    height: 42px;
    background-color:#d93c3c;
    color:#fff;
    border:none;
    border-radius:0 5px 5px 0;
    position: relative;
}

여기에서는 상대 위치 지정이 사용되었습니다.

 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>

4가지 색상 테두리 만들기:

 .triangle {
    display: inline-block;
    border-width: 100px;
    border-style: solid;
    border-color: #000 #f00 #0f0 #00f;
}

border-color 네 가지 값은 위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리의 색상을 차례로 나타냅니다.

• [추천 학습:
css 비디오 튜토리얼

]

삼각형이 필요한 방향에서 나머지 세 개의 삼각형을 투명하게 설정하세요

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 &#39;lucida sans&#39;, &#39;trebuchet MS&#39;, &#39;Tahoma&#39;;
            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>



    

    

                   <input><button>SEARCH</button>             

    

 

위 내용은 CSS 검색창 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!