Existem muitas maneiras de escrever uma caixa de pesquisa. A caixa de pesquisa é um trabalho relativamente detalhado e você deve primeiro calcular sua altura e largura;
Deixe -me pegar a caixa de pesquisa JD como exemplo para fornecer uma breve análise.
O exposto acima é a renderização da caixa de pesquisa final.
Envie o código primeiro >>>>>>>
<span style="color: rgb(255, 0, 255); font-size: 18pt;"><strong>HTML tag:</strong></span> <div><form><input type="text" name="search" placeholder="search practice"><button>Search</button> ------- Like JD.com, other websites, such as Baidu: are used by <input type="submit" name=""> marcação. </morm> </div> estilo css: .center_child1 {width: 538px; altura: 36px; Overflow: Hidden; borda: 2px Solid #BD1D17;}. Center_Child1 Entrada {Width: 456px; altura: 24px; flutuar: esquerda; preenchimento: 6px 2px; ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------ Deixe a cor de fundo da etiqueta de entrada ser transparente. fronteira: nenhuma; ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Botão {Width: 76px; altura: 36px; float: direita; fundo:#bd1d17; borda: nenhuma; cor: #fff; font-size: 15px;}Resumo: Uma caixa de pesquisa tem três partes principais, uma é a parte da caixa de entrada (a esquerda), a outra é a parte do botão de pesquisa (a direita) e uma é as duas grandes divs que as contêm;
1. Primeiro defina a largura, a altura e a cor da borda da grande div. Isso deve ser calculado com antecedência com base nas necessidades pessoais.
2. Flutue o lado esquerdo da entrada (parte da caixa de entrada), respectivamente; Flutuar o lado direito do botão (parte do botão), lembre -se de usar o excesso: oculto; atributo para grandes divs;
3. Ajuste a altura e a largura da entrada. Lembre -se de usar o preenchimento para apoiar seu valor de altura, para que ele não grude na fronteira ao entrar na fonte, aumentando a beleza; Se o valor da largura for um pouco adicionado à esquerda, para a beleza.
O exposto acima é a maneira de escrever a caixa de pesquisa apresentada a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!