Implement web design standards - CSS learning collection (1)
This article is reproduced from: http://blog.9cbs.net/runnerweb/archive/2004/08/05/66330.aspx
/ ********************* horizontal menu ******************** /
#navigation {margin: 0 0 10px; padding: 0; width: 100%; font-size: 90%; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; border-right: 1px solid # CCC; Float: Left; Background: #f
5F
5F
5;
#navigation li {margin: 0; padding: 0; list-style-type: none; display: block; float: left; text-align: center; border-right: 1px solid #ccccccccccccccccccccccccccccccccccccc; Li.first {border-left: 1px solid #ccc;}
#Navigation Li A: LINK, #Navigation Li A: Visited {Display: block; padding: 0.25em 0.5em; font-weight: bold; text-decoration: none; background: #f
5F
5F
5; color: # 999; width: 85px;} # navigation li a: hover, body.home #navigation li.home a, body.about #Navigation li.about a, body.contact # navigation li.contact A, body } arg:;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ************ Portrait menu ******************************** /
(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 the background color * / color: # 666; / * Define the 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
# 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) #C
61C
18 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 turns a button;
"Background: url (./ images / icon_dot_lmenu.gif) Transparent No-repeat 2px 8px;" This sentence defines icons that replace the small dots of Li. "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.
