在视频中已经说过了，小程序的设计思想和原生app的设计思想颇为相似，基本的应用单元为页面。当然对于一个页面来说每一个元素的放置位置在哪儿以及显示成什么样子这个是由 样式来决定的 。我们知道在web开发中样式是在css文件中规定的，叫做层叠样式表 (Cascading Style Sheets)。其实在APP中样式的约束也是使用css，在支付宝小程序中也是使用css不过文件的后缀是.acss而且对css3进行了扩充而已。
那么在支付宝小程序中的.acss和微信小程序中的.wxcss没有什么两样。 上边已经说了.acss其实包含了css3那么它还有一些新的特性是css3中不具备的，让我们一一看看
第一次看到这个东西也能猜到他是干什么用的。在css中我们知道规定大小一般使用像素(px)这个单位。比如显示生活中我们说房子128㎡那这儿的单位是平方米，在开发中需要更加精准的大小就是px像素。像素就非常精细了因为在我们显示屏幕中像素是最小的显示单元。这个道理如果不懂的话就找个LED屏幕仔细看，LED屏幕上一个一个的发光二极管可以想象为像素。
我们知道手机屏幕有大有小，就拿iPhone来说，iPhone 6 plus比iPhone 5要大。那么就说明plus的像素比5要多。对比：
加入有一个160px宽度的红色矩形在这两种手机中的位置如下：
rpx（responsive pixel）可以根据屏幕宽度进行自适应。如何自适应呢？看下边的分析：
看下图：
在模块化开发中我们有时候不得不在页面中使用其他的第三方库的样式，而第三方库的样式是保存在第三方包中的，我们不可能全部复制到我们的.acss文件中，那最好的办法就是导入了。在样式表中导入其他外联样式表。
当然仍旧支持内联样式和class属性制定样式类，如
选择器和css3的保持一致。一般有class=”test”类选择器和id=”test”的id选择器。当然在支付宝小程序的样式中特殊的地方就是：
※ .a- 或者 .am-为前缀的选择器已经被系统占用所以不要使用；
※ 不能使用属性选择器，例如,以下写法不被支持：
我之前说过小程序开发的应用单元为页面。其实我们在.axml中写的页面并不包含页面容器，就相当于我们做一个页面但是body标签不用写那如果我们要改变整个页面的背景怎么办呢?其实有一个固定的选择器。例如：
可以通过 page 元素选择器来设置页面容器的样式，比如页面背景色:
在你想改变页面容器的页面中定义该样式也可以，全局定义也可以，例如我想将test这个页面的页面容器背景设置为蓝色，就可以再pages目录下的test目录下找到test.acss在其中定义page的样式
下节是视图层讲解，如果有任何问题可以再下方给我留言或者发邮件到 weiyongqiang@weiyongqiang.com 我在收到邮件后会回复。
背景图配合letter-spacing这个属性就可以了。那个网格切做背景图，然后每个数字的距离用letter-spacing这个属性，当然最好也在input标签里面添加这个maxlength=6属性
具体如下：这是一个漂亮的JS+CSS仿支付宝菜单，总体风格和形式与支付宝的菜单没什么两样，
运行效果截图如下：
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS仿支付宝菜单</title>
<style type="text/css">
* { padding:0pxmargin:0pxlist-style:none}
body { font-size:14pxfont-family:Verdana}
#nav ul.nav_left, #nav ul.nav_right, #nav ul.nav_main li, #nav ul.nav_main li.over a, #nav ul.nav_main li a span, #nav ul.nav_main li.over a span { background:url(images/b.gif) no-repeat}
#nav { background:url(images/b.gif) repeat-x}
#wrap { width:960pxmargin:0 autoheight:autooverflow:hiddenpadding-top:50px}
#nav { background-position: 0 -178pxheight:79pxwidth:960px}
#nav ul.nav_left { background-position: 0 0float:leftwidth:10pxheight:79pxdisplay:inline}
#nav ul.nav_right { background-position:-20px 0float:rightwidth:10pxheight:79pxdisplay:inline}
#nav ul.nav_main { float:leftdisplay:inline}
#nav ul.nav_main li { background-position: -41px 0float:leftpadding:0 5px}
#nav ul.nav_main li a { height:40pxdisplay:blocktext-decoration:nonefloat:left}
#nav ul.nav_main li.over a { background-position: 0 -85px}
#nav ul.nav_main li a span { background-position: right -90pxheight:22pxdisplay:blockpadding-right:30pxpadding-left:20pxpadding-top:18pxcolor:#ffffont-weight:boldoverflow:hiddencursor:pointerfloat:leftmargin-left:15pxdisplay:inline}
#nav ul.nav_main li.over a span { background-position: right -130pxcolor:#555}
#nav ul.nav_main li#show_0 { background:none}
</style>
<script type="text/javascript">
function $(id) {
return document.getElementById(id)
}
window.onload = function() {
var Root = $("nav_li").getElementsByTagName("li")
for (var i = 0i <Root.lengthi++) {
c = Root[i]
c.setAttribute("id", "show_" + i)
var xp = function(i) {
show(i)
}
c.onmouseover = dete_bibao(xp, i, c)
}
}
function show(j) {
for (var n = 0n <= 6n++) {
if ($("show_" + n).className != "s") {
$("show_" + n).className = "s"
}
if (n == j) {
$("show_" + n).className = "over"
}
}
}
function dete_bibao(fn, params, obj) {
return function() {
fn.call(obj || window, params)
}
}
</script>
</head>
<body>
<div id="wrap">
<div id="nav">
<ul class="nav_left">
</ul>
<ul class="nav_main" id="nav_li">
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>脚本代码</span></a></li>
<li><a href="#"><span>脚本下载</span></a></li>
<li><a href="#"><span>网页特效</span></a></li>
<li><a href="#"><span>生活社区</span></a></li>
<li><a href="#"><span>休闲电影</span></a></li>
<li><a href="#"><span>哈哼~</span></a></li>
</ul>
<ul class="nav_right">
</ul>
</div>
</div>
</body>
</html>
