如何使用CSS来进行网页排版(二)

　　(1)首先定义了menu层的主要样式:

　　以下是引用片段：

　　#menu{

　　MARGIN:15px20px0px15px;/*定义层的外边框距离*/

　　PADDING:15px;/*定义层的内边框为15px*/

　　BACKGROUND:#dfdfdf;/*定义背景颜色*/

　　COLOR:#666;/*定义字体颜色*/

　　BORDER:#fff2pxsolid;/*定义边框为2px白色线条*/

　　WIDTH:160px;/*定义内容的宽度为160px*/

　　}

　　(2)其次定义无序列表的样式：

　　以下是引用片段：

　　#menuul{

　　MARGIN:0px;

　　PADDING:0px;

　　BORDER:mediumnone;/*不显示边框*/

　　LINE-HEIGHT:normal;

　　LIST-STYLE-TYPE:none;

　　}

　　#menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;}

　　说明：这里用的是id选择器的派生方法定义(参考第7天：CSS入门的介绍)了在menu层中的子元素

和
• 的样式。LIST-STYLE-TYPE: none一句表示不采用无序列表的默认样式，即：不显示小圆点（我们后面用自己的图标来代替小圆点）。BORDER-TOP: #FFF 1px solid;则定义了菜单之间的1px间隔线。

  　　(3)定义onmouseover效果

  　　以下是引用片段：

  　　#menulia{

  　　PADDING:5px0px5px15px;

  　　DISPLAY:block;

  　　FONT-WEIGHT:bold;

  　　BACKGROUND:url(images/icon_dot_lmenu.gif)transparentno-repeat2px8px;

  　　WIDTH:100%;

  　　COLOR:#444;

  　　TEXT-DECORATION:none;

  　　}

  　　#menulia:hover{BACKGROUND:url(images/icon_dot_lmenu2.gif)#C61C18no-repeat2px8px;

  　　COLOR:#fff;}

  　　解释如下：

  　　"display:block;"表示将标签a当作块级元素来显示，使得链接变成一个按钮；

  　　"BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;"这一句定义了替代li的小圆点的图标。"transparent"指背景为透明，"2px 8px"指定图标的位置是距左边2px，距上边8px。这一句也可以拆分写成四句："BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent;"

  9 7 3 1 2 3 4 5 6 7 8 4 8 :
  
  
    把此文章收藏到：