上次我们讲过如何在手机网页中制作基本的列表啦（没记住？那个叫做《移动端各种列表的做法（一）》~快去复习下呀~）。今天咱就提高难度，教你们做些不但炫酷还实用的手机网页列表设计。
带右箭头的列表
你看这个右箭头，超有意思！直接把右箭头的背景图加上去就好。弄得精细点儿，整个页面看着就舒服多了。别忘了如果用的是安卓4.4以下的系统，background-size还得写成老式的样式~
带日期的、带右箭头的列表
现在这里加了个日期显示，用time标签表示时间。想让点哪里都能打开链接的话，得把链接制成大块头，提高点击面积。然后为了不影响日期和小箭头，加个右下角的边框，把日期移到右边来。
list 1
通过以上两个示例，我们可以总结出以下几点要点：
1.链接块状化有助于移动端用户更便捷地点击链接；
.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; }
}
}
}
现在，咱们得特意关注下background-size这个属性，主要是因为老款Android 4.4以下版本可能不支持~
3. HTML5提供了time标签用于放置时间信息；
4.右浮动法可实现元素定位到右侧。
background:url("../image/icon_goto.png") right center/auto 1.4rem no-repeat;
其他列表设计方法
除了上次提到的设计，其实还有不少其他好玩的方式。比如说，你可以试着在清单里面插上小小的图片，左右滑动就能够删除；或者搞一个直接往下拖就能看更多内容的版本。用这种方法，你的列表会变得更加生动实用！
图片缩略图列表
手机上不少APP都用了图片列表的方式展示内容，这既方便咱们快速找到想要的，也让使用体验更舒适。不过，图片大小和像素就要适中，这样才能保持视觉效果良好，让人看得清楚明白。
左滑删除功能
左滑删除，就是扫一眼左边，就能看见个删掉的按键，不用墨迹，马上把不想要的东西丢掉！不过，这个小窍门需要用到点手指、听音乐等技巧，用多了手机或电脑就能更加方便！
list 1
- 2016.03.14这是一个列表1
- 2016.03.14这是一个列表2
- 2016.03.14这是一个列表3
- 2016.03.14这是一个列表4
- 2016.03.14这是一个列表5
- 2016.03.14这是一个列表6
- 2016.03.14这是一个列表7
- 2016.03.14这是一个列表8
横向滚动列表
别再用老土的竖版列表，试试横向滑动的表！这样就能一目了然地看到所有内容。但是，别忘了注意表的横排设计是否会影响到阅读体验哦～
结语与展望
这篇分享就来给大家仔细说说如何用H5创建各种手机清单的方法，希望阅读后你能更懂得这个设计行业了。科技每天都在进步，所以我们承诺之后还会教你更多实用又新颖的技巧和设计方法！
记住，小伙伴们，利用所学知识设计出的APP要既好用又美观，不能让人敬而远之。我真心期待未来手机设计里会有更多惊喜，让大家体验感满满哒！
.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-right: 1.5rem; }
time {float: right;color: #999;}
}
}
。
评论0