快速导航: 江门SEO培训 | 江门网页设计培训 | 江门软件开发培训 | 江门Asp.Net编程培训 | 江门SQL数据库培训 | 江门网页美工培训
收藏本站 | 设为首页
当前位置:网站首页 > 新闻中心 > 新闻中心

WEB2.0标准教程:第十一天 不用表格的菜单

时间:2013-11-23 14:25 | 来源:网胜培训中心
以上代码现在应该容易理解。先在CSS定义了一个logo的层,然后在页面中调用它。

布局初步搭建起来,我开始填充里面的内容。首先是定义logo图片:

样式表:#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}
页面代码:

 
以上代码现在应该容易理解。先在CSS定义了一个logo的层,然后在页面中调用它。需要说明的是,为了使网页有更好的易用性,web标准要求大家给所有的、属于正式内容的图片,加一个alt属性。这个alt属性是用来说明图片的作用(当图片不能显示的时候就显示替换文字),所以不要只写成无意义的图片名称。
接下来是定义菜单:

1.不用表格的菜单(纵向)

我们先来看菜单的最终效果:
 

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]

    [ 可先修改部分代码 再运行查看效果 ]



通常方法我们至少嵌套2层表格来实现这样的菜单,间隔线采用在td中设置背景色并插入1px高的透明GIF图片实现;背景色的交替效果采用td的onmouseover事件实现。但查看本菜单的页面代码,你会看到只有如下几句:

 

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
 

  • 什么是网站标准

  • 使用标准的好处

  • 怎样过渡

  • 相关教程

  • 工具

  • 资源及链接


 



没有用任何table,而用的是无序列

  • ,整个菜单的效果实现的秘密完全在于id="menu",我们再来看CSS中关于menu的定义:

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

     

    div css xhtml xml Example Source Code Example Source Code [www.52css.com]
    #menu {
    MARGIN: 15px 20px 0px 15px;  /*定义层的外边框距离*/
    PADDING:15px;    /*定义层的内边框为15px*/
    BACKGROUND: #dfdfdf;   /*定义背景颜色*/
    COLOR: #666;    /*定义字体颜色*/
    BORDER:#fff 2px solid;  /*定义边框为2px白色线条*/
    WIDTH:160px;    /*定义内容的宽度为160px*/



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

     

    div css xhtml xml Example Source Code Example Source Code [www.52css.com]
    #menu ul {
    MARGIN: 0px;
    PADDING: 0px;
    BORDER: medium none; /*不显示边框*/
    LINE-HEIGHT: normal; 
    LIST-STYLE-TYPE: none;
    }
    #menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;} 



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