Inline/block-level vertical centering, image text substitution, and two-level drop-down menu creation

After nearly one months of learning HTML and CSS, the use of HTML and div+css simple static Web page layout has a certain foundation, but for the layout of the Web page analysis, the use of some properties there is a problem, I hope in the future learning can be improved, Here is a summary of the recent learning situation and summarized:

Horizontal and vertical centering of elements and block-level elements in a row

(i) CSS sets the horizontal center of elements in the line

1. div{text-align:The inline elements within the center}/*div are horizontally centered * /

CSS sets the vertical center of elements in the line

1. div{Height:30px; line-height:30px} the inline elements within the/*div are vertically centered * /

PS: Of course, if both the horizontal center and vertical center, then a comprehensive

1. div{text-align:Center; height:30px; line-height:30px}

(ii) CSS sets the horizontal center of block-level elements

1. Div p{margin:0 Auto; Width :500px}/ * block-level element p Be sure to set the width,
2. To be equal to the div parent container horizontally */

CSS sets the vertical center of block-level elements

1. div{width:500px} /*div Parent container Set Width * /
2. Div p{margin:0 aut0; height:30px; line-height:30px}/ * block-level element P can also be added a width,
3. To achieve a horizontal center effect relative to the div parent container */

What do you mean inline elements?

Common span, A, lable, strong, B, and other HTML tags are inline elements

By default, none of the inline elements can set width, height, margins of margin, etc.

Of course, this is not absolute, through CSS can make any inline elements into block-level elements! Like what:

