`

给列表数据增加icon图标

    博客分类:
  • css
阅读更多

代码:
<li>
      <span style="cursor:pointer;" onclick="showSonMenu(22);">用户管理</span>
</li>
 

    span 标签的 css :
#main div.sidebar ul li span {
    padding-left: 45px;
    background: url(/public/images/bg_sidebar_li.gif) no-repeat 25px center;
} 

padding-left 与 background 结合使用



    li 标签的 css :
#main div.sidebar ul li {
    padding: 6px 0;
    border-bottom: 1px dashed #666666;
    font-size: 14px;
    font-weight: bold;
    font-family: "微软雅黑";
    cursor: pointer;
}

border-bottom 属性使下边框为虚线显示


效果:








参考更多:

http://nodebook.info/book/view?bid=53523a3c19980e913e9be3ee









  • 大小: 3.4 KB
分享到:
评论

相关推荐

    Alert消息框中设置icon图标的例子

    ### Alert消息框中设置icon图标的例子 #### 知识点概述 在Flex开发中,Alert消息框是一种常用的用户交互方式,它可以帮助开发者快速展示重要的信息或者请求用户的确认操作。在实际的应用场景中,为了让Alert消息框...

    MFC ListControl 中checkbox 处理 图标ICON

    // 设置小图标列表 ``` 然后,当我们在CListCtrl中插入项时,需要指定对应的图标索引。这可以通过LV_ITEM结构完成,其中iImage字段表示图标索引。例如: ```cpp LV_ITEM item; item.mask = LVIF_TEXT | LVIF_...

    icon图标制作器

    4. **图标的设计流程**:使用Icon图标制作器,用户通常需要先构思图标概念,然后选择或绘制基本形状,通过颜色和阴影增加立体感,添加文字或其他元素,最后调整细节并导出。 5. **图标在Web设计中的作用**:图标在...

    简单的增删改查图标 Icon

    总的来说,"简单的增删改查图标 Icon"是一套实用的图形资源,为UI设计提供了便利,帮助用户快速理解和执行常见的数据操作,提升了交互体验。在网页和应用开发过程中,选择合适且一致的图标是优化用户体验的关键步骤...

    解析apk获取icon图标兼容linux和window

    总的来说,解析APK获取icon图标是一项涉及文件I/O、XML解析和资源提取的技术任务,通过纯Java实现可以提高代码的灵活性,但需要对Android应用的内部结构有较深入的理解。在实现过程中,可能需要对不同的操作系统环境...

    echarts3图标功能

    总结来说,ECharts 3 的图标功能强大且灵活,支持多种图表类型,如树状图和折线图,并具备动态数据刷新能力。通过 JSON 文件封装,可以实现数据和报表的分离,提高代码的可维护性。在实际项目中,结合 `...

    适用于后台开发的icon小图标下载

    立体图标则更富有层次感,能增加界面的生动性。 在后台开发中,常见的icon类型有: 1. 文件操作图标:如新建、打开、保存、复制、粘贴、删除等,用于文件管理功能。 2. 导航图标:如返回、前进、刷新、主页等,...

    加载动态图标 loading icon

    在网页设计和用户体验中,加载动态图标(Loading Icon)扮演着重要的角色。这些图标通常在用户请求内容或页面正在加载时出现,以提供视觉反馈,缓解用户的等待焦虑,并提升整体的交互体验。加载图标的设计多样,可以...

    Ext小图标icon,共1716个

    在IT行业中,UI设计是至关重要的一环,尤其是对于Web应用程序来说。"Ext小图标icon,共1716个"的资源就是一个专为...通过合理使用这些图标,可以提升用户对应用的第一印象,从而增加用户满意度,提高产品的市场竞争力。

    DataGrid 中加入图标

    在这个例子中,StatusIcon应该是数据源中的一个字段,它存储了图标的路径或URI。 对于JavaFX的TableView,我们可以创建一个CustomCellFactory,这允许我们自定义单元格的显示内容,包括添加图像: ```java ...

    105个 png icon应用图标

    此外,PNG格式支持透明度,使得图标可以无缝地融入不同的背景,增加了设计的灵活性。 PNG格式的优势在于: 1. **无损压缩**:与JPEG等有损压缩格式不同,PNG在压缩过程中不会丢失任何图像数据,因此可以保持原始...

    Arcgis图标库 16 32 64 大小 png格式

    同时,PNG的透明背景特性使得图标可以无缝融入任何颜色的背景,增加了设计的灵活性。 总的来说,ArcGIS图标库是一个全面、高质量的资源集合,对于从事GIS开发和设计的专业人士来说,它是一个不可或缺的工具,能够极...

    如何在项目中使用阿里巴巴矢量图标

    `iconfont.json`文件通常包含了图标库的元数据,如图标名称、Unicode编码等,可以用于生成自定义的CSS或JS文件。 `iconfont.ttf`是一个TrueType字体文件,包含了所有的图标。虽然不直接在HTML中使用,但可以在需要...

    flexigrid icon

    可扩展性意味着图标集应该易于增加新的图标以适应不同的需求。 2. **Flexigrid**: Flexigrid是一款基于jQuery的数据网格插件,它提供了灵活的数据展示和操作功能,如分页、排序、过滤和编辑。在Flexigrid中,图标...

    C# DataGridView里添加小图标

    在实际的应用场景中,我们可能需要在`DataGridView`的列中添加小图标以增强数据的可读性和视觉效果。本篇文章将详细介绍如何在C#的`DataGridView`中添加小图标。 首先,我们需要理解`DataGridView`的基本结构。`...

    菜单(menu)上增加图标(.Bmp)

    3. 将图标添加到菜单:使用`SetItemBitmap`函数设置菜单项的图像,传入菜单句柄、菜单项ID和`MenuIcon`数据窗口对象的实例。 4. 显示菜单:通过`TrackPopupMenu`或`PopupMenu`函数将菜单显示在屏幕上的指定位置。 ...

    树形组件扩展版(图标)

    3. **自定义图标组件**:允许用户传入自定义的React组件或Vue组件作为图标,增加灵活性。这需要`tree.js`库支持组件化的渲染方式。 4. **图标库集成**:与流行的图标库(如Font Awesome、Material Icons)集成,...

    winfrom 开发图标大全

    3. **控件的Icon属性**:许多WinForms控件如Button、MenuStrip、ToolStrip等都拥有Icon属性,你可以将图标赋值给这个属性,以显示在控件上。例如,设置按钮的图标:`button1.Icon = myIcon`。 4. **自定义图标**:...

    fuelux.tree 自定义属性控件-自定义图标+动态加载数据+添加点击事件

    在本文中,我们将深入探讨如何使用 FuelUX 的 Tree 控件来实现自定义图标、动态加载数据以及添加点击事件,从而创建更加互动且功能丰富的用户界面。 首先,让我们了解 FuelUX Tree 控件的基本概念。Tree 控件是一种...

    操作系统图标及office图标大全

    使用与操作系统一致或者美观的图标可以使应用看起来更加专业,增加用户对软件的信任感。 3. **对象模型与属性**:在VBA中,你可以通过修改控件的`Picture`或`Icon`属性来设置按钮、菜单项的图标。例如,对于`...

Global site tag (gtag.js) - Google Analytics