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

This article mainly introduces "what is the method of floating layout around div css". In daily operation, I believe that many people have doubts about the method of floating layout around div css. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "what is the method of floating layout around div css?" Next, please follow the editor to study!

Div+css layout case rendering is required (zoomed out)

1. Technical description of DIVCSS5 instance layout

1, picture cut out instructions: first cut the left logo picture, the right advertising picture (cut the picture to pay attention to do not affect the picture quality as far as possible width and height size cut small).

2. Use float:left and float:right layout: generally encounter content on the left and right, usually use css float floating layout

3, logo layout: general logo picture layout as the css background picture layout, using H2 tags, corresponding to H2 tag content marked with the site name (company name, etc.) text, and add the hyperlink a tag, then use CSS indent hidden text while the hyperlink is not lost or effective (this layout is conducive to search engine optimization).

4. Advertising picture on the right: use the img tag directly in html.

Second, to use the CSS style word list

1. Height sets the height

2. Width sets the width

3. Float settings float (float:left, float:right)

4. Overflow clear float (overflow:hidden)

5. Margin sets the layout center (margin:0 auto)

What style is used is analyzed in the art drawing, not what style you want to set.

3. Css instance

1. First cut out the LOGO image on the left and the advertisement picture on the right (no longer cut image demonstration here, there is a cut picture tutorial in the VIP tutorial, I believe that students participating in DIVCSS5 training have learned to cut pictures in class)

Cut out two pictures.

2. Introduce the DIVCSS5 initialization template, based on which the instance layout is carried out.

3. Copy the picture into the template images folder (2 pieces in total)

4. Because the layout is on the left and right, there must be an outer box, named # header (html5 header tag). From the graphic analysis (software analysis), it is concluded that the width is 700px and the layout is in the middle.

5. Lay out the HTML code based on the template

DIVCSS5 website

The above settings center the layout, set the logo on the left side of the layout, use the picture as the background, and set the right div box to hold the advertising picture.

6. Lay out the CSS code based on the template

# header {margin:15px auto; width:700px; overflow:hidden} / * DIVCSS5 setting layout is centered, width and with clear floating function overflow:hidden, do not set height * / h2#logo {float:left; height:70px; background:url (logo.jpg) no-repeat; width:174px} h2#logo a {display:block; width:100%; height:100%; text-indent:-9999px} / * DIVCSS5 set text-indent hidden text, display:block Let a form a block so that the width and height can be set to take effect at the same time * / .right-ad {float:right} / * just set to the right * /

7. Screenshot of layout effect

Screenshot of css div layout case

At this point, the study of "what is the method of floating layout around div css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.