The layout is initially set up, I started to fill the content inside. The first is to define logo pictures: style sheet:
#LOGO {margin: 0px; padding: 0px; width: 200px; height: 80px;} page code:
Next is the definition menu.
1. Don't use the menu (portrait)
Let's first see the ultimate effect of the menu:
Name = "menu" align = "center" marginwidth = "0" marginheight = "0" src = "http://www.pconline.com.cn/pcedu/SJ/WZ/other/0409/other/040909sebs_Menu.html "frameborder =" 0 "width =" 400 "scrolling =" no "height =" 300 ">
Usually, we are at least 2-layer tables to implement such menus, and the interval line is implemented in TD and inserted 1PX high transparent GIF picture implementation; background color alternating effects use TD's onmouseover event implementation. But check the page code of this menu, you will see only as follows:
(1) First define the main style of the MENU layer: #menu {margin: 15px 20px 0px 15px; / * Define the outer frame of the layer * / padding: 15px; / * Define the inner side of the layer is 15px * / background: # DFDFDF; / * Define background color * / color: # 666; / * Define font color * / border: #fff 2px solid; / * Define the border to 2px white line * / width: 160px; / * Define the width of 160px * /}
(2) Secondly define the style of unordered list:
#MENU ul {margin: 0px; padding: 0px; border: medium none; / * does not display border * / line-height: Normal; list-style-type: none;} # menu Li {border-top: #fff 1px Solid; Margin: 0px;}
Description: This is the derived method definition of the ID selector (refer to day 7: Introduction to CSS Getting Started) The style of child elements
(3) Define the 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;} Explain as follows:
"Display: block;" indicates that the 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 the replacement Li Small dot icon. "Transparent" means the background is transparent, "2px 8px" specifies the location of the icon at the left 2px, 8px from the upper side. 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 change and small icon changes when the mouse moves to the link.
OK, the menu that doesn't have a table is implemented. Everyone can feel clear that the performance style written in HTML is all stripped to the CSS file. The page code saves most. It is very simple to modify the menu style through CSS.