zoukankan      html  css  js  c++  java
  • asp2Menu學習

    設計Menu的一些想法。
    通過樣式增強交互性。
    - 滑鼠懸停時,使用者可以很清楚知道,停留在那個地方可以做什麼操作。
    例如,滑鼠懸停(Hover) Menu 上 字型加上底線,改變字體顏色和 Menu 的背景色。顯示 MenuItem 的 ToolTip。
    - Menu 的項(MenuItem)被選中時,應醒目突出被選擇。
    例如,改變字體的顏色,加粗等,改變 item 的背景色。

    效率優先,兼顧性能。這年頭就投一個字——快。
    - 使用asp:Menu
    1,拖控件,選擇“靜態”。
    2,創建樣式(CSS):Menu 的 MenuItem 常規樣式和Menu 的 SelectedItem(被選中) 樣式。
    /*
    Menu 的 MenuItem 常規樣式
    1. 只是沒有下邊框
    */
    .normal_item_border
    {
     border-top: solid 1px SteelBlue;
     border-right: solid 1px SteelBlue;
     border-bottom: 0;
     border-left: solid 1px SteelBlue;
    }

    /*
    Menu 的 SelectedItem(被選中) 樣式
    1. 只是沒有下邊框
    */
    .selected_item_border
    {
     border-top: solid 1px #FF8000;
     border-right: solid 1px #FF8000;
     border-bottom: 0;
     border-left: solid 1px #FF8000;
    }

    /*
    Menu 區域樣式
    1. 只有下邊框,即看起來是一條線。
    */
    #menu
    {
     border: 0;
     border-bottom: solid 1px #d4d0c8;
    }
    3,Menu 控制項的屬性設置。
    (1)<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" BackColor="White" BorderColor="White"
                    ForeColor="Black">
    水平顯示;背景白色,配合item背景色,以空白表示分隔。
    (2)<StaticSelectedStyle BackColor="#FFC080" Font-Bold="True" CssClass="selected_item_border" />
    常規項目。設背景色和 css。
    (3)<StaticMenuItemStyle BackColor="SkyBlue" HorizontalPadding="8px" ItemSpacing="1px"
                        VerticalPadding="2px" CssClass="normal_item_border" />
    選中項目。設背景色和 css。Padding 和 Spacing 目的——看起來不沉悶,很明朗。
    (4)<StaticHoverStyle Font-Underline="True" ForeColor="Navy" />
    鼠標懸停。設置字型。提醒用戶可以對此項操作。
    4,主要Code
                <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" BackColor="White" BorderColor="White"
                    ForeColor="Black">
                    <Items>
                        <asp:MenuItem Text="File" Value="File"></asp:MenuItem>
                        <asp:MenuItem Text="View" Value="View"></asp:MenuItem>
                        <asp:MenuItem Text="Help" Value="Help"></asp:MenuItem>
                        <asp:MenuItem Text="Edit" Value="Edit"></asp:MenuItem>
                    </Items>
                    <StaticSelectedStyle BackColor="#FFC080" Font-Bold="True" CssClass="selected_item_border" />
                    <StaticMenuItemStyle BackColor="SkyBlue" HorizontalPadding="8px" ItemSpacing="1px"
                        VerticalPadding="2px" CssClass="normal_item_border" />
                    <StaticHoverStyle Font-Underline="True" ForeColor="Navy" />
                </asp:Menu>

  • 相关阅读:
    [整] Android Fragment 生命周期图
    [原]Android Fragment 入门介绍
    [原]Android开发优化-Adapter优化
    [整] Android ListView 去除边缘阴影、选中色、拖动背景色等
    [整]Android开发优化-布局优化
    [原]Android 初遇Http错误 httpClient.execute
    [转]Android ANR 分析解决方法
    [整]Android SlidingMenu Demo 环境搭建
    RabbitMQ教程
    【centos7】添加开机启动服务/脚本
  • 原文地址:https://www.cnblogs.com/htht66/p/1886736.html
Copyright © 2011-2022 走看看