Go语言视频零基础入门到精通

javalearner

无序列表UL在网页中除显示树状结构外，最常用的用途就是作为导航栏的菜单使用，而它的样式通过CSS来设定，这种把样式与数据分离的做法既能有丰富多彩的效果，又易于变换，值得好好研究一下。

无序列表的默认效果

  
  
   
   
     
   

     
   
  
  

无序列表的代码


  
<
ul
>


<
li
><
a
href
="#"
>
菜单001
</
a
></
li
>


<
li
><
a
href
="#"
>
菜单002
</
a
></
li
>


<
li
><
a
href
="#"
>
菜单003
</
a
></
li
>


<
li
><
a
href
="#"
>
菜单004
</
a
></
li
>


<
li
><
a
href
="#"
>
菜单005
</
a
></
li
>


<
li
><
a
href
="#"
>
菜单006
</
a
></
li
>


<
li
><
a
href
="#"
>
菜单007
</
a
></
li
>


<
li
><
a
href
="#"
>
菜单008
</
a
></
li
>


</
ul
>

竖向导航栏的实现效果


上边是竖向导航栏的效果，这在许多网站上很常见

取消无序列表的列表效果

如前页，如果不加设置，无序列表的li子项前会出现圆点效果，这对导航栏来说是需要取消的。
取消列表效果使用对ul进行列表样式设置就可以了，代码如下：


  
list-style-type:none;

无序列表菜单项的按钮效果实现

设置无序列表子项的背景，就能使无序列表子项出现方块效果。代码举例如下：


  
background:#efb57c;

使无序列表子项出现按钮的效果，对边框设置进行特殊设置即可，具体如下：


  
border:2px outset #efb57c;

无序列表菜单项的动态效果实现

实现动态效果，对ul中的链接状态进行设置即可，代码如右。



  
ul a:link
{

background
:
#efb57c
;

border
:
2px outset #efb57c
;


}


ul a:visited
{

background
:
#efb57c
;

border
:
2px outset #efb57c
;


}


ul a:focus
{

background
:
#daa670
;

border
:
2px outset #daa670
;

color
:
black
;


}


ul a:hover
{

background
:
#daa670
;

border
:
2px outset #daa670
;

color
:
black
;


}


ul a:active
{

background
:
#bb8e60
;

border
:
2px outset #bb8e60
;


}

实现上述效果的全体代码


  
ul
{

     margin
:
0
;

     padding
:
0
;

     list-style-type
:
none
;


}

  
ul a
{

     display
:
block
;

     padding
:
2px
;

     text-align
:
center
;

     text-decoration
:
none
;

     width
:
130px
;

     margin
:
2px
;

     color
:
#8d4f10
;


}


ul a:link
{

     background
:
#efb57c
;

     border
:
2px outset #efb57c
;


}


ul a:visited
{

     background
:
#efb57c
;

     border
:
2px outset #efb57c
;


}



ul a:focus
{

     background
:
#daa670
;

     border
:
2px outset #daa670
;

     color
:
black
;


}


ul a:hover
{

     background
:
#daa670
;

     border
:
2px outset #daa670
;

     color
:
black
;


}


ul a:active
{

     background
:
#bb8e60
;

     border
:
2px outset #bb8e60
;


}

  
li
{
   
     padding-left
:
10px
;


}

横向菜单的实现效果

使用无序列表制作横向菜单也很常见，例图如下：


将无序列表默认的纵向改为横向

无序列表子项默认是纵向的，需要将它改为横向，要实现这里只要让子项li浮动起来即可，如同设置一行内放置多个div一样。代码如下：


  
#menubar li
{

      float
:
left
;


}

其它颜色，背景设置等不再赘述。

横向菜单CSS设置代码



  
#menubar
{

margin
:
0px
;

width
:
100%
;

text-align
:
right
;


}


#menubar ul
{

margin
:
0
;

padding
:
0
;

list-style-type
:
none
;


}


#menubar li
{

float
:
left
;


}


#menubar li a
{

     color
:
#000000
;

     text-decoration
:
none
;
   
     padding-top
:
4px
;

     display
:
block
;

     width
:
70px
;

     height
:
22px
;

     text-align
:
center
;

     background-color
:
#eefaec
;

     margin-left
:
2px
;


}


#menubar li a:hover
{
   
     color
:
#b9ecae
;


}


  
  
   
   

     
   

     
   
  

复制代码

源码下载：http://file.javaxxz.com/2014/10/30/235512046.zip