The layout was initially set up and I started filling in the contents. The first is to define the logo image:
Style sheet: #logo {margin:0px;padding:0px; width:200px; height:80px;}
Page code:
The above code should now be easy to understand. The first layer of the logo is defined in the CSS, and then it is called in the page. It should be explained that, in order to make the Web page more user-friendly, web standards require you to all, belong to the official content of the picture, plus an alt attribute. This alt attribute is used to describe the function of the picture (the alternate text is displayed when the picture cannot be displayed), so don't just write a meaningless picture name.
Next is the definition menu.
1. Menus without tables (portrait)
Let's start by looking at the menu's final effect:
- What is site standard
- Benefits of using standards
- How to transition
- Related tutorials
- Tools
- Resources and Links
Usually we nested at least 2 layers of tables to implement such a menu, the spacer line in the TD set the background color and insert 1px high transparent GIF image implementation; The alternating effect of background color is implemented by TD onmouseover event. But to view the page code of this menu, you will see only the following sentences:
- What is site standard
- Benefits of using standards
- How to transition
- Related tutorials
- Tools
- Resources and Links
No table is used, and no sequence is used
, the secret of the entire menu's effect is entirelyid= "Menu", let's look at the definition of menu in CSS:(1) The main style of the menu layer is defined first:
#menu {
margin:15px 20px 0px 15px; /* Define the outer frame distance of the layer */
padding:15px; /* Define the inner border of the layer as 15px*/
BACKGROUND: #dfdfdf; /* Define background color */
COLOR: #666; /* Define Font Color */
BORDER: #fff 2px solid; /* Define a border of 2px white line */
width:160px; /* The width of the defined content is 160px*/
} (2) Next define the style of the unordered list:
#menu ul {
margin:0px;
padding:0px;
Border:medium none; /* Do not show borders */
Line-height:normal;
List-style-type:none;
}
#menu li {border-top: #FFF 1px solid; margin:0px;} Description: Here is a derivation method definition for the ID selector (refer to the 7th day: Introduction to CSS) the child elements in the menu layer
And
- The style.List-style-type:noneA sentence that does not take the default style of the unordered list, that is: do not display small dots (we use our own icon to replace the dot).border-top: #FFF 1px solid;The 1px interval 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; } The explanations are as follows:
- "Display:block;" Indicates that label A is displayed as a block-level element, making the link a button;
- "Background:url (images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;" This sentence defines the icon that replaces Li's small dot. "Transparent" refers to the background is transparent, "2px 8px" specifies the position 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 changes in color and small icons when the mouse moves over the link.
OK, this is done without a table menu. You can obviously feel that the original written in the HTML expression style all stripped into the CSS file. The page code is saved in half. It's easy to modify the menu style through CSS.
2. Menu without table (Landscape)
Above is the vertical menu, if you want to display the landscape menu, with Li also can? Yes, of course, here is the code, the effect is on the top of this page:
Page code
- Home
- About Us
- Website Standard
- The benefits of the standard
- How to transition
- Related tutorials
- Tools
- Resources and Links
- Problems
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 a Landscape menu is: Define
- Style "float:left;" Statement. Also pay attention to the display:inline in the UL definition ; A sentence means that Li is forced to be presented as an inline object, removing rows from the object, which is popular to say that Li does not break the line. Achieve horizontal alignment. You can also define the width of each submenu, as in the example, to control the interval of the menu. Well, you can also try it out and use Li to implement a variety of menu styles.
Tips: If the total width of your submenu is greater than the width of the layer, the menu will automatically wrap, using this principle to achieve a single unordered list of 2 columns or 3 column layout, which is difficult to achieve the original HTML.
Thanks to Zhuweiwei for pointing out the horizontal menu bug, this article was revised July 6.
-
