资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

html网页制作中不用表格的菜单设计

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

成都创新互联是一家专注于网站制作、成都网站制作与策划设计,屏山网站建设哪家好?成都创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:屏山等地区。屏山做网站价格咨询:18980820575

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

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

接下来是定义菜单。

1.不用表格的菜单(纵向)
我们先来看菜单的最终效果：

什么是网站标准
使用标准的好处
怎样过渡
相关教程
工具
资源及链接
通常方法我们至少嵌套2层表格来实现这样的菜单，间隔线采用在td中设置背景色并插入1px高的透明GIF图片实现；背景色的交替效果采用td的onmouseover事件实现。但查看本菜单的页面代码，你会看到只有如下几句：



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

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

    (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;

    }
    #menuli{BORDER-TOP:#FFF1pxsolid;MARGIN:0px;}

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

    • 样式表代码

    #submenu{
    MARGIN:0px8px0px8px;
    PADDING:4px0px0px0px;
    BORDER:#fff1pxsolid;
    BACKGROUND:#dfdfdf;
    COLOR:#666;
    HEIGHT:25px;}

    #submenuul{
    CLEAR:left;
    MARGIN:0px;
    PADDING:0px;
    BORDER:0px;
    LIST-STYLE-TYPE:none;
    TEXT-ALIGN:center;
    DISPLAY:inline;
    }

    #submenuli{
    FLOAT:left;
    DISPLAY:block;
    MARGIN:0px;
    PADDING:0px;
    TEXT-ALIGN:center}

    #submenulia{
    DISPLAY:block;
    PADDING:2px3px2px3px;
    BACKGROUND:url(images/icon_dot_lmenu.gif)transparentno-repeat2px8px;
    FONT-WEIGHT:bold;
    WIDTH:100%;
    COLOR:#444;
    TEXT-DECORATION:none;
    }

    #submenulia:hover{
    BACKGROUND:url(images/icon_dot_lmenu2.gif)#C61C18no-repeat2px8px;
    COLOR:#fff;}

    #submenuulli#oneA{WIDTH:60px}
    #submenuulli#twoA{WIDTH:80px}
    #submenuulli#threeA{WIDTH:80px}
    #submenuulli#fourA{WIDTH:90px}
    #submenuulli#fiveA{WIDTH:80px}
    #submenuulli#sixA{WIDTH:80px}
    #submenuulli#sevenA{WIDTH:60px}
    #submenuulli#eightA{WIDTH:90px}
    #submenuulli#nineA{WIDTH:80px}


    以上代码不逐一分析了。横向菜单的关键在于：定义

  • 样式时的''FLOAT:left;''语句。另外注意UL定义中的DISPLAY:inline;一句表示将li强制作为内联对象呈递，从对象中删除行，通俗讲就是li不换行。实现横向排列。你也可以象例子中定义每个子菜单的宽度，控制菜单的间隔。好了，你也可以动手试试，用li实现各种各样的菜单样式。

    Tips:如果你子菜单的宽度总和大于层的宽度，菜单会自动折行，利用这个原理可以实现单个无序列表的2列或者3列排版，这是原来HTML很难实现的。


    本文标题：html网页制作中不用表格的菜单设计
    转载来源：http://cdkjz.cn/article/egocpg.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    全网营销广汉锦华圣月阀门成都光彩外墙景观传美奇电器大足网站建设成都画册设计公司网站制作价格SSL证书成都茶叶销售

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图