总结伪类与伪元素

熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法,即使你有用过伪类与伪元素,但里面总有一两个你没见过的吧。

1.伪类与伪元素

先说一说为什么css要引入伪元素和伪类,以下是css2.1 Selectors章节中对伪类与伪元素的描述

CSS introduces the concepts of pseudo-elements and pseudo-classes  to permit formatting based on information that lies outside the document tree.

 

直译过来就是:css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释:

伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过:before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。

 

2.伪类与伪元素的区别

这里通过两个例子来说明两者的区别。

下面是一个简单的html列表片段:

如果想要给第一项添加样式,可以在为第一个<li>添加一个类,并在该类中定义对应样式:

HTML:

CSS:

如果不用添加类的方法,我们可以通过给设置第一个<li>的:first-child伪类来为其添加样式。这个时候,被修饰的<li>元素依然处于文档树中。

HTML:

CSS:

下面是另一个简单的html段落片段:

如果想要给该段落的第一个字母添加样式,可以在第一个字母中包裹一个<span>元素,并设置该span元素的样式:

HTML:

CSS:

如果不创建一个<span>元素,我们可以通过设置<p>的:first-letter伪元素来为其添加样式。这个时候,看起来好像是创建了一个虚拟的<span>元素并添加了样式,但实际上文档树中并不存在这个<span>元素。

HTML:

CSS:

 

从上述例子中可以看出,伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档数外的元素。因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素。

 

3.伪元素是使用单冒号还是双冒号?

CSS3规范中的要求使用双冒号(::)表示伪元素,以此来区分伪元素和伪类,比如::before和::after等伪元素使用双冒号(::),:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外,大部分浏览器都支持伪元素的双冒号(::)表示方法。

然而,除了少部分伪元素,如::backdrop必须使用双冒号,大部分伪元素都支持单冒号和双冒号的写法,比如::after,写成:after也可以正确运行。

对于伪元素是使用单冒号还是双冒号的问题,w3c标准中的描述如下:

Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.

大概的意思就是:虽然CSS3标准要求伪元素使用双冒号的写法,但也依然支持单冒号的写法。为了向后兼容,我们建议你在目前还是使用单冒号的写法。

实际上,伪元素使用单冒号还是双冒号很难说得清谁对谁错,你可以按照个人的喜好来选择某一种写法。

 

4.伪类与伪元素的具体用法

这一章以含义解析和例子的方式列出大部分的伪类和伪元素的具体用法。下面是根据用途分类的伪类总结图和根据冒号分类的伪元素总结图:

伪类

伪元素

某些伪类或伪元素仍然处于试验阶段,在使用前建议先在Can I Use等网站查一查其浏览器兼容性。处于试验阶段的伪类或伪元素会在标题中标注。

 

伪类

状态

由于状态伪类的用法大家都十分熟悉,这里就不用例子说明了。

1 :link

选择未访问的链接

2 :visited

选择已访问的链接

3 :hover

选择鼠标指针浮动在其上的元素

4 :active

选择活动的链接

5 :focus

选择获取焦点的输入字段

 

结构化

1 :not

一个否定伪类,用于匹配不符合参数选择器的元素。

如下例,除了第一个<li>元素外,其他<li>元素的文本都会变为橙色。

HTML:

CSS:

2 :first-child

匹配元素的第一个子元素。

如下例,第一个<li>元素的文本会变为橙色。

HTML:

CSS:

3 : last-child

匹配元素的最后一个子元素。

如下例,最后一个<li>元素的文本会变为橙色。

HTML:

CSS:

4 first-of-type

匹配属于其父元素的首个特定类型的子元素的每个元素。

如下例,第一个<li>元素和第一个<span>元素的文本会变为橙色。

HTML:

CSS:

5 :last-of-type

匹配元素的最后一个子元素。

如下例,最后一个<li>元素的文本会变为橙色。

HTML:

CSS:

6 :nth-child

:nth-child根据元素的位置匹配一个或者多个元素,它接受一个an+b形式的参数,an+b匹配到的元素示例如下:

  • 1n+0,或n,匹配每一个子元素。
  • 2n+0,或2n,匹配位置为2、4、6、8…的子元素,该表达式与关键字even等价。
  • 2n+1匹配位置为1、3、5、7…的子元素、该表达式与关键字odd等价。
  • 3n+4匹配位置为4、7、10、13…的子元素。

如下例,有以下HTML列表:

CSS:

选择第二个元素,”Beta”会变成橙色:

选择位置序号是2的倍数的元素,”Beta”, “Delta”, “Zeta”, “kappa”会变成橙色:

选择位置序号为偶数的元素:

选择从第6个开始,位置序号是2的倍数的元素,”Zeta”, “Theta”, “Kappa”会变成橙色:

7 :nth-last-child

:nth-last-child与:nth-child相似,不同之处在于它是从最后一个子元素开始计数的。

8 :nth-of-type

:nth-of-type与nth-child相似,不同之处在于它是只匹配特定类型的元素。

如下例,第二个<p>元素会变为橙色。

HTML:

CSS:

9 :nth-last-type

:nth-last-of-type与nth-of-type相似,不同之处在于它是从最后一个子元素开始计数的。

10 :only-child

当元素是其父元素中唯一一个子元素时,:only-child匹配该元素。

