针对移动端的应用，卡片会根据屏幕大小自适应大小,甚至还可以有动画效果.卡片通常被放在在另一个之上, 但它们也可以被当做"页"来使用,像左滑,右滑.
卡片(card)默认样式带有box-shadow(阴影)，由于性能的原因，和他类似的元素像 list list-inset 并没有阴影。 如果你有很多的卡片，每个卡片都有很多子元素，建议使用内嵌列表 inset lists 。
我们可以通过添加 item-divider 类为卡片添加头部与底部： 添加带 item-divider
类的 card
的元素在内容区域的上方或者下方.
使用 list card 类来设置卡片列表：
卡片中使用图片，效果会更好，实例如下：
以下实例中使用几种不同的选项的卡片展现方式。 开始使用了 list card 元素，并使用了 item-avatar , item-body 元素用于展示图片和文本信息，底部使用 item-divider 类。
transition-property ：规定设置过渡效果的css属性名称(默认值all)
transition-duration ：规定完成过渡效果需要多少秒或毫秒（默认0s）
transition-timing-function ：指定过渡函数，规定速度效果的速度曲线(默认为ease函数)
transition-delay ：指定开始出现的延迟时间（默认延迟0s）
注意：transition四个子属性之间只能用空格隔开，不能用逗号隔开
不清楚你的背景是有阴影的具体是描述的什么，反正根据你截图来看，你的背景图要设置为横向重复，重点是你要把 a 标签浮动起来，而不是仅仅把 li{float:left}
此处我假设你的 nav 结构是 ul >li >a 形式：
---------------------- css ----------------------
#nav{...}/*ul的背景图代码和其他代码*/
#nav li,#nav a{float:left}/*a 和 li 一样，都得浮动起来，这是 a 自适应宽度的关键*/
#nav a{
display:block
padding:0 20px
line-height:30px
back...：你的a标签背景图代码
}
#nav li{
ma...：li的外边距代码，让每个按钮左右之间产生距离
_display:inline/*ie出现双倍浮动边bug时修正*/
}
