网站导航菜单设计案例

(1)、为了导航菜单布局的美观，首先定义一个css文件，如index.css

.menu:link {

     font-size: 11pt;

     font-weight: bold;

     text-decoration: none;

     color: #294E83;

     filter:DropShadow(Color=#CEDDF2, OffX=1, OffY=1, Positive=2);

}

.menu:visited {

     font-size: 11pt;

     font-weight: bold;

     text-decoration: none;

     color: #294E83;

     filter:DropShadow(Color=#CEDDF2, OffX=1, OffY=1, Positive=2);

}

.menu:hover {

     font-size: 11pt;

     font-weight: bold;

     text-decoration: none;

     color: #666867;

     filter:DropShadow(Color=#CEDDF2, OffX=1, OffY=1, Positive=2);

}

(2)、以下是导航菜单页面的.aspx页面的部分代码：

<div>

        <table cellpadding="0" cellspacing="0" border="0" align="center" width="950">

            <tr>

                <td style="background:url(Images/Menu.jpg) no-repeat" valign="middle" align="center" colspan="4">

                    <table height="21" cellpadding="0" cellspacing="0" width="90%" border="0">

                        <tr>

                            <td valign="bottom" align="center" height="21" nowrap> 

                                <script language="javascript">

                                    var today = new Date();

                                    var day,date;

                                    if(today.getDay()==0) day = '星期日';

                                    else if(today.getDay()==1) day = '星期一';

                                    else if(today.getDay()==2) day = '星期二';

                                    else if(today.getDay()==3) day = '星期三';

                                    else if(today.getDay()==4) day = '星期四';

                                    else if(today.getDay()==5) day = '星期五';

                                    else if(today.getDay()==6) day = '星期六';

                                    date = '今天是:'+today.getYear()+'年'+(today.getMonth()+1)+'月'+today.getDate()+'日'+' '+day;

                                    document.write(date);

                                </script>

                            </td>

                            <td align="center" valign="bottom" nowrap height="21px" width="6px" background="Images/dhdx.gif"></td>

                            <td align="center" valign="bottom" nowrap height="21px"><a href="#" class="menu">首页</a></td>

                            <td align="center" valign="bottom" nowrap height="21px" width="6px" background="Images/dhdx.gif"></td>

                            <td align="center" valign="bottom" nowrap height="21px"><a href="#" class="menu">系统管理</a></td>

                            <td align="center" valign="bottom" nowrap height="21px" width="6px" background="Images/dhdx.gif"></td>

                            <td align="center" valign="bottom" nowrap height="21px"><a href="#" class="menu">工程管理</a></td>

                            <td align="center" valign="bottom" nowrap height="21px" width="6px" background="Images/dhdx.gif"></td>

                            <td align="center" valign="bottom" nowrap height="21px"><a href="#" class="menu">工程监测</a></td>

                            <td align="center" valign="bottom" nowrap height="21px" width="6px" background="Images/dhdx.gif"></td>

                            <td align="center" valign="bottom" nowrap height="21px"><a href="#" class="menu">统计查询</a></td>

                            <td align="center" valign="bottom" nowrap height="21px" width="6px" background="Images/dhdx.gif"></td>

                            <td align="center" valign="bottom" nowrap height="21px"><a href="#" class="menu">监测分析</a></td>

                            <td align="center" valign="bottom" nowrap height="21px" width="6px" background="Images/dhdx.gif"></td>

                            <td align="center" valign="bottom" nowrap height="21px"><a href="#" class="menu">关于</a></td>

                        </tr>

                    </table>

                </td>

            </tr>

        </table>

</div>