検索ボックスを書く方法はたくさんあります。検索ボックスは比較的詳細なジョブであり、最初にその高さと幅を計算する必要があります。
簡単な分析をするための例として、JD検索ボックスを使用してみましょう。
上記は最終的な検索ボックスレンダリングです。
最初にコードを送信>>>>>>
<Span style = "color:rgb(255、0、255); font-size:18pt;"> <strong> htmlタグ:</strong> htmlタグ:</strong> </span> <div> <form> <input type = "text" name = "search" placeholder = "search"> <button> search </button> ------- jd.comなどの< </form> </div> cssスタイル:.center_child1 {width:538px; height:36px;オーバーフロー:隠された;境界線:2pxソリッド#BD1D17;}。center_child1 input {width:456px; height:24px;フロート:左;パディング:6px 2px; ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- background-color:transparent; ------入力ラベルの背景色を透明にします。国境:なし; ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- outline:none;font-size:16px;}.center_child1 Button {width:76px; height:36px; float:right; background:#bd1d17; border:none; color:#fff; font-size:15px;}概要:検索ボックスには3つの主要な部分があります。1つは入力ボックスパーツ(左)、もう1つは検索ボタンパーツ(右)、1つはそれらを含む2つの大きなDivです。
1.最初に、大きなdivの幅、高さ、境界色を設定します。これは、個人的なニーズに基づいて事前に計算する必要があります。
2。入力の左側(入力ボックスパーツ)をそれぞれフローチします。ボタンの右側(ボタンパーツ)に浮かぶ、オーバーフロー:非表示を使用することを忘れないでください。大規模なDivの属性。
3.入力の高さと幅を調整します。パディングを使用して高さの値をサポートすることを忘れないでください。そうすれば、フォントに入るときに境界線に固執しないようにし、美しさを増やします。美しさのために、幅の値が左にわずかに追加されている場合。
上記は、編集者が紹介した検索検索ボックスを作成する方法です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!