주요 인기사이트 검색창 작성법에 대한 에세이, 간략한 분석!

검색창을 작성하는 방법은 다양합니다. 검색창은 먼저 높이와 너비를 계산해야 합니다. 🎜 >

간단한 분석을 위해 JD 검색창을 예로 들어보겠습니다.

위는 최종 검색창 렌더링입니다.

코드 먼저 보내기>>>>>>

<span style="color: #ff00ff; font-size: 18pt;"><strong>HTML 标签：</strong></span>

<span style="font-size: 16px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center_child1"</span><span style="color: #0000ff;">></span>
   <span style="color: #0000ff;"><</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="search"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="search练习"</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>搜索<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span><span style="color: #000000;">   -------像京东是用的button标签，其他网站，
                              如百度：是用的</span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">=""</span> <span style="color: #0000ff;">></span><span style="color: #000000;"> 标签。
   </span><span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

<span style="color: #800000;"><strong><span style="color: #ff00ff; font-size: 18pt;">CSS 样式：</span></strong><br /><br /><strong><span style="font-size: 14pt;">.center_child1</span></strong></span><strong><span style="font-size: 14pt;">{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">538px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">36px</span>;<br /><span style="color: #ff0000;">　　 overflow:hidden;
    border</span>:<span style="color: #0000ff;">2px solid #BD1D17</span>;
}<span style="color: #800000;">
.center_child1 input</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">456px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">24px</span>;<br /></span></strong>

<strong><span style="color: #888888; font-size: 18px;">    float:left; </span><span style="font-size: 14pt;"><span style="color: #888888;">   <br />    <span style="color: #ff6600;">padding</span></span>:<span style="color: #0000ff;">6px 2px</span>;   ----------------对 input 内补白，使其字体不紧贴 border 边框,增加美感。</span></strong>

<em id="__mceDel"><strong><span style="font-size: 14pt;"><span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;">transparent</span>;   -------让 input 标签的背景颜色为透明色。<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">none</span>;   -----------------去 input 标签，原有的边框属性。<span style="color: #ff0000;">
    outline</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">16px</span>;
}<span style="color: #800000;">
.center_child1 button</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">76px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">36px</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;">right</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#BD1D17</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#fff</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">15px</span>;
}</span></strong></em>

요약: 검색 상자는 크게 세 부분으로 구성됩니다. 하나는 입력 상자 부분(왼쪽), 다른 하나는 검색 버튼 부분(오른쪽), 그리고 큰 div가 있습니다. ;

1. 먼저 큰 div의 너비, 높이 및 테두리 색상을 설정합니다. 이는 개인의 필요에 따라 미리 계산되어야 합니다.

2. 입력(입력 상자 부분)을 오른쪽으로 띄우고

overflow:hidden 속성을 사용하세요. 🎜> 3. 입력의 높이와 너비를 조정하세요. 글꼴을 입력할 때 테두리에 달라붙지 않도록 패딩을 사용하여 높이 값을 높여야 합니다. 너비 값의 경우 아름다움을 위해 왼쪽에 약간의 패딩 값을 추가할 수 있습니다.