HTML:

CSS:

11 :only-of-type

当元素是其父元素中唯一一个特定类型的子元素时,:only-child匹配该元素。

如下例,第一个ul元素只有一个li类型的元素,该li元素的文本会变为橙色。

HTML:

CSS:

12 :target

当URL带有锚名称,指向文档内某个具体的元素时,:target匹配该元素。

如下例,url中的target命中id值为target的article元素,article元素的背景会变为黄色。

URL:

http://example.com/#target

HTML:

CSS:

表单相关

1 :checked

:checked匹配被选中的input元素,这个input元素包括radio和checkbox。

如下例,当复选框被选中时,与其相邻的<label>元素的背景会变成黄色。

HTML:

CSS:

2 :default

:default匹配默认选中的元素,例如:提交按钮总是表单的默认按钮。

如下例,只有提交按钮的背景变成了黄色。

HTML:

CSS:

3 :disabled

:disabled匹配禁用的表单元素。

如下例,被禁用input输入框的透明度会变成50%。

HTML:

CSS:

4 :empty

:empty匹配没有子元素的元素。如果元素中含有文本节点、HTML元素或者一个空格,则:empty不能匹配这个元素。

如下例,:empty能匹配的元素会变为黄色。

第一个元素中有文本节点,所以其背景不会变成黄色;

第二个元素中有一个空格,有空格则该元素不为空,所以其背景不会变成黄色;

第三个元素中没有任何内容,所以其背景会变成黄色;

第四个元素中只有一个注释,此时该元素是空的,所以其背景会变成黄色;

HTML:

CSS:

5 :enabled

:enabled匹配没有设置disabled属性的表单元素。

6 :in-range

:in-range匹配在指定区域内元素。

如下例,当数字选择器的数字在5到10是,数字选择器的边框会设为绿色。

HTML:

CSS:

7 :out-of-range

:out-of-range与:in-range相反,它匹配不在指定区域内的元素。

8 :indeterminate

indeterminate的英文意思是“不确定的”。当某组中的单选框或复选框还没有选取状态时,:indeterminate匹配该组中所有的单选框或复选框。

如下例,当下面的一组单选框没有一个处于被选中时,与input相邻的label元素的背景会被设为橙色。

HTML:

CSS:

9 :valid

:valid匹配条件验证正确的表单元素。

如下例,当email输入框内的值符合email格式时,输入框的边框会被设为绿色。

HTML:

CSS:

10 :invalid

:invalid与:valid相反,匹配条件验证错误的表单元素。

11 :optional

:optional匹配是具有optional属性的表单元素。当表单元素没有设置为required时,即为optional属性。

如下例,第一个input的背景不会被设为黄色,第二个input的背景会被设为黄色。

HTML:

CSS:

12 :required

:required与:optional相反匹配设置了required属性的表单元素。

13 :read-only

:read-only匹配设置了只读属性的元素,表单元素可以通过设置“readonly”属性来定义元素只读。

如下例,input元素的背景会被设为黄色。

HTML:

CSS:

14 :read-write

:read-write匹配处于编辑状态的元素。input,textarea和设置了contenteditable的HTML元素获取焦点时即处于编辑状态。

如下例,input输入框和富文本框获取焦点时,背景变成黄色。

HTML:

CSS:

15 :scope(处于试验阶段)

:scope匹配处于style作用域下的元素。当style没有设置scope属性时,style内的样式会对整个html起作用。

如下例,第二个section中的元素的文本会变为斜体。

HTML:

注:目前支持这个伪类的浏览器只有火狐。

语言相关

1 :dir(处于实验阶段)

:dir匹配指定阅读方向的元素,当HTML元素中设置了dir属性时该伪类才能生效。现时支持的阅读方向有两种:ltr(从左往右)和rtl(从右往左)。目前,只有火狐浏览器支持:dir伪类,并在火狐浏览器中使用时需要添加前缀( -moz-dir() )。

如下例,p元素中的阿拉伯语(阿拉伯语是从右往左阅读的)文本会变成橙色。

HTML:

CSS:

如下例,p元素中的英语文本会变成蓝色

HTML:

CSS:

2 :lang

:lang匹配设置了特定语言的元素,设置特定语言可以通过为了HTML元素设置lang=””属性,设置meta元素的charset=””属性,或者是在http头部上设置语言属性。

实际上,lang=””属性不只可以在html标签上设置,也可以在其他的元素上设置。

如下例,分别给不同的语言设置不同的引用样式:

HTML:

CSS:

其他

1 :root

:root匹配文档的根元素。一般的html文件的根元素是html元素,而SVG或XML文件的根元素则可能是其他元素。

如下例,将html元素的背景设置为橙色

2.:fullscreen

:fullscreen匹配处于全屏模式下的元素。全屏模式不是通过按F11来打开的全屏模式,而是通过Javascript的Fullscreen API来打开的,不同的浏览器有不同的Fullscreen API。目前,:fullscreen需要添加前缀才能使用。

如下例,当处于全屏模式时,h1元素的背景会变成橙色

HTML:

JAVASCRIPT:

CSS:

 

伪元素

1 ::before/:before

:before在被选元素前插入内容。需要使用content属性来指定要插入的内容。被插入的内容实际上不在文档树中。

HTML:

CSS:

