H5神器SASS轻松搞定带图标列表

搞定H5移动端列表的技巧上篇讲了两款简单案例，这期来点更多样儿的，让你更好地理解和学习

带小图标的列表

要给手机网页H5做图，特别是弄个列队的小图标的话，挺好使的。你只需要每个图标都取个别致的名字(也就是class)，就能随意展示各种样式和功能的小图标了。

做那些带小图的list时候，就需要用到“定位布局”！用 i 标签来当图标就行，给每个 i 标签加个 class 就能展示不同的图咯。然后 SASS 这个神奇工具就能帮你轻松搞定各种样式的图标~

带图标的列表分割线对齐

    

        
这是一个列表1
        
这是一个列表2
        
这是一个列表3
        
这是一个列表4
        
这是一个列表5
        
这是一个列表6
        
这是一个列表7
        
这是一个列表8
    

不只是放图标和名字那么简单，有时候设计师还会把横杠跟字对齐，而不是放在图标后面。这种小调整虽然不起眼，但是却能让网页看起来更顺眼、更自然！

加些CSS给字体和分割线对齐，就像我们把A标签字体的左间距弄到ul上，这样li元素就有小边框了。再想让图标向上移动点儿？没关系，给个负面的 left坐标，让它跑到ul填充顶部，设计难题就这么解决！

.list_1 {    ul {padding-left: 1.6rem;}
    li {        border-bottom: 1px solid #ddd;padding-right: 1.6rem;        
    a {
            display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;            
            background:url("../image/icon_goto.png") right center no-repeat;            
            background-size: auto 1.4rem;            
            padding-left: 3rem;            
            position: relative;        
            }
        .ico {            
        display: block;width: 2.4rem;height: 2.4rem;position: absolute;left: 0;top: .8rem;            
        background: #f60;border-radius: 50%;        
        }
    }
}

其实SASS循环这种东西，咱们暂时不关心看看SASS教程就行了。现在，我来给你说说怎么用背景图片做出漂亮的小图标。除了这些，在实际运用中还可以尝试下别的方法，比如CSS图标或字体图标什么的。

其他相关内容

不仅仅是前面提到的两个 adeo，用手机做 H5 还要研究好多东西！

-怎么做列表项的互动效果，比如鼠标放上去、点一下之类的？

-滑动删留言：就是那种聊天工具里，轻轻一滑就能擦除信息的功能，咋整？

-如何做可以拖动排序的列表？就跟待办事项那种类似。

-列表项展开与折叠：如何实现点击列表项展开或折叠详情内容

-列表项加载更多：当列表项过多时，如何实现加载更多功能

-列表项搜索过滤：如何通过搜索框筛选出符合条件的列表项

.list_1 {    
ul {padding-left: 4.6rem;}
    li {        
    border-bottom: 1px solid #ddd;        
    padding-right: 1.6rem;        
    position: relative;        
    a {
            display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;            
            background:url("../image/icon_goto.png") right center no-repeat;            
            background-size: auto 1.4rem;        
            }
        .ico {            
        display: block;width: 2.4rem;height: 2.4rem;position: absolute;left: -3rem;top: .8rem;            
        background: #f60;border-radius: 50%;        
        }
    }
}

研究透了上面的内容以后，做点儿实战项目练手。这样你就可以在手机H5上搞定各种列表而且还能提升你的开发技能！

总之玩儿转手机H5设计的时候，学会用点高级的CSS风格、布局技巧和JavaScript互动效果这些东西，能帮咱轻松解决各种问题。记住了只有多学多练，咱们的技术才能越来越溜。