Home>

This article uses the Jingdong search box as an example to analyze the writing of the search search box.This article is very good.

Regarding the search box,There are many ways to write it,The search box is a relatively thin job,First calculate his height and width;

Let ’s take the Jingdong search box as an example.Let me analyze it.

The above is the effect of the final search box.

Send the code first>>>>

<span><strong>html tag:</strong></span>
<div>
<form>
<input type="text" name="search" placeholder="search practice">
<button>Search</button>------- Like Jingdong's button tag, other sites,Such as Baidu:is using the<input type="submit" name="">tag.
</form>
</div>
css style:.center_child1 {
width:538px;
height:36px;overflow:hidden;
border:2px solid #bd1d17;
}
.center_child1 input {
width:456px;
height:24px;float:left;padding:6px 2px;---------------- Padding the input to make the font not close to the border and increase the beauty
 background-color:transparent;------- Make the background color of the input label transparent.
border:none;----------------- Go to the input tag, the original border property.
outline:none;
font-size:16px;
}
.center_child1 button {
width:76px;
height:36px;
float:right;
background:#bd1d17;
border:none;
color:#fff;
font-size:15px;
}

Summary:There are three main parts to a search box.One is the input box section (on the left), the other is the search button section (on the right), and there is a two large div containing them;

1. First set the width and height and border color of the large div.This must be calculated in advance according to individual needs.

2. Float left for input (input box part);right for button (button part), remember to use overflow:hidden;attribute for large div;

3. Adjust the height and width of the input. Remember to use padding to support its height value.This will not cling to the border when typing the font,Increase the beauty;width value, a little padding value can be added to the left for beauty.

  • Previous Powerful php paging function
  • Next Summary of using jQuery tree control zTree