Day 1: No need to build the menu layout of the table. I started to fill in the content. First, define the logo image:
Style sheet: # Logo {MARGIN: 0px; padding: 0px; WIDTH: 200px; HEIGHT: 80px ;}
Page code:
The above code should be easy to understand now. Define a logo layer in CSS and call it on the page. It should be noted that, in order to make the web page easier to use, the web standard requires that you add an alt attribute to all images with formal content. This alt attribute is used to describe the function of an image (when the image cannot be displayed, the text is displayed and replaced). Therefore, do not write only meaningless image names.
Next, define the menu.
1. Do not use table menus (vertical)
Let's first look at the final effect of the menu:
- What is website standards
- Benefits of using standards
- How to transition
- Related tutorials
- Tools
- Resources and links
Generally, at least two layers of tables are nested to implement such a menu. The interval line is implemented by setting the background color in td and inserting a 1 px high transparent GIF image; the alternate effect of the background color is implemented by the onmouseover event of td. However, to view the Page code of this menu, you can see only the following sentences:
- What is website standards
- Benefits of using standards
- How to transition
- Related tutorials
- Tools
- Resources and links
No table is used, but no sequence is used.
The secret to the effect of the entire menu isId = "menu", Let's take a look at the definition of menu in CSS:(1) first, the main style of the menu layer is defined:
# Menu {
MARGIN: 15px 20px 0px 15px;/* defines the outer border distance of the layer */
PADDING: 15px;/* defines the layer's internal border as 15px */
BACKGROUND: # dfdfdf;/* defines the BACKGROUND color */
COLOR: #666;/* define the font COLOR */
BORDER: # fff 2px solid;/* defines the BORDER as a 2px white line */
WIDTH: 160px;/* defines the content WIDTH as 160px */
}(2) Next, define the unordered list style:
# Menu ul {
MARGIN: 0px;
PADDING: 0px;
BORDER: medium none;/* Do Not Display Borders */
LINE-HEIGHT: normal;
LIST-STYLE-TYPE: none;
}
# Menu li {BORDER-TOP: # FFF 1px solid; MARGIN: 0px ;}Note: here we use the derived method definition of the id selector (refer to the 7th-day introduction to CSS) for sub-elements in the menu layer.
And
- .LIST-STYLE-TYPE: noneThe default style of the unordered list is not used, that is, the dot is not displayed (we use our own icon to replace the DOT ).BORDER-TOP: # FFF 1px solid;Defines the 1px interval between menus.
(3) define the onmouseover Effect
# Menu li {
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) # c61c6 no-repeat 2px 8px;
COLOR: # fff ;} Explanation:
- "Display: block;"Indicates that tag 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 the small dot of li. "Transparent" indicates that the background is transparent. "2px 8px" indicates that the icon is 2 Px to the left and 8 Px to the top. This sentence can also be split 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 color changes and small icon changes after the mouse moves over the link.
OK. You do not need to use the table menu. You can obviously feel that all the display styles originally written in HTML are stripped and put into the CSS file. The page code saves more than half. It is easy to modify the menu style through CSS.
2. Do not use the table menu (horizontal)The vertical menu is shown above. Can I use li to display the horizontal menu? Of course it works. The following code shows the effect at the top of this page:
Page code
- Home
- About us
- Website standards
- Benefits of standards
- How to transition
- Related tutorials
- Tools
- Resources and links
- FAQs
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 {
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) # c61c6 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 one by one. The key to the horizontal menu is: Definition
- "FLOAT: left;"Statement. Note thatDISPLAY: inline;One sentence indicates that li is forcibly presented as an inline object and the row is deleted from the object. In general, li does not wrap the line. Horizontal arrangement. You can also define the width of each sub-menu in the example to control the menu interval. Well, you can also try it and use li to implement various menu styles.
Tips: if the sum of width of your sub-menu is greater than the width of the layer, the menu will be automatically folded. This principle can be used to create two or three columns of a single unordered list, this is hard to implement in HTML.
Thanks to zhuweiwei for pointing out the bug in the horizontal menu. This article was fixed on April 9, July 6.