2 ::after/:after

:after在被元素后插入内容,其用法和特性与:before相似。

3 ::first-letter/:first-letter

:first-letter匹配元素中文本的首字母。被修饰的首字母不在文档树中。

CSS:

4 ::first-line/:first-line

:first-line匹配元素中第一行的文本。这个伪元素只能用在块元素中,不能用在内联元素中。

CSS:

5 ::selection

::selection匹配用户被用户选中或者处于高亮状态的部分。在火狐浏览器使用时需要添加-moz前缀。该伪元素只支持双冒号的形式。

CSS:

6 ::placeholder

::placeholder匹配占位符的文本,只有元素设置了placeholder属性时,该伪元素才能生效。

该伪元素不是CSS的标准,它的实现可能在将来会有所改变,所以要决定使用时必须谨慎。

在一些浏览器中(IE10和Firefox18及其以下版本)会使用单冒号的形式。

HTML:

CSS:

7 ::backdrop(处于试验阶段)

::backdrop用于改变全屏模式下的背景颜色,全屏模式的默认颜色为黑色。该伪元素只支持双冒号的形式

HTML:

CSS:

参考文章

1. An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements

2. CSS伪类与CSS伪元素的区别及由来

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/

 

不定宽度的div始终居中(css方式)

//需求:ul不能定具体宽度,只能根据li的个数来计算宽度。
22


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
&lt;!DOCTYPE HTML&gt;

&lt;html&gt;

&lt;head&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;title&gt;特殊性&lt;/title&gt;

&lt;style type="text/css"&gt;

*{padding:0; margin:0;}

ul,li{ list-style:none;}

.wrap{ float:left; position:relative; left:50%;}

