>  기사  >  웹 프론트엔드  >  CSS 검색창 작성 방법

CSS 검색창 작성 방법

藏色散人
藏色散人원래의
2021-07-26 11:20:5812034검색

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

CSS 검색창 작성 방법

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

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

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

CSS 검색창 작성 방법


분석:

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

CSS 검색창 작성 방법

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

 

   <input>             

    텍스트 상자, 텍스트 상자 주석에 자리 표시자 사용:
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

            성명:
            본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.