1. span{display: Block} /*span is now set to block-level elements * /

What is block-level element?

Common Div, p, Li, H1, H2, H3, H4 and other HTML tags are block-level elements

Of course, this is not absolute, through the CSS can make any block-level elements into inline elements! Like what:

1. H1{display:the inline} /*h1 is then set to the inline element * /

Second, HTML text replacement

If you want to replace text with an image, and you want the reader to read the text, colleagues also want the text to be visible when the image is not available.

Solution:

Inserts an empty block element containing the text you want to replace with an image. Set this image to a background image of span. Positions the block relative to the absolute span. This shows that span is in front of the block. Adjust the size of the block and span to fit the image. Because the block and span are the same size, and span is in front of the block, the background image of span overwrites the text in the block. If the image is not available, the browser sets the background of span to transparent, allowing the text to appear. Give a unique ID to the block that contains the text you want to replace, and give it a style, as follows.

(1) using Position:relative; for block positioning, such a background image can be placed above the text;

(2) Use width and height to set the size of the block to match the image size;

(3) Use padding:0; Remove the fill so that the text can be displayed;

(4) Use Overflow:hidden; Make sure the long text does not appear, but be aware that if the image cannot be displayed, the long text displayed will be truncated. Insert a blank in the block and give it a style, as follows. n Use Position:absolute, left:0, and top:0; position the image on the text in the block. n Use width and height to set the dimensions to match the image. n use margin:0; remove edges so that the text can be displayed. n Use Background-image:url ("FILE. EXT ") to load the image. n use Background-repeat:no-repeat to ensure that the image is not duplicated. Mode HTML TEXT CSS

#UNIQUE-id {position:relative; padding:0; overflow:hidden; width:image_width; height:image_height;} #UNIQUE-id span {p Osition:absolute; left:0; top:0; margin:0; Width:image_width; Height:image_height; Background-image:url ("FILE. EXT "); Background-repeat:no-repeat; Scope of application This pattern applies to any block element, floating element, absolute positioning, or fixed positioning element.

Third, the navigation bar level two drop-down menu making

1. Home we're looking at Dreamweaver or other editors, creating a navigation menu called Nav

   <div class= "NAV" >

   <ul>

   <li><a href= "#" > Column one </a></li>

   <li><a href= "#" > Columns two </a></li>

   <li><a href= "#" > Column three </a></li>

   <li><a href= "#" > Columns four </a></li>

   <li><a href= "#" > Columns five </a></li>

   </ul>

   </div>

3. 2

   Now we add styles to NAV, first remove the default margin and padding, and then remove the default underline for the <ul>< li> label List-style style and <a> label. Then add the appropriate style (add it to your needs) to beautify it, such as the following style:

   <style type= "Text/css" >

   * {margin:0; padding:0;}

   UL, Li {list-style:none;}

   a {text-decoration:none;}

   . nav {border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}

   . Nav ul li {float:left;}

   . Nav ul Li a {width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; Background: #eee; Color: #666;}

   . Nav ul li a:hover{color: #f00;}

   </style>

   Open Page Preview effect

4. Like this, a menu horizontal menu is built, down we give column one, column two, column three, add two Level drop-down menu

   <div class= "NAV" >

   <ul>

   <li><a href= "#" > Column one </a>

   <ul>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   </ul>

   </li>

   <li><a href= "#" > Columns two </a>

   <ul>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   </ul>

   </li>

   <li><a href= "#" > Column three </a>

   <ul>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   </ul>

   </li>

   <li><a href= "#" > Columns four </a></li>

   <li><a href= "#" > Columns five </a></li>

   </ul>

   </div>

6. 4

   After adding the two level column, now we start to add CSS style, first to the <li> tag under the <ul> tag to add relative positioning, and then remove the next <li> label do floating style, and then modify the <a> tag, such as the style:

   . Nav ul Li ul {position:absolute;}

   . Nav UL Li ul li {float:none;}

   . Nav ul Li ul li a {border-right:none; border-top:1px dotted #ccc; background: #f5f5f5;}

   We refresh the page preview under the effect

8. 5

   Next we hide the two level down menu, and give it a mouse sliding effect, so that when the mouse slide to the main column, the level two down menu display, the style is as follows:

   . Nav ul Li ul {position:absolute; display:none;}

   . Nav UL Li ul li {float:none;}

   . Nav ul Li ul li a {border-right:none; border-top:1px dotted #ccc; background: #f5f5f5;}

   . Nav ul li:hover ul{Display:block;}

   Preview the effect again, as shown in:

9. 6

   At this point, the horizontal level two drop-down menu on the completion of the production, here attached all the code, to facilitate the reference of friends, thank you friends of the browsing.

   <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

   <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>

   <title> Horizontal Level Two drop-down menu </title>

   <style type= "Text/css" >

   * {margin:0; padding:0;}

   UL, Li {list-style:none;}

   a {text-decoration:none;}

   . nav {border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}

   . Nav ul li {float:left;}

   . Nav ul Li a {width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; Background: #eee; Color: #666;}

   . Nav ul li a:hover{color: #f00;}

   . Nav ul Li ul {position:absolute; display:none;}

   . Nav UL Li ul li {float:none;}

   . Nav ul Li ul li a {border-right:none; border-top:1px dotted #ccc; background: #f5f5f5;}

   . Nav ul li:hover ul{Display:block;}

   </style>

   <body>

   <div class= "NAV" >

   <ul>

   <li><a href= "#" > Column one </a>

   <ul>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   </ul>

   </li>

   <li><a href= "#" > Columns two </a>

   <ul>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   </ul>

   </li>

   <li><a href= "#" > Column three </a>

   <ul>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   <li><a href= "#" > Two-level column </a></li>

   </ul>

   </li>

   <li><a href= "#" > Columns four </a></li>

   <li><a href= "#" > Columns five </a></li>

   </ul>

   </div>

   </body>

   END

Precautions

• This kind of writing does not support IE6 browser, IE6 only supports a hover under a, so the correct display is not possible, but Microsoft has eliminated the IE6 browser, but if you are still in use, then add the corresponding JS implementation.

　　

　　

Inline/block-level vertical centering, image text substitution, and two-level drop-down menu creation