.wrap ul{ background:#f00; height:30px; line-height:30px; left:-50%; position:relative;}

.wrap ul li{ float:left;}

.wrap ul li a{ color:#fff; display:block; padding:0 10px;}

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div class="wrap"&gt;

&lt;ul&gt;

&lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;网站地图&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;网站地图&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;网站地图&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;网站地图&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;网站地图&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

 

 

 

//可以实现不定宽度居中,可是元素左右两侧空白宽度之和(绿色箭头部分的)要大于ul本身不定宽度元素的宽度。不然就会出现滚动条。

//so不建议使用,用js解决吧,纠结的同学们

html5本地存储-localStorage

html5本地存储有两类。
localStorage -一般保存在客户端计算机,在移动端浏览器中,一般情况是永久保存
sessionStorage – 数据保存在当前会话中,或者当前窗口,当前窗口新建的窗口,相关联的标签

1、在使用之前先检查浏览器是否可以支持Web Storage。

if(window.localStorage){ 
} 
if(window.sessionStorage){
}

2、赋值和调取

var userData={
name:"www",
account:"san",
level:2,
disbled:true
}
//存储userData数据
localstorage.setItem("userData",JSON.stringify(userData));

//读取userData并赋值给新变量
var newUserData=JSON.parse(localStorage.getItem("userData"))

 

3、删除数据

//删除本地存储的key为那么的Item
localStorage.removeItem("name");

//删除localStorage所有key/value键值对,Item
localStorage.clear()

 

PS:JSON.stringify()把字符串转换成对象;JSON.parse()把对象转换成原来的数据格式。

手机App实例:

/**
* localStorage保存数据
* @param String key 保存数据的key值
* @param String value 保存的数据
*/
function setLocVal(key,value){
window.localStorage[key] = value;
}

/**
* 根据key取localStorage的值
* @param String key 保存的key值
*/
function getLocVal(key){
if(window.localStorage[key])
return window.localStorage[key];
else
return “”;
}

/**
* 清除缓存
* @param String key 保存数据的key,如果不传清空所有缓存数据
*/
function clearLocVal(key){
if(key)
window.localStorage.removeItem(key);
else
window.localStorage.clear();
}

a页面存储

function openDetails(i){
var Arr=[‘投保指南’,’投保流程’,’常见问题’];
setLocVal(‘mName’,JSON.stringify(Arr[i]));
setLocVal(‘mNo’,JSON.stringify(i)); //
openNewWin(‘wytb’, ‘wytb.html’);
}

b列表页面接收

var mN = JSON.parse(getLocVal(“mN”));
var mNn = JSON.parse(getLocVal(“mNo”));

function showGoods(){
$toast(‘数据加载中…’);
if(mNn==2){
$closeToast();
$.getJSON(mN, function(data){
if (status==0&&data&&data.data.length) {
$closeToast();
var arrData = data.data;
var tmpl = ‘<div class=\”ub ub-ac ub-pc ub-pj uinn umar-t c-wh\” ontouchstart=\”zy_touch(\’t-org\’)\” onmousedown=\”zy_touch(\’t-org\’);\” onclick=\”openDetails(\’${href}\’);\”>’
+'<div class=”ulev-app2″>${title}</div>’
+'<div class=”arrow ub-img umwh”>’
+'</div>’
+'</div>’
var s = zy_tmpl(tmpl, arrData, zy_tmpl_count(arrData));
$$(‘mytb’).innerHTML=s;
Imgclick();
}else {
$$(‘mytb’).innerHTML= ‘<div class=”ub ub-ac ub-pc uinn”>暂时没有数据</div>’;
}
});
}else{
$.getJSON(mN, function(data){
if (data&&data.length) {
$closeToast();
var arrData = data;
arrData=JSON.stringify(arrData);
arrData=arrData.replace(/height.*?\/>/gi,”\/>”);
arrData=JSON.parse(arrData);
var tmpl = ‘<div class=\”uba b-gra ub ub-ver c-wh uinn umar-t\”>’ +
‘<div class=\”ubb b-gra ub uinn3\”>’ +
‘<div class=\”t-org ulev-app2\”>${title}</div>’ +
‘</div>’ +
‘<div class=\”uinnh1 t-gra1 ulev-app2 c-wh\”>’ +
‘<span>${text}</span>’ +
‘</div>’ +
‘</div>’
var s = zy_tmpl(tmpl, arrData, zy_tmpl_count(arrData));
$$(‘mytb’).innerHTML=s;
Imgclick();
}else {
$$(‘mytb’).innerHTML= ‘<div class=”ub ub-ac ub-pc uinn”>暂时没有数据</div>’;
}
});
}
}

//打开详情页面
function openDetails(url){
setLocVal(‘mHref’,JSON.stringify(lPath+’?url=’+url));//存值
openNewWin(‘wytb_detail’,’wytb_detail.html’);
}

//手机相册调取
function Imgclick(){
var Img = document.getElementsByTagName(‘img’);
for (var i = 0; i < Img.length; i++) {
Img[i].onclick=function(){
uexImageBrowser.open([this.src]);
}
}
}

 

c页面-详情页面

function sortList(){
$$(‘Info’).innerHTML=””;
$toast(‘数据加载中…’);
$.getJSON(liPath, function(data){
$closeToast();
if (data!=0) {
data.content=data.content.replace(/FONT-SIZE: 12pt/gi,””);

//详情模板

var liPath = JSON.parse(getLocVal(“mHref”));
var tmpl = ‘<div class=”ubb b-gra ub uinn3″>’
+'<div class=”t-org ulev-app2″>’+data.title+'</div>’
+'</div>’
+'<div class=”uinnh1 t-gra1 ulev-app2 c-wh”>’
+'<span>’+data.content+'</span>’
+'</div>’;
$$(‘Info’).innerHTML=tmpl;
}
else {
$$(‘Info’).innerHTML= ‘<div class=”ub ub-ac ub-pc uinn”>暂时没有数据</div>’;
}
});
}

 

 

 

 

导航条hover时,用css解决中英文互换

导航条默认为“英文”显示,鼠标hover的时候变为“中文”显示。如下图所示

利用display的block和none进行切换显示

1

2

 

 

<!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>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>无标题文档</title>

<style type=”text/css”>

*{ margin:0;padding:0}

ul,li{ list-style:none}

a{text-decoration:none}

em{ font-style:normal;}

.box{ width:1000px; margin:30px auto; height:50px; background:#000; border-bottom:4px solid #f00;}

.nav{ height:50px;line-height:50px; margin-left:30px;}

.nav li{ width:100px; float:left; text-align:center;text-algin:center;}

.nav li a{ color:#fff; display:block;}

.nav li a span{ display:none}

.nav li a:hover{ background:#f00;}

.nav li a:hover span{display:block;}

.nav li a:hover em{display:none;}

</style>

</head>

 

<body>

<div class=”box”>

<ul class=”nav”>

<li><a href=”#”><span>首页</span><em>index</em></a></li>

<li><a href=”#”><span>产品</span><em>product</em></a></li>

<li><a href=”#”><span>联系我们</span><em>contact</em></a></li>

<li><a href=”#”><span>关于我们</span><em>about</em></a></li>

<li><a href=”#”><span>新闻资讯</span><em>news</em></a></li>

<li><a href=”#”><span>网站地图</span><em>site</em></a></li>

</ul>

</div>

</body>

</html>

 

flex弹性盒子

概述

UI3.0使用弹性盒子对页面进行布局,ui-box.css中就定义了弹性盒子的一些css3样式,弹性盒子模型是在指定大小的父容器里来为子元素分配空间,使用box架构可以更容易更方便的适配不同分辨率不同屏幕尺寸的手机

CSS Variables

Box架构

定义:
ub……
说明:
使用box弹性盒子模式对页面进行布局
例子:
ub定义元素的display属性为box。那么子元素就可以根据我们定义的比例来分配元素的空间,ub一般跟ub-f[1-4]搭配着使用

Box架构元素空间大小分配比例

定义:
ub-f……
说明:
定义不同的box-flex属性值
类别使用数字编号,定义不同的元素空间大小分配比例
例子:

ub-f1数字编号为1;定义box-flex:1
ub-f1数字编号为2;定义box-flex:2
ub-f1数字编号为3;定义box-flex:3
ub-f1数字编号为4;定义box-flex:4
ub-f[1-4]和ub搭配着使用

解析:
1、若子元素都使用ub-f1,那么子元素等比例的分配父元素的空间大小

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub c-gra uba b-bla umh5'</span><span class="tag">&gt;</span>
  2. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1 sc-bg-alert'</span><span class="tag">&gt;&lt;/div&gt;</span>
  3. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1 bc-head'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
    <span class="tag">&lt;/div&gt;</span>

2、若子元素一个用ub-f1,另外一个用ub-f2.,那么子元素按照1:2的比例分配父元素的空间大小

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub c-gra uba b-bla umh5'</span><span class="tag">&gt;</span>
  2. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1 sc-bg-alert'</span><span class="tag">&gt;&lt;/div&gt;</span>
  3. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f2 bc-head'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
    <span class="tag">&lt;/div&gt;</span>


3、若子元素分别使用ub-f1,ub-f2,ub-f3,那么子元素会按照1:2:3的比例分配父元素的空间大小

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub c-gra uba b-bla umh5'</span><span class="tag">&gt;</span>
  2. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1 sc-bg-alert'</span><span class="tag">&gt;&lt;/div&gt;</span>
  3. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f2 bc-head'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f3 sc-bg-active'</span><span class="tag">&gt;&lt;/div&gt;</span>
  5. 1
    <span class="tag">&lt;/div&gt;</span>


4、若子元素中只有一个使用ub-f1,另外一个元素根据内容的多少定义大小,那么使用ub-f1的元素会自动适配元素的剩余空间大小

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub c-gra uba b-bla umh5'</span><span class="tag">&gt;</span>
  2. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'sc-bg-alert'</span><span class="tag">&gt;</span><span class="pln">内容</span><span class="tag">&lt;/div&gt;</span>
  3. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1 bc-head'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
    <span class="tag">&lt;/div&gt;</span>

ub-f[1-4]和ub搭配着使用
场景:

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uba b-gra c-wh us uc-a '</span><span class="tag">&gt;</span>
  2. 1
    <span class="tag">&lt;div</span> <span class="atn">ontouchstart</span><span class="pun">=</span><span class="atv">'</span><span class="pln">zy_touch</span><span class="pun">(</span><span class="atv">'</span><span class="atn">btn-act</span><span class="atv">')'</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uc-t ubb ub b-gra t-bla ub-ac lis umh4'</span><span class="tag">&gt;</span>
  3. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1 ut-s'</span><span class="tag">&gt;</span><span class="pln">设置</span><span class="tag">&lt;/div&gt;</span>
  4. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'tx-r t-blu ulev-1'</span><span class="tag">&gt;</span><span class="pln">Old Phone</span><span class="tag">&lt;/div&gt;</span>
  5. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'res8 lis-sw ub-img'</span><span class="tag">&gt;&lt;/div&gt;</span>
  6. 1
    <span class="tag">&lt;/div&gt;</span>
  7. 1
    <span class="tag">&lt;div</span> <span class="atn">ontouchstart</span><span class="pun">=</span><span class="atv">'</span><span class="pln">zy_touch</span><span class="pun">(</span><span class="atv">'</span><span class="atn">btn-act</span><span class="atv">')'</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">' ub ubb b-gra t-bla ub-ac lis umh4'</span><span class="tag">&gt;</span>
  8. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1 ut-s'</span><span class="tag">&gt;</span><span class="pln">设置</span><span class="tag">&lt;/div&gt;</span>
  9. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'tx-r t-blu ulev-1'</span><span class="tag">&gt;</span><span class="pln">Old Phone</span><span class="tag">&lt;/div&gt;</span>
  10. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'res8 lis-sw ub-img'</span><span class="tag">&gt;&lt;/div&gt;</span>
  11. 1
    <span class="tag">&lt;/div&gt;</span>
  12. 1
    <span class="tag">&lt;div</span> <span class="atn">ontouchstart</span><span class="pun">=</span><span class="atv">'</span><span class="pln">zy_touch</span><span class="pun">(</span><span class="atv">'</span><span class="atn">btn-act</span><span class="atv">')'</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uc-b ub t-bla ub-ac lis umh4'</span><span class="tag">&gt;</span>
  13. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1 ut-s'</span><span class="tag">&gt;</span><span class="pln">设置</span><span class="tag">&lt;/div&gt;</span>
  14. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'tx-r t-blu ulev-1'</span><span class="tag">&gt;</span><span class="pln">Old Phone</span><span class="tag">&lt;/div&gt;</span>
  15. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'res8 lis-sw ub-img'</span><span class="tag">&gt;&lt;/div&gt;</span>
  16. 1
    <span class="tag">&lt;/div&gt;</span>
  17. 1
    <span class="tag">&lt;/div&gt;</span>

图例:

Box架构元素垂直方向的位置排列

定义:
ub-ac,ub-ae……
说明:

ub-ac:垂直居中
ub-ae:位于底边
只有跟ub搭配着使用ub-ac,ub-ae的作用才生效

例子:
1、未使用ub-ac,ub-ae

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub uinn umh4 uba b-gra uc-a'</span><span class="tag">&gt;</span>
  2. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1'</span><span class="tag">&gt;</span><span class="pln">内容</span><span class="tag">&lt;/div&gt;</span>
  3. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'res8 lis-sw ub-img'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
    <span class="tag">&lt;/div&gt;</span>


2、使用ub-ac

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub uinn umh4 uba b-gra uc-a ub-ac'</span><span class="tag">&gt;</span>
  2. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1'</span><span class="tag">&gt;</span><span class="pln">内容</span><span class="tag">&lt;/div&gt;</span>
  3. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'res8 lis-sw ub-img'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
    <span class="tag">&lt;/div&gt;</span>


3、使用ub-ae

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub uinn umh4 uba b-gra uc-a ub-ae'</span><span class="tag">&gt;</span>
  2. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1'</span><span class="tag">&gt;</span><span class="pln">内容</span><span class="tag">&lt;/div&gt;</span>
  3. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'res8 lis-sw ub-img'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
    <span class="tag">&lt;/div&gt;</span>


场景:

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uba b-gra c-wh us uc-a '</span><span class="tag">&gt;</span>
  2. 1
     <span class="tag">&lt;div</span> <span class="atn">ontouchstart</span><span class="pun">=</span><span class="atv">'</span><span class="pln">zy_touch</span><span class="pun">(</span><span class="atv">'</span><span class="atn">btn-act</span><span class="atv">')'</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uc-t ubb ub b-gra t-bla ub-ac lis'</span><span class="tag">&gt;</span>
  3. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'lis-icon ub-img im'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1 ut-s'</span><span class="tag">&gt;</span><span class="pln">设置</span><span class="tag">&lt;/div&gt;</span>
  5. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'tx-r t-blu ulev-1'</span><span class="tag">&gt;</span><span class="pln">Old Phone</span><span class="tag">&lt;/div&gt;</span>
  6. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'res8 lis-sw ub-img'</span><span class="tag">&gt;</span><span class="pln">&gt;</span><span class="tag">&lt;/div&gt;</span>
  7. 1
     <span class="tag">&lt;/div&gt;</span>
  8. 1
     <span class="tag">&lt;div</span> <span class="atn">ontouchstart</span><span class="pun">=</span><span class="atv">'</span><span class="pln">zy_touch</span><span class="pun">(</span><span class="atv">'</span><span class="atn">btn-act</span><span class="atv">')'</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">' ub ubb b-grat-bla ub-ac lis'</span><span class="tag">&gt;</span>
  9. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'lis-icon ub-img im'</span><span class="tag">&gt;&lt;/div&gt;</span>
  10. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1 ut-s'</span><span class="tag">&gt;</span><span class="pln">设置</span><span class="tag">&lt;/div&gt;</span>
  11. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'tx-r t-blu ulev-1'</span><span class="tag">&gt;</span><span class="pln">Old Phone</span><span class="tag">&lt;/div&gt;</span>
  12. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'res8 lis-sw ub-img'</span><span class="tag">&gt;&lt;/div&gt;</span>
  13. 1
     <span class="tag">&lt;/div&gt;</span>
  14. 1
     <span class="tag">&lt;div</span> <span class="atn">ontouchstart</span><span class="pun">=</span><span class="atv">'</span><span class="pln">zy_touch</span><span class="pun">(</span><span class="atv">'</span><span class="atn">btn-act</span><span class="atv">')'</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uc-b ub t-bla ub-ac lis'</span><span class="tag">&gt;</span>
  15. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'lis-icon ub-img im'</span><span class="tag">&gt;&lt;/div&gt;</span>
  16. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1 ut-s'</span><span class="tag">&gt;</span><span class="pln">设置</span><span class="tag">&lt;/div&gt;</span>
  17. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'tx-r t-blu ulev-1'</span><span class="tag">&gt;</span><span class="pln">Old Phone</span><span class="tag">&lt;/div&gt;</span>
  18. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'res8 lis-sw ub-img'</span><span class="tag">&gt;&lt;/div&gt;</span>
  19. 1
    <span class="tag">&lt;/div&gt;</span>
  20. 1
     <span class="tag">&lt;/div&gt;</span>

图例:

Box架构元素水平方向的位置排列

定义:
ub-pc,ub-pe,ub-pj……
说明:

ub-pc:水平居中
ub-pe:位于末尾
ub-pj:两端对齐
只有跟ub搭配着使用ub-pc,ub-pe,ub-pj的作用才生效

例子:
1、未使用ub-pc,ub-pe,ub-pj

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uinn2 c-gra ub'</span><span class="tag">&gt;</span> <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 sc-bg-alert'</span><span class="tag">&gt;&lt;/div&gt;</span>
  2. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 bc-head'</span><span class="tag">&gt;&lt;/div&gt;</span>
  3. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 sc-bg-active'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
    <span class="tag">&lt;/div&gt;</span>

2、使用ub-pc

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uinn2 c-gra ub-pc ub uba b-bla'</span><span class="tag">&gt;</span>
  2. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 sc-bg-alert'</span><span class="tag">&gt;&lt;/div&gt;</span>
  3. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 bc-head'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 sc-bg-active'</span><span class="tag">&gt;&lt;/div&gt;</span>
  5. 1
    <span class="tag">&lt;/div&gt;</span>


3、使用ub-pe

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uinn2 c-gra ub-pe ub uba b-bla'</span><span class="tag">&gt;</span>
  2. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 sc-bg-alert'</span><span class="tag">&gt;&lt;/div&gt;</span>
  3. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 bc-head'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 sc-bg-active'</span><span class="tag">&gt;&lt;/div&gt;</span>
  5. 1
    <span class="tag">&lt;/div&gt;</span>


4、使用ub-pj

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uinn2 c-gra ub-pj ub uba b-bla'</span><span class="tag">&gt;</span>
  2. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 sc-bg-alert'</span><span class="tag">&gt;&lt;/div&gt;</span>
  3. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 bc-head'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 sc-bg-active'</span><span class="tag">&gt;&lt;/div&gt;</span>
  5. 1
    <span class="tag">&lt;/div&gt;</span>

Box架构元素垂直排列

定义:
ub-ver….
说明:
ub-ver:定义元素垂直排列
只有跟ub搭配着使用ub-ver的作用才生效
例子:
1、未使用ub-ver

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uinn2 c-gra ub uba b-bla'</span><span class="tag">&gt;</span>
  2. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 sc-bg-alert'</span><span class="tag">&gt;&lt;/div&gt;</span>
  3. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 bc-head'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 sc-bg-active'</span><span class="tag">&gt;&lt;/div&gt;</span>
  5. 1
    <span class="tag">&lt;/div&gt;</span>


2、使用ub-ver

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uinn2 c-gra ub ub-ver uba b-bla'</span><span class="tag">&gt;</span>
  2. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 sc-bg-alert'</span><span class="tag">&gt;&lt;/div&gt;</span>
  3. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 bc-head'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 sc-bg-active'</span><span class="tag">&gt;&lt;/div&gt;</span>
  5. 1
    <span class="tag">&lt;/div&gt;</span>

Box架构元素排列方向

定义:
ub-rev……
说明:
ub-rev:定义元素排列方向
只有跟ub搭配着使用ub-rev的作用才生效
例子:
1、未使用ub-rev

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uinn2 c-gra ub uba b-bla'</span><span class="tag">&gt;</span>
  2. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 sc-bg-alert'</span><span class="tag">&gt;&lt;/div&gt;</span>
  3. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 bc-head'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 sc-bg-active'</span><span class="tag">&gt;&lt;/div&gt;</span>
  5. 1
    <span class="tag">&lt;/div&gt;</span>

2、使用ub-rev

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uinn2 c-gra ub ub-rev uba b-bla'</span><span class="tag">&gt;</span>
  2. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 sc-bg-alert'</span><span class="tag">&gt;&lt;/div&gt;</span>
  3. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 bc-head'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
     <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'umh5 umw3 sc-bg-active'</span><span class="tag">&gt;&lt;/div&gt;</span>
  5. 1
    <span class="tag">&lt;/div&gt;</span>

Box架构实现横向滑动效果

定义:
ub-fh……
说明:
在box架构中ub-fh一般跟函数zyFlip()搭配着使用实现横向滑动效果

Box架构实现纵向滑动效果

定义:
ub-fv……
说明:
在box架构中ub-fv一般跟函数iScroll()搭配着使用实现纵向滑动效果

背景图片类别

定义:
ub-img[类别]……
说明:
前缀为ub-img
类别为数字编号,用于定义不同的背景排列方式
例子:

ub-img类别为空,定义将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终包含在容器内
ub-img1类别为1,定义将背景图片等比例缩放到完全覆盖容器,背景图像有可能超过容器
ub-img2类别为2,定义背景图像横向平铺
ub-img3类别为3,定义背景图像纵向平铺
ub-img4类别为4,定义背景图像横向100%,纵向自适应;
ub-img5类别为5,定义背景图像横向自适应,纵向为100%
ub-img6类别为6,定义背景图像居中显示

场景:

  1. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uba b-gra c-wh us uc-a '</span><span class="tag">&gt;</span>
  2. 1
    <span class="tag">&lt;div</span> <span class="atn">ontouchstart</span><span class="pun">=</span><span class="atv">'</span><span class="pln">zy_touch</span><span class="pun">(</span><span class="atv">'</span><span class="atn">btn-act</span><span class="atv">')'</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uc-t ubb ub b-gra t-bla ub-ac lis'</span><span class="tag">&gt;</span>
  3. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'lis-icon ub-img im'</span><span class="tag">&gt;&lt;/div&gt;</span>
  4. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1 ut-s'</span><span class="tag">&gt;</span><span class="pln">设置</span><span class="tag">&lt;/div&gt;</span>
  5. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'tx-r t-blu ulev-1'</span><span class="tag">&gt;</span><span class="pln">Old Phone</span><span class="tag">&lt;/div&gt;</span>
  6. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'res8 lis-sw ub-img'</span><span class="tag">&gt;&lt;/div&gt;</span>
  7. 1
    <span class="tag">&lt;/div&gt;</span>
  8. 1
    <span class="tag">&lt;div</span> <span class="atn">ontouchstart</span><span class="pun">=</span><span class="atv">'</span><span class="pln">zy_touch</span><span class="pun">(</span><span class="atv">'</span><span class="atn">btn-act</span><span class="atv">')'</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">' ub ubb b-gra t-bla ub-ac lis'</span><span class="tag">&gt;</span>
  9. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'lis-icon ub-img im'</span><span class="tag">&gt;&lt;/div&gt;</span>
  10. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1 ut-s'</span><span class="tag">&gt;</span><span class="pln">设置</span><span class="tag">&lt;/div&gt;</span>
  11. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'tx-r t-blu ulev-1'</span><span class="tag">&gt;</span><span class="pln">Old Phone</span><span class="tag">&lt;/div&gt;</span>
  12. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'res8 lis-sw ub-img'</span><span class="tag">&gt;&lt;/div&gt;</span>
  13. 1
    <span class="tag">&lt;/div&gt;</span>
  14. 1
    <span class="tag">&lt;div</span> <span class="atn">ontouchstart</span><span class="pun">=</span><span class="atv">'</span><span class="pln">zy_touch</span><span class="pun">(</span><span class="atv">'</span><span class="atn">btn-act</span><span class="atv">')'</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'uc-b ub t-bla ub-ac lis'</span><span class="tag">&gt;</span>
  15. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'lis-icon ub-img im'</span><span class="tag">&gt;&lt;/div&gt;</span>
  16. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'ub-f1 ut-s'</span><span class="tag">&gt;</span><span class="pln">设置</span><span class="tag">&lt;/div&gt;</span>
  17. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'tx-r t-blu ulev-1'</span><span class="tag">&gt;</span><span class="pln">Old Phone</span><span class="tag">&lt;/div&gt;</span>
  18. 1
    <span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">'res8 lis-sw ub-img'</span><span class="tag">&gt;&lt;/div&gt;</span>
  19. 1
    <span class="tag">&lt;/div&gt;</span>
  20. 1
    <span class="tag">&lt;/div&gt;</span>

图例:

根本的就是

<div style="width:300px; display:-webkit-box; display:box;">
<div style="-webkit-box-flex:1.0; border:1px solid #f00;">12</div>
<div style="-webkit-box-flex:2.0; border:1px solid #000;">12</div>
</div>

<div style="width:600px; display:-webkit-box;display:box;">
<div style="-webkit-box-flex:1; border:1px solid #f00"></div>
<div style="-webkit-box-flex:2; background:#ff0"></div>
</div>

 

 

1、表格隔行变色且隔td单元格变色,2、多色的th

1、表格隔行变色且隔td单元格变色

感谢 boahy给的思路,让我抛却了各种想的索引值的写法。不然还得在索引值的大坑里面扑腾下去。
td,行和列交叉有重色块。 需要看每行的颜色。(这个地方的颜色要用
“各一行一种样式
Boahy 16:35:30
写两种样式就够了
Boahy 16:35:42
然后交替显示每种样式
Boahy16:35:55
哪里有什么叠加”)“

为了表现明显些,我准备把这张图由1 变成2.
12014-07-25_094755
22014-07-25_095722

td颜色 第一行 32 32 32, 隔行 21 21 21(从每行来看,再找共同点奇偶行相同)

//td颜色
$('.tb tr:even td:even,.tb tr:odd td:odd').css({'background':'#ddd'});
$('.tb tr:even td:odd').css({'background':'#ccc'});

.tb tr:even td:even    tr:even 偶数行里面的 偶数td 和 奇数行里面的 奇数 td
偶数第一行是tr th行。实际有表现的是 偶数第二行 标注黑色字号的2 1 2 1 中的 22 为#ddd是偶数td。

.tb tr:odd td:odd    tr:odd  奇数行里面的 奇数td  32 32的2

$(‘.tb tr:even td:odd’).css({‘background’:’#ccc’})    偶数行的 奇数td。

以往做的时候多考虑,奇偶行数,这次把奇偶行数tr和奇偶表格td全考虑到了。

(私以为不会有人会遇到这么奇葩的表格)

2、多色的th ,这个用了两种方法

① 利用th索引值,添加递增样式。

 //th 的颜色
        $('.tb th').each(function(){
                        i=$(this).index();
                        $(this).addClass('tab_th'+i);
        });

所需要建立多个class

css文件

.tb  .tab_th0{ background:#64badc;}
.tb  .tab_th1{ background:#fdd059;}
.tb  .tab_th2{ background:#ec985f;}
.tb  .tab_th3{ background:#ec61ae;}
.tb  .tab_th4{ background:#7ae85a;}
.tb  .tab_th5{ background:#7b9ca3;}
.tb  .tab_th6{ background:#f4c377;}
.tb  .tab_th7{ background:#ca837b;}

麻烦,不过有可能其他项目会用到

② 利用数组存储背景颜色赋值 √  这个好用,有多个表格也不怕了

function tb_th(id){
	//th颜色
		var Arr=['#64badc','#fdd059','#ec985f','#ec61ae','#7ae85a','#7b9ca3','#f4c377','#ca837b'];
		for(var j=0 ;j<Arr.length;j++){
			$(id+' tbody tr th:eq('+j+')').css({'background':Arr[j]});
		};
	};
	//表格添加th背景色
	tb_th('#tb1');
	tb_th('#tb2');

ps:要保证Arr的颜色值个数= 最大的表格th个数。Arr.length  >=   th.length

demo1(class名字)

demo2(数组)

宽度100%,缩小浏览器,有滚动条,右侧出现空白bug

当浏览器窗口缩小,默认100%宽度为浏览器窗口的宽度。忽略下部内容层固定宽度(1100px)。就出现了固定宽度大于100%宽度的现象。查看以此理解来解析页面,就出现了容器宽度理解上的差异,出现了一个非常奇特的BUG。

width:expression_r(document.body.clientWidth <= 1100? "1100px": "auto"); min-width:1100px; 这种bug一般不常见,或者没有注意到。 但网站放到手机上浏览的时候,就会发现,右侧大块空白。 直接设置 把最大宽度设置成 min-width:npx; 即可