Left logo right ad picture layout div CSS Floating layout instance around

Left logo right ad picture layout (div css Floating layout instance)

General Web page Head is the logo logo on the left side of the website, the right for advertising pictures or phone numbers pictures, here DIVCSS5 to float floating use example layout introduction.

Need Div+css layout case
Need div+css layout case (Zoom out)
First, DIVCSS5 instance layout technical point description-TOP

1, the picture cut out the description: First cut the left logo picture, the right advertisement picture (transduction attention does not affect the picture quality situation as far as possible width height size cut small).
2, using Float:left and Float:right layout: Generally encountered content on the left and on the right, usually using CSS float floating layout
3, Logo layout: General logo image layout as a CSS background picture layout, the use of H1 tags, corresponding h1 tag content on the site name (company name, etc.) text, and add hyperlink a tag, At this point, the use of CSS indentation hidden text at the same time the hyperlink is not lost (so the layout is conducive to search engine optimization OH).
4, right advertising image: Directly in the HTML using the IMG tag.
Second, to use CSS style word list-TOP

1. Height setting
2. Width setting
3, Float set float (float:left, float:right)
4, overflow clear floating (Overflow:hidden)
5, Margin Set layout Center (margin:0 Auto)
What style to use is parsed by the artwork and not what style you want to set.
Third, CSS instance-TOP

1, first cut out the left logo picture and the right advertising picture Music mattress (here no longer cut diagram demo, in the VIP tutorial has cut diagram tutorial, I believe to participate in DIVCSS5 training students in the classroom has learned to cut pictures)

PS cut out two picture material
Cut out two picture material

2, inductive DIVCSS5 initialization template, based on the instance layout

3, copy the picture into the template images folder (Total 2 photos)

4, because the layout left on the right, so there must be an outer box, Chinese body acoustic wave we named #header (HTML5 header label), from the Art analysis (software analysis) to obtain a width of 700px, layout center.

5. Layout HTML code on a template basis

<div id= "Header" >
<H1 id= "logo" ><a href= "http://www.tiganyinyue.com/" > Chinese body Sense music sofa </a><div class= "Right-ad" ></div>
</div>

Above settings <div id= "header" ></div> layout center, Body Sense Music mattress

6. Layout CSS code on a template basis

#header {margin:15px auto; width:700px; Overflow:hidden}
//DIVCSS5 Set layout centered, width and with clear floating function Overflow:hidden, not set height */ br> h1#logo{float:left; height:70px; Background:url (logo.jpg) no-repeat; width:174px}
H1#logo a{display:block; wid th:100%; height:100%; TEXT-INDENT:-9999PX}
/* DIVCSS5 set text-indent hidden text, Display:block; let a block to set the width height in effect */
. Right-ad{float:right}
/* Only need to be set to the right */