支付宝移动端css样式,支付宝移动端css样式设置

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

如何使用JS+CSS实现仿支付宝菜单选中效果代码

具体如下：

这是一个漂亮的JS+CSS仿支付宝菜单，总体风格和形式与支付宝的菜单没什么两样，

运行效果截图如下：

具体代码如下：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

html xmlns=""

head

titleCSS仿支付宝菜单/title

style type="text/css"

* { padding:0px; margin:0px; list-style:none; }

body { font-size:14px; font-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:960px; margin:0 auto; height:auto; overflow:hidden; padding-top:50px; }

#nav { background-position: 0 -178px; height:79px; width:960px; }

#nav ul.nav_left { background-position: 0 0; float:left; width:10px; height:79px; display:inline; }

#nav ul.nav_right { background-position:-20px 0; float:right; width:10px; height:79px; display:inline; }

#nav ul.nav_main { float:left; display:inline; }

#nav ul.nav_main li { background-position: -41px 0; float:left; padding:0 5px; }

#nav ul.nav_main li a { height:40px; display:block; text-decoration:none; float:left; }

#nav ul.nav_main li.over a { background-position: 0 -85px; }

#nav ul.nav_main li a span { background-position: right -90px; height:22px; display:block; padding-right:30px; padding-left:20px; padding-top:18px; color:#fff; font-weight:bold; overflow:hidden; cursor:pointer; float:left; margin-left:15px; display:inline; }

#nav ul.nav_main li.over a span { background-position: right -130px; color:#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 = 0; i Root.length; i++) {

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 = 0; n = 6; n++) {

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"

lia href="#"span首页/span/a/li

lia href="#"span脚本代码/span/a/li

lia href="#"span脚本下载/span/a/li

lia href="#"span网页特效/span/a/li

lia href="#"span生活社区/span/a/li

lia href="#"span休闲电影/span/a/li

lia href="#"span哈哼~/span/a/li

/ul

ul class="nav_right"

/ul

/div

/body

/html

相关问答

Q1: 二、支付宝小程序前端样式的设计.acss样式详解

在视频中已经说过了，小程序的设计思想和原生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 我在收到邮件后会回复。

Q2: 支付宝个人页是怎么适配所有电脑的 css

你用媒介查询

CSS3 Media Queries

link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" / link href="css/style.css" rel="stylesheet" type="text/css" media="all" / link href="css/print.css" rel="stylesheet" type="text/css" media="print" /

或者这样的形式：

style type="text/css" media="screen" @import url("css/style.css"); /style

不知道大家留意没有，其中两种方式引入CSS样式都有一个共同的属性“media”，而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型，如屏幕（screen）和打印（print）的样式表，当然还有其他的，比如说“TV”,“handheld”等，其中“all”表示的是支持所有媒体介质。有关于更多的Media类型，可以点击这里。

上

面简单说了一下HTML4和CSS2的“Media Queries”,而今天的主要是来学习CSS3中的"Media

Queries"的更多使用方法和相关知识，下面我们开始进入今天的主题。CSS3中的Media

Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的

样式表。换句简单的说，“在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表”。现在最常见的一个

例子，你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制

作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。

首先来看一个简单的实例：

link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /

上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容：

1、screen：这个不用说大家都知道，指的是一种媒体类型；

2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；

3、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。

前面这个简单的实例引出两个概念性的东西，一个就是媒体类型（Media Type）和媒体特性（Media Query），首先一起来理解一下这两个概念：

一、媒体类型(Media Type)

媒

体类型(Media

Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是

all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。

页面中引入媒体类型方法也有多种：

1、link方法引入

link rel="stylesheet" type="text/css" href="../css/print.css" media="print" /

2、xml方式引入

?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？

3、@import方式引入

@import

引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是在head/head中

的style.../style中引入，单这种使用方法在ie6-7都不被支持如

样式文件中调用另一个样式文件：

@import url("css/reset.css") screen; @import url("css/print.css") print;

在head/head中的style.../style中调用：

head style type="text/css" @import url("css/style.css") all; /style /head

4、@media引入

这种引入方式和@import是一样的，也有两种方式：

样式文件中使用：

@media screen{ 选择器{ 属性：属性值； } }

在head/head中的style.../style中调用：

head style type="text/css" @media screen{ 选择器{ 属性：属性值； } } /style /head

以上几种方法都有其各自的利弊，在实际应用中我建议使用第一种和第四种，因为这两种方法是在项目制作中是常用的方法，对于他们的具体区别，我就不说了，想了解的大家可以去找度娘或G爸，他们能帮你解决。

二、媒体特性（Media Query）

前面有简单的提到，Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)，常用的特性w3c共列出来13种。具体的可以参阅：Media features。为了更能理解Media Query，我们在次回到前面的实例上：

link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /

转换成css中的写法为：

@media screen and (max-width: 600px) { 选择器 { 属性：属性值； } }

其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){...}的大括号之中。在语句上面的语句结构中，可以看出Media query和css的属性集合很相似，主要区别在：

1、Media query只接受单个的逻辑表达式作为其值，或者没有值；

2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式；

3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况

4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种

常用的Media Query如下表所示：

兼容的浏览器：

