zoukankan      html  css  js  c++  java
  • Div Vertical Menu

    尝试把一个表格实现的Vertical菜单,改用div来实现。

    原代码如下:

    Vertical Menu by Table
    <table cellpadding="5" cellspacing="1" width="100%" border="0">
        <tr>
            <td bgcolor="white" height="3px">
            </td>
        </tr>
        <tr>
            <td height="15px" bgcolor="#dcdcdc" onmouseover="this.style.backgroundColor='faf0e6'"
                onmouseout
    ="this.style.backgroundColor='dcdcdc'">
                &nbsp;&nbsp;<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />&nbsp;&nbsp;<asp:HyperLink
                    
    ID="HyperLink1" runat="server" Text="Hperlink1" NavigateUrl="~/Default1.aspx"
                    
    ></asp:HyperLink>
            </td>
        </tr>
        <tr>
            <td bgcolor="white" height="1px">
            </td>
        </tr>  
          <tr>
            <td height="15px" bgcolor="#dcdcdc" onmouseover="this.style.backgroundColor='faf0e6'"
                onmouseout
    ="this.style.backgroundColor='dcdcdc'">
                &nbsp;&nbsp;<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />&nbsp;&nbsp;<asp:HyperLink
                    
    ID="HyperLink2" runat="server" Text="Hperlink2" NavigateUrl="~/Default2.aspx"
                    
    ></asp:HyperLink>
            </td>
        </tr>
        <tr>
            <td bgcolor="white" height="1px">
            </td>
        </tr>  
    </table>

    使用Div tag来实现vertical菜单,首先来看看效果:

    为菜单设置样式:

    Div Menu Style
     #div_menu
        
    {
            margin-top
    : 2px;
            margin-bottom
    : 2px;
            padding
    : 5px;
            background-color
    : #dcdcdc;
            height
    : 16px;
        
    }  

    菜单:

    Menu
    <div style="background-color: #FFFFFF; height: 3px;">
    </div>
    <div id="div_menu" onmouseover="this.style.backgroundColor='faf0e6'" onmouseout="this.style.backgroundColor='dcdcdc'">
        &nbsp;&nbsp;<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />&nbsp;&nbsp;
        <href='<%= ResolveUrl("~/Default1.aspx") %>'>
            Hyperlink1</a>
    </div>
    <div id="div_menu" onmouseover="this.style.backgroundColor='faf0e6'" onmouseout="this.style.backgroundColor='dcdcdc'">
        &nbsp;&nbsp;<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />&nbsp;&nbsp;
        <href='<%= ResolveUrl("~/Default2.aspx") %>'>
            Hyperlink2</a>
    </div>
    <div id="div_menu" onmouseover="this.style.backgroundColor='faf0e6'" onmouseout="this.style.backgroundColor='dcdcdc'">
        &nbsp;&nbsp;<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />&nbsp;&nbsp;<a
            
    href='<%= ResolveUrl("~/Default3.aspx") %>'>Hyperlink3</a>
    </div>
    <div id="div_menu" onmouseover="this.style.backgroundColor='faf0e6'" onmouseout="this.style.backgroundColor='dcdcdc'">
        &nbsp;&nbsp;<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />&nbsp;&nbsp;
        <href='<%= ResolveUrl("~/Default4.aspx") %>'>
            Hyperlink4</a>
    </div>
    <div id="div_menu" onmouseover="this.style.backgroundColor='faf0e6'" onmouseout="this.style.backgroundColor='dcdcdc'">
        &nbsp;&nbsp;<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />&nbsp;&nbsp;<a
            
    href='<%= ResolveUrl("~/Default5.aspx") %>'>Hyperlink5</a>
    </div>
  • 相关阅读:
    XML文件的操作说明
    IIS中如何应用程序启用https协议
    sql server中的数据类型转换函数
    sql语句中的join连接(左连接、右连接、全连接、内连接)
    sql语句中日期相减的操作
    C# NameValueCollection集合
    json的两种表示结构(对象和数组).。
    ASP.NET中一般处理程序报的错误:由于代码已经过优化或者本机框架位于调用堆栈之上,无法计算表达式的值
    C#中类的实例是不能 获取到类中的静态方法和静态变量(Static)的,及原因
    《好好学Java 从零基础到项目实战》姗姗而来
  • 原文地址:https://www.cnblogs.com/insus/p/2215637.html
Copyright © 2011-2022 走看看