ASP.NET的MENU控件该怎么套用CSS或者怎样设计能够漂亮一点

html-css016

ASP.NET的MENU控件该怎么套用CSS或者怎样设计能够漂亮一点,第1张

<asp:Menu ID="Menu1" runat="server" CssClass="CSS名称">

CssClass这个属性是控制CSS样式的 你只要把CSS样式设置好,然後套用就是了,希望能够帮助到你

CSS样式:

.mnuTopMenu

{

    background-color: #ecf6ff

     border: solid 1px #d6e8ff

    font-family: 宋体

    font-size: 20px

   

    color: #1E5494

   

}

.DynamicMenuStyle /*动态菜单矩形区域样式*/

{

    background-color: #ecf6ff

    border: solid 1px #d6e8ff

    padding: 1px 1px 1px 1px

    text-align: left

    font-family: 宋体

    font-size: 14px

}

.DynamicHoverStyle /*动态菜单项:鼠标悬停时的样式*/

{

    background-color: #ecf6ff /*#7C6F57*/

    color: #333333

}

.DynamicSelectedStyle /*动态菜单项:选择时的样式*/

{

    background-color:Red

    color: red

}

.DynamicMenuItemStyle /*动态菜单项样式*/

{

    padding: 2px 5px 2px 5px

    color: #000000

     background-color:  #ecf6ff

     font-family: 宋体

    font-size: 14px

}

.StaticSelectedStyle /*静态菜单项:选择时的样式*/

{

    /*background-color:Gainsboro*/

    color: red

}

.StaticMenuItemStyle /*静态菜单项样式*/

{

    cursor: hand

    padding: 2px 5px 2px 5px

    color: #1E5494

    background-color:Transparent

}

.StaticHoverStyle /*静态菜单项:鼠标悬停时的样式*/

{

    background-color: #FFCC66 /*#7C6F57*/

    cursor: hand

   color: #1E5494

}

HTML网页:

<asp:Menu ID="Menu1" runat="server"  StaticDisplayLevels="1"  CssClass="mnuTopMenu"

                                  onmenuitemclick="Menu1_MenuItemClick"  

                    DynamicHorizontalOffset="-1"  Orientation="Vertical" 

                    StaticSubMenuIndent="10px" DisappearAfter="600" 

                    StaticSelectedStyle-CssClass="StaticSelectedStyle"

                    StaticMenuItemStyle-CssClass="StaticMenuItemStyle"

                    StaticHoverStyle-CssClass="StaticHoverStyle"

                    DynamicMenuStyle-CssClass="DynamicMenuStyle"

                    DynamicSelectedStyle-CssClass="DynamicSelectedStyle"

                    DynamicMenuItemStyle-CssClass="DynamicMenuItemStyle"

                    DynamicHoverStyle-CssClass="DynamicHoverStyle" >

                                 

                                    

                                <Items>

                                    

                                      

                                           <asp:MenuItem Text="任务表单" Value="任务表单" >

                                           <asp:MenuItem Text="查看全部" Value="查看全部"></asp:MenuItem>

                                            <asp:MenuItem Text="按承办部门" Value="按承办部门">

                                                <asp:MenuItem Text="装备计划科" Value="装备计划科"></asp:MenuItem>

                                                <asp:MenuItem Text="资产管理科" Value="资产管理科"></asp:MenuItem>

                                                <asp:MenuItem Text="资产经营科" Value="资产经营科"></asp:MenuItem>

                                                <asp:MenuItem Text="设备管理科" Value="设备管理科"></asp:MenuItem>

                                                <asp:MenuItem Text="装备制造科" Value="装备制造科"></asp:MenuItem>

                                                <asp:MenuItem Text="技术管理科" Value="技术管理科"></asp:MenuItem>

                                                <asp:MenuItem Text="境外资产科" Value="境外资产科"></asp:MenuItem>

                                                <asp:MenuItem Text="综合管理科" Value="综合管理科"></asp:MenuItem>

                                            </asp:MenuItem>

                                            <asp:MenuItem Text="按任务来源" Value="按任务来源">

                                                <asp:MenuItem Text="工作计划" Value="工作计划"></asp:MenuItem>

                                                <asp:MenuItem Text="批办文件" Value="批办文件"></asp:MenuItem>

                                                <asp:MenuItem Text="部室例会" Value="部室例会"></asp:MenuItem>

                                                <asp:MenuItem Text="领导交办" Value="领导交办"></asp:MenuItem>

                                            </asp:MenuItem>

                                     

                                             

                                         </asp:MenuItem>

                                    

                                </Items>

                              

                            </asp:Menu>

希望这个对你有所帮助 <asp:Menu ID="Menu1" runat="server" BackColor="#E3EAEB"

DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Small"

ForeColor="#666666" Orientation="Horizontal" StaticSubMenuIndent="10px"

Height="16px" Width="189px" style="margin-left: 0px">

<StaticSelectedStyle BackColor="#1C5E55" />

<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

<DynamicHoverStyle BackColor="#666666" ForeColor="White" />

<DynamicMenuStyle BackColor="#E3EAEB" />

<DynamicSelectedStyle BackColor="#1C5E55" />

<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

<StaticHoverStyle BackColor="#666666" ForeColor="White" />

<Items>

<asp:MenuItem Text="首页" Value="首页" NavigateUrl="~/bookjieyuepaihang.aspx"></asp:MenuItem>

<asp:MenuItem Text="系统设置" Value="系统设置">

<asp:MenuItem NavigateUrl="~/manageshezhi.aspx" Text="管理员设置" Value="管理员设置">

</asp:MenuItem>

</asp:MenuItem>

<asp:MenuItem Text="读者管理" Value="读者管理">

<asp:MenuItem NavigateUrl="~/readerleixingmanage.aspx" Text="读者类型设置"

Value="读者类型设置"></asp:MenuItem>

<asp:MenuItem NavigateUrl="~/readerdanganmanage.aspx" Text="读者档案管理"

Value="读者档案管理"></asp:MenuItem>

</asp:MenuItem>

<asp:MenuItem Text="图书管理" Value="图书管理">

<asp:MenuItem NavigateUrl="~/bookleixingshezhi.aspx" Text="图书类型设置"

Value="图书类型设置"></asp:MenuItem>

<asp:MenuItem NavigateUrl="~/bookdanganmanage.aspx" Text="图书档案管理"

Value="图书档案管理"></asp:MenuItem>

</asp:MenuItem>

<asp:MenuItem Text="图书借还" Value="图书借还">

<asp:MenuItem NavigateUrl="~/bookjieyue.aspx" Text="图书借阅" Value="图书借阅">

</asp:MenuItem>

<asp:MenuItem NavigateUrl="~/bookxujie.aspx" Text="图书续借" Value="图书续借">

</asp:MenuItem>

<asp:MenuItem NavigateUrl="~/bookguihuan.aspx" Text="图书归还" Value="图书归还">

</asp:MenuItem>

</asp:MenuItem>

<asp:MenuItem Text="系统查询" Value="系统查询">

<asp:MenuItem NavigateUrl="~/bookdanganchaxun.aspx" Text="图书档案查询"

Value="图书档案查询"></asp:MenuItem>

<asp:MenuItem NavigateUrl="~/bookjieyuechaxun.aspx" Text="图书借阅查询"

Value="图书借阅查询"></asp:MenuItem>

</asp:MenuItem>

<asp:MenuItem Text="更改口令" Value="更改口令" NavigateUrl="~/genggaikouling.aspx"></asp:MenuItem>

<asp:MenuItem Text="退出系统" Value="退出系统"></asp:MenuItem>

</Items>

</asp:Menu>