The layout was initially set up and I began to fill the contents inside. The first is to define the logo picture:
Style sheet: #logo {margin:0px;padding:0px; width:200px; height:80px;}
Page code:<div id= "logo" ><a title= "web designer" href= "http://www.w3cn.org/" ></a></div>"
The above code should now be easy to understand. First define a layer of the logo in the CSS, and then call it in the page. It is important to note that in order for the Web page to be more user-friendly, the Web Standard requires that you give all the pictures that are official content, plus an alt attribute. This alt attribute is used to illustrate the role of the picture (when the picture cannot be displayed, the alternate text is displayed), so don't just write meaningless picture names.
Next is the definition menu.
1. Menu without table (portrait)
Let's look at the final effect of the menu:
- What is a website standard
- Benefits of using standards
- How to transition
- Related tutorials
- Tools
- Resources and Links
Generally, we have at least nested 2-tier table to implement such a menu, the interval line with the background color in the TD and insert a 1px high transparent GIF image implementation, the alternate effect of the background color with TD onmouseover event implementation. But looking at the page code of this menu, you will see only the following sentences:
<div id= "Menu" >
<ul>
<li><a title= "website standard" href= "http://www.w3cn.org/webstandards.html" > What is website standard </a></li>
<li><a title= "Standard benefits" href= "http://www.w3cn.org/benefits.html" > Use criteria Benefits </a></li>
<li><a title= "How to Transition" href= "http://www.w3cn.org/howto.html" > How to Transition </a></li>
<li><a title= "Related tutorials" href= "http://www.w3cn.org/tutorial.html" > Related Tutorials </a></li>
<li><a title= "Tools" href= "http://www.w3cn.org/tools.html" > Tools </a></li>
<li><a title= "Resources and Links" href= "http://www.w3cn.org/resources.html" > Resources and Links </a></li>
</ul>
</div>
No table, but with no sequence <li>, the whole menu effect of the implementation of the secret is completely id= "menu", we look at the CSS definition of menu:
(1) First defines the main style of the menu layer:
#menu {
margin:15px 20px 0px 15px; /* Define the outer frame distance of the layer * *
padding:15px; /* Defines the inner border of the layer as 15px*/
BACKGROUND: #dfdfdf; /* Define Background color * *
COLOR: #666; /* Define Font Color * *
BORDER: #fff 2px solid; /* Defines a border of 2px white line * *
width:160px; /* Defines the width of the content as 160px*/
}
(2) Second, define the style of unordered lists:
#menu ul {
margin:0px;
padding:0px;
Border:medium none; /* Do not display a border * *
Line-height:normal;
List-style-type:none;
}
#menu li {border-top: #FFF 1px solid; margin:0px;}
Description: Here is a derivation of the ID selector definition (refer to the 7th day: Introduction to CSS) the child elements <ul> and <li> styles in the menu layer. List-style-type:none A sentence that does not use the default style of unordered tables, that is, not displaying small dots (we use our own icons instead of dots). border-top: #FFF 1px solid, the 1px spacing line between menus is defined.
(3) Define onmouseover effect
#menu Li a {
padding:5px 0px 5px 15px;
Display:block;
Font-weight:bold;
Background:url (images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
width:100%;
COLOR: #444;
Text-decoration:none;
}
#menu li a:hover {background:url (images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff; }
Explained as follows:
- "Display:block;" Indicates that label A is displayed as a block-level element, so that the link becomes a button;
- "Background:url (images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;" This sentence defines an icon that replaces the small dot of li. "Transparent" refers to the background is transparent, "2px 8px" specifies the location of the icon is from the left 2px, from the top 8px. This sentence can also be divided into four sentences: "Background-image:url (images/icon_dot_lmenu.gif);" BACKGROUND-POSITION:2PX 8px; Background-repeat:no-repeat; background-color:transparent; "
- "#menu li a:hover" defines the changes in color and small icons after the mouse moves to the link.
OK, this is done without the Table menu. You can obviously feel that the original writing in HTML in the performance style of all stripped into the CSS file. The page code saves more than half. It's easy to modify the menu style with CSS.
2. Menu without table (Landscape)
The above is a vertical menu, if you want to display a horizontal menu, with Li can also? Of course it can, the following code, the effect on the top of this page:
Page code
<div id= "submenu" >
<ul>
<li id= "One" ><a title= "Home" href= "http://www.w3cn.org/" >Home</a></li>
<li id= "Two" ><a title= "About Us" href= "http://www.w3cn.org/aboutus.html" > About Us </a></li>
<li id= "three" ><a title= "website standard" href= "http://www.w3cn.org/webstandards.html" > website standard </a></li>
<li id= "Four" ><a title= "the benefits of the standard" href= "http://www.w3cn.org/benefits.html" > The benefits of the standard </a></li>
<li id= "Five" ><a title= "How to Transition" href= "http://www.w3cn.org/howto.html" > How to Transition </a></li>
<li id= "Six" ><a title= "related tutorials" href= "http://www.w3cn.org/tutorial.html" > Related Tutorials </a></li>
<li id= "Seven" ><a title= "Tools" href= "http://www.w3cn.org/tools.html" > Tools </a></li>
<li id= "Eight" ><a title= "Resources and Links" href= "http://www.w3cn.org/resources.html" > Resources and Links </a></li>
<li id= "Nine" ><a title= "FAQ" href= "http://www.w3cn.org/faq.html" > FAQ </a></li>
</ul>
</div>
Style sheet Code
#submenu {
margin:0px 8px 0px 8px;
padding:4px 0px 0px 0px;
BORDER: #fff 1px solid;
BACKGROUND: #dfdfdf;
COLOR: #666;
height:25px; }
#submenu ul {
Clear:left;
margin:0px;
padding:0px;
border:0px;
List-style-type:none;
Text-align:center;
Display:inline;
}
#submenu Li {
Float:left;
Display:block;
margin:0px;
padding:0px;
Text-align:center}
#submenu Li a {
Display:block;
padding:2px 3px 2px 3px;
Background:url (images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
Font-weight:bold;
width:100%;
COLOR: #444;
Text-decoration:none;
}
#submenu Li A:hover {
Background:url (images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff; }
#submenu ul li#one A {width:60px}
#submenu ul li#two A {width:80px}
#submenu ul li#three A {width:80px}
#submenu ul li#four A {width:90px}
#submenu ul li#five A {width:80px}
#submenu ul li#six A {width:80px}
#submenu ul li#seven A {width:60px}
#submenu ul li#eight A {width:90px}
#submenu ul li#nine A {width:80px}
The above code is not analyzed individually. The key to the Landscape menu is: "Float:left" when defining <li> style; Statement. In addition, pay attention to the UL definition of display:inline; a sentence to the Li force as an inline object presentation, delete the line from the object, popular say is Li do not change lines. Achieve horizontal arrangement. You can also define the width of each submenu as an example, and control the spacing of the menus. Well, you can also try it and use Li to implement a variety of menu styles.
Tips: If the width of your submenu is greater than the width of the layer, the menu will automatically fold, using this principle to achieve a single unordered list of 2 columns or 3 columns of typesetting, which is the original HTML difficult to achieve.
Thanks to Zhuweiwei for pointing out the horizontal menu bug, this article was amended July 6.