下面我们一起来看看Media Queries的具体使用方式

一、最大宽度Max Width

link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" /

上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。

二、最小宽度Min Width

link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" /

上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。

三、多个Media Queries使用

link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" /

Media

Query可以结合多个媒体查询，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media

Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

四、设备屏幕的输出宽度Device Width

link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" /

上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率

五、iPhone4

link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" /

上面的样式是专门针对iPhone4的移动设备写的。

六、iPad

link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" / link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" /

在

大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说上面的例子，在纵向

(portrait)时采用portrait.css来渲染页面；在横向（landscape）时采用landscape.css来渲染页面。

七、android

/*240px的宽度*/ link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" / /*360px的宽度*/ link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" / /*480px的宽度*/ link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" /

我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。

八、not关键字

link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" /

not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。

九、only关键字

link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" /

only

用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media

Type的设备隐藏样式表的。其主要有：支持媒体特性（Media

Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media

Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media

Qqueries的浏览器，不论是否支持only，样式都不会被采用。

十、其他

在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" /

另外还有使用逗号（，）被用来表示并列或者表示或，如下

link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" /

上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。

关于Media Query的使用这一节就介绍到此，最后总体规纳一下其功能，个人认为就是一句话：Media Queries能在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。下一节将会针对Media Queries介绍几个实例，如果感兴趣的朋友记得观注本站的更新。

如需转载烦请注明出处：W3CPLUS

@media (max-width: 1186px) {

}

@media (max-width: 979px) {

}

@media (min-width: 768px) and (max-width: 979px) {

}

@media (max-width: 767px) {

}

/* Smaller screens ----------- */

@media (max-width : 480px) {

}

/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

}

Q3: js支付宝的支付金额输入框怎么做的

那么今天我就用JavaScript代码来实现这个效果吧，那么首先介绍一下整个的思路，首先我们先将确定输入密码的位数，我的需求是5位，那么就用一个div标签包住5个input标签

现在很多时候大家付款的场景都是在手机上面，而随着H5页面的开发变得越来越方便，很多场景也从客户端搬到了浏览器中，其中支付这个场景就很自然的被放在了浏览器中。那么这样的输入框大家一定不会陌生吧：

那么今天我就用JavaScript代码来实现这个效果吧，那么首先介绍一下整个的思路，首先我们先将确定输入密码的位数，我的需求是5位，那么就用一个div标签包住5个input标签。

并且给这个5个input设置display: inline-block 属性，同时用!- -来消除元素直接的margin值，那么HTML就是如下的样子：

div class="input"input type="tel" placeholder="随" maxlength=""!--input type="tel" placeholder="机" maxlength=""!--input type="tel" placeholder="" maxlength=""!--input type="tel" placeholder="位" maxlength=""!--input type="tel" placeholder="数" maxlength=""/div

在代码中我们需要设置最多输入的位数，不然就不像了嘛~当然为了在移动端输入的时候能唤起数字键盘来，我们也需要设置type="tel"。那么接下来就是CSS样式的代码了，这里我就简单的贴出一些代码，具体高仿的像不像其实就是这里了~

input {display: inline-block;:last-child {border-right: px solid #;}input {border-top: px solid #;border-bottom: px solid #;border-left: px solid #;width: px;height: px;outline:none;font-family: inherit;font-size: px;font-weight: inherit;text-align: center;line-height: px;color: #ccc;background: rgba(,,,);}}

那么接下来就是最关键的JavaScript部分了，

/*** 模拟支付宝的密码输入形式*/(function (window, document) {var active = ,inputBtn = document.querySelectorAll('input');for (var i = ; i inputBtn.length; i++) {inputBtn[i].addEventListener('click', function () {inputBtn[active].focus();}, false);inputBtn[i].addEventListener('focus', function () {this.addEventListener('keyup', listenKeyUp, false);}, false);inputBtn[i].addEventListener('blur', function () {this.removeEventListener('keyup', listenKeyUp, false);}, false);}/*** 监听键盘的敲击事件*/function listenKeyUp() {var beginBtn = document.querySelector('#beginBtn');if (!isNaN(this.value) this.value.length != ) {if (active ) {active += ;}inputBtn[active].focus();} else if (this.value.length == ) {if (active ) {active -= ;}inputBtn[active].focus();}if (active = ) {var _value = inputBtn[active].value;if (beginBtn.className == 'begin-no' !isNaN(_value) _value.length != ) {beginBtn.className = 'begin';beginBtn.addEventListener('click', function () {calculate.begin();}, false);}} else {if (beginBtn.className == 'begin') {beginBtn.className = 'begin-no';}}}})(window, document);

首先我们对最外层的div进行监听，当发现用户选择div的时候就将input的焦点设置到active上面去，而这个active则是一个计数器，默认的时候是第一位的，也就是0，而当我们输入了正确的数字后将会增加一个active，这样input的焦点就会向后移动了，这样就完成了输入一个向后移动一位的功能了，而同时我们监听键盘上的退格键，当用户点击了退格键之后就对active减一，这样输入框的焦点也就向前移动了，当然，当input失去焦点的时候我们也同时移除绑定在上面的监听事件，这样就不会造成多次触发的问题了。