Shulou(Shulou.com)06/02 Report--

This article mainly explains the "DIV+CSS how to achieve the search box layout", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "DIV+CSS how to achieve the search box layout" bar!

Screenshot of search form control effect

I. the idea of search box layout

1. Actual search box form layout effect:

Screenshot of CSS layout instance

2. Layout thought

CSS layout search forms differ from other form content layouts in that they use Web form control tags. As the above figure of the search form layout, we first cut out the input box and search button image as the background image (here you can cut out as the form layout background picture), and then through the input tag to set class style, control the input box border, css background, width, height, css font size and other styles, and then set the form control button style such as css border, background, text hiding and other css styles.

Summary: cut out the material of the form art drawing as the background, and then set different class styles to the input box and button form to control the style to achieve the same effect as the art drawing and have the form function.

Extended reading:

1 、 html form

2 、 html input

3. Html drop-down menu beautification-SELECT beautification

4. Html upload control beautification-file beautification

2. Cut the graph

Use PS to cut out the desired form search box image material. Cutting pictures need to pay attention to following the experience. Cut pictures should be small and accurate.

The specific PS cut method steps will not be introduced here.

Example PSD file + cut image material download: this compression package includes psd file and PS cut image material in the case.

Download now (30.135KB)

III. CSS DIV layout preparation

1. Copy a DIV+CSS initialization template

This template includes html file + CSS file, and initializes the commonly used html tag style (understand the necessity of CSS initialization), and html does html to introduce CSS file link.

Name the unzipped copied project file "- search"

Project file naming and file structure

There is no downloadable initialization template:

Download address: CSS initialization template

This template includes two coded versions, GBK and UTF-8, and you can choose one of them.

2. Copy the cut material, such as the project images folder.

Put the "- so-bg.gif" picture material into the project "images" picture folder

Put the picture into the images picture folder and take a screenshot of the example.

3. Basic settings

Use the DW software to open "index.html" in the project "- search" folder

DW opens the index.html html file

1) JS is not used in this example, so you can remove "" from the html source code.

2) modify the html title and modify the search form with the title of DIVCSS5 instance

Screenshot of modified html foundation

3) remove the extra CSS code that has nothing to do with this layout

Because the layout content of this example is relatively simple, some of the preset CSS codes are not used. To delete the simplified code, you need to delete the CSS code as follows:

.red, .red a {color:#F00;} .lan, .lan a {color:#1E51A2;} .dis {display:block;} .undis {display:none;} .lf {float:left;} .rt {float:right;} .pt5 {padding-top:5px;} .box {margin:0 auto; width:100%; overflow:hidden} IV. Start laying out the instance

Description of DIVCSS5 instance:

Because there is only the layout of the "search box" here, we set the CSS of the new DIV box to be named "# search-box" for the layout search box module layout. Name the input box CSS ".input-box" and the search button CSS ".button".

1. Layout search box

We use PS to get the width and height of the entire search box that needs to be laid out (we have a tutorial on how to get accurate values in the seminar room). Here is the easiest way to get it. Look at the search box image "- so-bg.gif" that we cut out earlier to get a width of "326px" and a height of "29px".

1), outermost search box CSS code:

# search-box {width:326px;height:29px;background:url (- so-bg.gif) no-repeat 0 0}

Explanation: the width and height are set here, and the search box is set to cut out the output image as the background.

2), outermost search box html code snippet:

2. Layout input box

From the figure, we observe that the input box is on the right side of the layout, and the default background of the input box control is opaque white. At this time, we need to set the input box not to display the background (background:none). By default, the input box has a border, and when we use the background picture, we need to get the frame (border:0). Finally, we get the width and height of the input box through PS. The width should not be too wide so that the user does not fill in too much text beyond the background image.

1). According to the above findings, the corresponding CSS code:

. input-box {float:left; width:220px; height:29px; line-height:29px

Padding-left:11px; border:0; background:none; text-align:left; font-size:14px}

Explanation:

Float:left settings input box layout is left

Width:220px; height:29px; line-height:29px; sets input box width, height, css row height (which can be accurately obtained using PS)

Padding-left:11px; this is to make the text entered in the input box have a certain distance from the left (can be accurately obtained by using PS)

Border:0; background:none; settings border and background are not displayed

Text-align:left; font-size:14px sets css text to the left and css font size to 14px

2), corresponding HTML code snippet

Because the input box is in the "search-box" box, put the input box border into the "search-box" box, and use "class=" input-box "" in the input box label to introduce the stylesheet set for this input box.

3. Layout search button

According to analysis, the button on the right, background and frame we do not need to show, so the same set button border and background style does not show, button height and width we can accurately get according to PS, "search" the word itself background picture with, this time button does not need to show text, this time we can use text-indent to hide text (learn more about css text-indent indentation style).

1). According to the analysis, the corresponding button style layout CSS code is obtained:

.button {float:right; border:0; background:none; text-indent:-999px; width:70px; height:29px; cursor:pointer}

Explanation:

Float:right; object CSS layout to the right

Border:0; background:none; does not let the button background and border display

Text-indent:-999px; hides button text (css hides the text above the picture)

Width:70px; height:29px; sets width and height (can be accurately obtained using PS)

Cursor:pointer sets the mouse pointer to change to a "finger" shape when the mouse passes over the hover button.

2) corresponding HTML layout snippet code:

Final effect picture:

The search box form instance finally completes the screenshot of the effect.

5. Complete CSS+HTML example code

1. Css code:

@ charset "utf-8"

/ * Please keep DIVCSS5 www..com for after-sales maintenance and service * /

Body, div,form, input, button, select, textarea {margin:0; padding:0

Font-style: normal;font:12px/22px "\ 5B8B\ 4F53", Arial, Helvetica, sans-serif;}

Ol, ul, li {list-style: none;}

Img {border: 0; vertical-align:middle;}

Body {color:#000000;background:#FFF; text-align:center;}

.clear {clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;}

A {color:#000000;text-decoration:none;}

A:hover {color:#BA2636;text-decoration:underline; border:0}

# search-box {width:326px;height:29px

Background:url (- so-bg.gif) no-repeat 0; margin:0 auto}

. input-box {float:left; width:220px; height:29px

Line-height:29px; padding-left:11px; border:0; background:none

Text-align:left; font-size:14px}

.button {float:right; border:0; background:none; text-indent:-999px

Width:70px; height:29px; cursor:pointer}

/ * css comment: in order to facilitate the display of the website in the article, the CSS will be wrapped and typeset, which will not affect the effect of use and style * /

2. Html code:

Search form for DIVCSS5 instance

Thank you for your reading, the above is the content of "DIV+CSS how to achieve the layout of the search box", after the study of this article, I believe you have a deeper understanding of how to achieve the layout of the search box in DIV+CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.