给列表数据增加icon图标

用户管理系统设计与实现

最新推荐文章于 2018-05-08 10:50:14 发布

原创最新推荐文章于 2018-05-08 10:50:14 发布 · 659 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #列表 #图标

css 专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了用户管理系统的实现过程，包括使用HTML、CSS、JavaScript等技术构建前端界面，以及如何通过后台API进行用户数据的增删查改操作。重点讨论了如何优化用户体验和提高系统安全性。

代码：

<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 属性使下边框为虚线显示

效果：

[img]http://dl2.iteye.com/upload/attachment/0099/2623/440a5a53-fad1-3ace-91bf-dd4c0e2169f8.png[/img]

参考更多：

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