npm install alloylever

<script src="alloylever.js"></script>

window.console = {
    wc: window.console};var self = this;[''log'', ''error'', ''warn'', ''debug'', ''info''].forEach(function (item) {
    console[item] = function (msg) {
        this.wc[item](msg);
        self.log(msg, item);
    }});

var XHR = window.XMLHttpRequest;window.XMLHttpRequest=function(){
    var xhr = new XHR();
    checkSuccess(xhr);
    return xhr;};window.XMLHttpRequest.realXHR = XHR;var self=this;function checkSuccess(xhr) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        self.option.xhrs.push({url:xhr.responseURL, json:JSON.stringify(JSON.parse( xhr.responseText), null, "\t")})    }else if(xhr.status>=400) {
        console.error(xhr.responseURL +'' ''+xhr.status+'' (''+xhr.statusText+'')'')    }
    else{
        window.setTimeout(function () {
            checkSuccess(xhr);
        }, 0);
    }}

window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
    console.error(''Error: '' + errorMsg + '' Script: '' + url + '' Line: '' + lineNumber        + '' Column: '' + column + '' StackTrace: '' + errorObj);}

本文分享自微信公众号 - dotNET跨平台（opendotnet）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

0-移动web开发之概述

1 移动web开发概述

    国内移动端浏览器大多采用webkit内核。那么，什么是浏览器内核？

1.1 浏览器内核

1.1.1 浏览器内核的作用

    内核，亦“心脏”，是浏览器最重要的部分——“Rendering Engine”，被译为“渲染引擎”，一般习惯性地将浏览器的“渲染引擎”称之为“浏览器内核”。     浏览器内核主要负责解析网页语法并执行页面渲染。所以，（虽然浏览器内核分为渲染引擎和JS引擎两部分，但是）通常所说的浏览器内核就是指浏览器所采用的渲染引擎，它决定了浏览器如何显示网页的内容以及页面的格式信息。

    每个人的心脏活力不同，浏览器内核也是如此。不同的浏览器内核对网页内容的解析方式存在差异，因此，同一张网页页面在内核不同的浏览器里面的渲染效果也可能不同。这也是在进行网页开发时需要在不同内核浏览器中进行网页效果测试的原因。

1.1.2 浏览器&浏览器内核

    （1）浏览器的主要功能是向服务器发送请求，并在接收到服务器端的响应结果后，按照HTML和CSS规范中指定的方式（个浏览器并没有完全遵守这些规范），解析响应结果，然后在浏览器窗口中显示网络资源（包括：HTML文档、pdf、图片、媒体文件等）。

    （2）浏览器内核是浏览器的“心脏”，是支持浏览器运行的最核心的部分，主要可分为两个部分：①渲染引擎；②JS引擎。

1.2 主流浏览器&浏览器内核

1.2.1 五大主流浏览器&四大内核

    五大主流浏览器：IE/Edge，Chrome，Safari，Opera，Firefox。

    四大内核：Trident（也称IE内核）、webkit内核、Blink内核、Gecko内核。

    对应关系如下，

1.2.2 其它常见的浏览器及其内核

1.2.3 国内浏览器及其内核总结

• 使用的Trident单核，如：2345、世界之窗；
• 使用Trident+Webkit/Blink双核，如：qq、UC、猎豹、360、百度；
• 使用Webkit/Blink单核，如：搜狗、遨游。

1.2.4 移动端常见浏览器

    移动端常见的浏览器，像：UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360浏览器、谷歌浏览器、搜狗手机浏览器、猎豹浏览器，以及其它。

1.2.5 总结

    国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自助研发的内核，也即：WebKit是目前主流的移动浏览器渲染引擎，对主流浏览器的兼容性也比较好，在进行移动web开发时，主要需要处理Webkit内核浏览器。

1.3 移动端常见屏幕尺寸&相关技术方案

    仅列出部分，如下图所示，

    从上图中，可以看到移动设备屏幕尺寸以英尺为单位，不同设备对应的开发尺寸也各不相同。最后一列也出现了一个新的名词“物理像素比”。这是下面要讨论的内容。

1.3.1 物理像素比

    （1）物理像素（物理分辨率）：是指设备的屏幕分辨率（物理级的），是真实存在的。 PS：我们所使用的显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位是pt（绝对单位）。

    （2）虚拟像素（逻辑分辨率）：即CSS像素，以px为单位（相对单位）。虚拟像素的大小是可变的。

    （3）物理像素比：表示物理像素与虚拟像素的比值，即：物理像素/虚拟像素。例如：物理像素比为2，就意味着：需要使用2个物理像素来（从物理级别提供支持）填充一个虚拟像素。

    举个例子：我们通常所看到的PC端浏览器中，物理像素和虚拟像素默认是1：1的关系，但是，当使用“按住Ctrl+鼠标滚轮”的方式，将浏览器窗口进行缩放。

• ①当放大为200%时，原始内容的大小变为原始的2倍。此时：物理像素不会发生变化，它提供物理级别的渲染支持；而虚拟像素在效果上会产生“二倍”的视觉体验，但是px像素值并未改变，仅仅是需要使用更多的2个pt来填充这1个虚拟像素，即：物理像素/虚拟像素=2/1；
• ②当缩小为50%时，原始内容的大小变为原始的0.5倍。此时：物理像素不会发生变化，它仍旧提供物理级别的渲染支持；而虚拟像素在效果上会产生“0.5倍”的视觉体验，但是px像素值并未改变，仅仅是需要使用更少的0.5个pt来填充这1个虚拟像素，即：物理像素/虚拟像素=0.5/1。

    这里所提到的的比值就是物理像素比。

1.3.2 关于ppi&屏幕分辨率

    在1.3.1中已经提到“屏幕是由很多像素点组成的”，之前提到的分辨率都指的是：手机屏幕的实际像素尺寸。比如：480*800的屏幕，就是指整个手机屏幕是由800行、480列的物理像素点组成的。在页面渲染时，由每个物理像素点发出不同颜色的光，从而构成我们所能够看到的画面。

    但是，从之前1.3下的图中可以发现，手机的物理尺寸-英寸（1英寸约等于2.54厘米）和开发尺寸-像素尺寸是不成比例的。例如：IPhone6和Nexus 4都是4.7英寸（约为：11.515厘米-对角线长度），但是前者的像素尺寸为375px*667px，后者的像素尺寸为384px*640px。这就涉及到ppi的概念。

    pixel per inch，译为“每英寸的像素个数”，术语为“像素密度”，准确的说是：每英寸的长度上排列的像素点数量。

    那么上面提到的几个参数：inch英寸、像素尺寸：X px * Y px、ppi-像素密度，它们有什么具体的含义呢？它们之间存在什么样的关系呢？如下图所示，

1.3.3 物理像素比&视网膜屏技术

    早期手机的分辨率和px是一一对应的，但是这种制作工艺会造成移动端屏幕显示内容的模糊，即：通常所说的手机屏幕分辨率很低。视网膜屏技术的出现就是为了解决这样的问题。

    视网膜屏（Retina）技术就是将更多的物理像素点压缩到一块有限尺寸大小的屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

    一句话总结“视网膜屏技术”就是：提高手机屏幕的像素密度。并且通常使用ppi（pixel per inch）,即：每英寸长度所能够排列的像素的数目来衡量视网膜屏的工艺程度。PPI数值越高，即代表显示屏能够以更高的像素密度——更多的物理像素显示图像，物理像素比越大，当然，可用于显示的物理像素越多，手机屏幕中画面的拟真度就越高。

1.3.4 视网膜屏技术弊端&多倍图的使用

    视网膜屏技术的推广固然解决了手机屏幕分辨率过低的问题，但是也带来了一个新的问题：如果将低分辨率的图像放置在一个高分辨率的移动设备上显示，就会造成图像失真的问题（和照片被放大显示而失真是一个原理）。多倍图技术的出现是为了应对这个问题。

    多倍图：即在标准的viewport设备中，使用倍图来提高图片的分辨率，解决低分辨率图片在高清设备中显示模糊的问题。

    举个例子：要显示一个50px*50px分辨率的大小，但是在高清设备中被显示为100px*100px的图片，就会造成图片显示模糊。因为：此时物理像素比为：100 * ppi/50，（类似于降低分辨率的自拍在高清设备上放大显示），会造成图片的失真。

    那么。现在换个思路：预先准备一张100*100的图片，放在高清设备中手动缩小为50*50，此时的物理像素比为：50 * ppi /100，（类似于将高分辨率的自拍在高清设备上缩小显示），这样就可以保证图像不会失真，高清显示。

1.3.5 多倍图与background-size属性

    要想在移动设备上显示多倍图，就需要用到图像的缩放技术，在CSS中提供了background-size属性，来控制背景图的缩放比例。该属性的取值如下所示，

    例如：现有一个600px*281px大小的盒子，需要一个背景图，另有一张1200*562大小的二倍图可以使用。

    那么，对应的CSS代码可写为，

.box {
            width: 600px;
            height: 281px;
            background-color: greenyellow;
            background-image: url(''./images/bk1.jpg'');
            /* 二倍图缩放，也可以直接指定为与盒子相同大小的px */
            background-size: 100% 100%;
        }

2 移动端技术解决方案

2.1 移动端兼容性问题&浏览器私有前缀

    移动端浏览器基本上是以webkit内核为主，要考虑webkit的兼容性问题。但是对于H5标签和CSS3样式，webkit都是支持的，所以可以放心使用。而对于浏览器的私有前缀，只需要考虑添加webkit即可应对这种兼容性问题。下面是京东移动端的浏览器私有前缀添加方式，

.btns {
    position: relative;
    display: -webkit-box;/*-webkit浏览器私有内核前缀*/
    display: -webkit-flex;/*-webkit浏览器私有内核前缀*/
    display: flex;
    margin: 15px -15px 0
}

2.2 移动端样式的初始化

    为什么需要对移动端样式进行初始化操作？

• 1、html标签有默认属性
• 2、各个浏览器对默认属性的解释会有不同而造成视觉效果不同。
• 3、Normalize.css的作用就是给你没有自定义样式的默认标签定义一个统一的样式以保持各浏览器下视觉效果的统一。

    **移动端css初始化推荐使用normalize.css。**原因如下，

• ①保护了有价值的默认值；
• ②修复了浏览器的bug；
• ③是模块化的；
• ④拥有详细的文档。

    其官网地址为：https://necolas.github.io/normalize.css/

2.3 CSS3盒子模型的使用

    在使用CSS盒子模型时，考虑到盒子模型内边距（padding）、边框（border）的影响，在设置边距/边框属性时，会造成盒子width和height值的增大。     但是，CSS3盒子模型可以通过box-sizing属性来指定盒模型盒子大小的计算方式，其属性取值如下，

（1）content-box:盒子大小计算方式为【width+padding+border】——CSS3盒子模型的计算方式，推荐使用
（2）border-box：盒子大小计算方式为【width】——对应于传统CSS盒子模型的计算方式，不推荐使用

    使用属性值（2），就不会出现由于“内边距+边距”导致盒子变大的情况出现了。

2.4 特殊样式-页面布局优化

    除了使用2.3提到的CSS3盒子模型，以解决由于border、padding导致盒子模型可能会被撑大的问题之外，还需要考虑到其他的问题，因此可以采用如下的CSS代码对页面布局进行优化处理。

3 移动端技术选型

    主要有两种技术方案，

    （1）单独制作移动端页面（主流方案）。可选择的技术方案包括：

            ①流式布局（百分比布局）；

            ②flex弹性布局；

            ③less+rem+媒体查询布局；

            ④混合布局。

    （2）响应式页面兼容移动端。可选的技术方案包括：

            ①媒体查询；

            ②bootstrap。

2-移动web开发之Flex布局

1 Flex基本概念

    先介绍一下Flex布局的布局容器（flex-container）、Flex子项（flex-item）、主轴（main-axis）、侧轴（cross-axis）的概念。

1.1 什么是Flex布局？  

    在PC端页面布局时，我们经常使用传统的文档流（标准流）来进行整体页面的分块布局，然后结合浮动以及定位实现局部的布局处理，即：首先，使用标准流确定基本网页框架；其次，配合浮动和定位对子盒子进行布局。

    而Flex布局（flex box），意为“弹性布局”，用于为盒子模型提供最大的灵活性，该布局模式可以作用于任何一个容器（行内元素/行内块元素均可），都可以将其指定为flex布局。

    要注意的是：当把父盒子设置为flex布局之后，子元素的float、clear和vertical-align属性都将失效 。

1.2 布局容器/Flex容器

    采用flex布局的元素，称之为“Flex容器”，也即布局容器（flex-container）。通常要为其设置如下属性，即：要为父盒子添加display：flex属性，来控制子盒子的位置和排列方式（沿着横轴或纵轴排列）。

.box {
            /* 使用flex布局  */
            display: flex;
            /* 居中显示 */
            margin: 0 auto;
            /* 设置宽度占比 */
            width: 60%;
            background-color: green;
 }

1.3 Flex子项

    被添加了“display:flex”属性的父盒子中，所有的子元素就成为“flex子项（flex-item）”，通常要为子元素添加：flex属性，来控制每一个子元素占父盒子中剩余空间的份数/百分比。

    例如，为一个flex-container添加4个flex-item，并且使得flex具有相同的宽度。CSS代码如下所示，

        /* flex-container */
        .box2 {
            /* 使用flex布局  */
            display: flex;
            /* 居中显示 */
            margin: 0 auto;
            /* 设置宽度占比 */
            width: 60%;
            background-color: skyblue;
        }
        /* flex-item */
        .box2 span {
            /* 添加flex属性:指定所有flex-container中的flex-item都具有相同的长度 */
            flex: 1;
            /* 指定flex-item的高度，用于撑开flex-container（这样就不必为flex-container专门设置高度） */
            height: 50px;
            /* 设置flex-item之间的外边距 */
            margin: 0px 3px;
            background-color: hotpink;
        }

    显示效果如下所示，

1.4 flex-item在flex-container中的排列方式：横/纵轴

1.4.1 横轴（主轴）

    横轴（main-axis），也叫主轴，可以使得flex-item在flex-container中沿着浏览器窗口的X轴正向顺次排列，这也是flex布局下，flex-item默认的排列方式。从1.3中的例子就可以看出。

1.4.2 纵轴（侧轴）

    纵轴（across-axis），也叫侧轴，可以使得flex-item在flex-container中沿着浏览器窗口的Y轴正向排列。

1.4.3 flex布局：主轴方向的设置flex-direction

    在flex布局中，默认的主轴虽然是沿着浏览器窗口的X轴正向，但是也是可以将其调整为沿着浏览器窗口的Y轴正向顺序排列。对应的CSS属性为flex-direction，该属性的取值如下所示，

    例如，修改1.3中的flex-item在flex-container沿着浏览器的Y轴，逆向排列，CSS代码如下所示，

        /* flex-container */
        .box2 {
            /* 使用flex布局  */
            display: flex;
            /* 设置主轴方向 */
            flex-direction: column-reverse;
            /* 居中显示 */
            margin: 0 auto;
            /* 设置宽度占比 */
            width: 60%;
            background-color: skyblue;
        }
        /* flex-item */
        .box2 span {
            /* 添加flex属性:指定所有flex-container中的flex-item都具有相同的长度 */
            flex: 1;
            /* 指定flex-item的高度，用于撑开flex-container（这样就不必为flex-container专门设置高度） */
            height: 50px;
            /* 设置flex-item之间的外边距 */
            margin: 3px 3px;
            background-color: hotpink;
        }

    显示效果如下所示，

1.4.4 flex布局：主轴上子元素排列方式的设置justify-content

    在使用flex-direction设置好了flex-container的主轴方向之后，如果对子元素的排列方式不满意，还可以通过为flex-container添加justify-content属性对其进行修改，该属性的取值如下，

    例如，修改1.3中的flex-item垂直居中对齐显示，对应的CSS代码如下所示，

     /* flex-container */
    .box2 {
            /* 使用flex布局  */
            display: flex;
            /* 设置主轴方向 */
            /* flex-direction: column-reverse; */
            /* 设置flex-item在主轴方向上的排列方式 */
            justify-content: center;
            /* 居中显示 */
            margin: 0 auto;
            /* 设置宽度占比 */
            width: 60%;
            background-color: skyblue;
        }
        /* flex-item */
        .box2 span {
            /* 添加flex属性:指定所有flex-container中的flex-item都具有相同的长度 */
            flex: 1;
            /* 指定flex-item的高度，用于撑开flex-container（这样就不必为flex-container专门设置高度） */
            height: 50px;
            /* 设置flex-item之间的外边距 */
            margin: 3px 3px;
            background-color: hotpink;
        }

    显示效果如下所示，

1.4.5 flex布局：主轴上子元素的换行显示设置flex-wrap

    思考这样一个问题，当将flex-item的flex属性值设置为20%，使其一行只能摆放5个flex-item时，会发现即使放置了6甚至更多的个flex-item，它们仍旧是不换行显示的。

     原因在于 ：Flex布局中，flex-item子盒子默认是不换行的（即使指定了子盒子的宽度，flex布局也会对其进行修改，使之能够在一行内全部放下）。也就是说：如果一行中的所有子盒子的宽度之和大于父盒子，那么会自动调节子盒子的宽度，从而让所有盒子都能够摆放到一行之中。

    此时，为了让flex-item显示出自动换行的效果，就要为flex-container添加flex-wrap属性，使其内部的flex-item可以自动换行显示。该属性的取值有如下两个，

    例如：我们修改1.3中的flex-item的flex属性为25%，然后为flex-container添加第5个flex-item，并使其可以换行显示。CSS代码如下，

      /* flex-container */
        .box2 {
            /* 使用flex布局  */
            display: flex;
            /* 设置主轴方向 */
            /* flex-direction: column-reverse; */
            /* 设置flex-item在主轴方向上的排列方式 */
            justify-content: center;
            /* 设置flex-item默认可以换行显示 */
            flex-wrap: wrap;
            /* 居中显示 */
            margin: 0 auto;
            /* 设置宽度占比 */
            width: 60%;
            background-color: skyblue;
        }
        /* flex-item */
        .box2 span {
            /* 添加flex属性:指定所有flex-container中的flex-item都具有相同的长度 */
            flex: 25%;
            /* 指定flex-item的高度，用于撑开flex-container（这样就不必为flex-container专门设置高度） */
            height: 50px;
            /* 设置flex-item之间的外边距 */
            /* margin: 3px 3px; */
            background-color: hotpink;
        }

    显示效果如下所示，

1.4.6 flex布局：横/纵轴上整行/列子元素排列方式的设置

    沿着横轴/纵轴排放的flex-item可能是一行，也可能是多行的，就需要用到不用的CSS属性对整行/列的排列方式进行限制。

1.4.6.1 单行/单列的情况：align-items

    对于单行排列方式的控制，可以使用align-items属性，该属性的取值为，

    例如，修改1.3中的显示效果为单列flex-item元素，居中显示，CSS代码如下，

 /* flex-container */
.box2 {
            /* 使用flex布局  */
            display: flex;
            /* 设置主轴方向 */
            flex-direction: column;
            /* 设置flex-item在主轴方向上的排列方式 */
            justify-content: center;
            /* 设置flex-item默认可以换行显示 */
            flex-wrap: wrap;
            /* 设置单行flex-item的排列方式 */
            align-items: center;
            /* 居中显示 */
            margin: 0 auto;
            /* 设置宽度占比 */
            width: 60%;
            background-color: skyblue;
        }
        /* flex-item */
        .box2 span {
            /* 添加flex属性:指定所有flex-container中的flex-item都具有相同的长度 */
            flex: 25%;
            /* 指定flex-item的高度，用于撑开flex-container（这样就不必为flex-container专门设置高度） */
            width: 50px;
            height: 50px;
            /* 设置flex-item之间的外边距 */
            margin: 3px 3px;
            background-color: hotpink;
        }

    显示效果如下所示，

1.4.6.2 多行/多列的情况：align-content

    对于多行排列方式的控制，可以使用align-content属性，该属性的取值同align-items。

※aligin-items和align-content使用总结

1.4.7 flex-flow：复合属性-同时设置了flex-direction和flex-wrap

※flex-****属性总结

    以上介绍的属性，除了flex之外，其它都是针对flex-container容器的属性，总结如下，

1.5 Flex布局：flex-item相关的属性

    接下来主要介绍和flex-item，即：flex子项相关的属性。

1.5.1 flex属性：子项占剩余总空间的份数

    【剩余空间是指：除了通过固定数值n px指定的额外空间】

    作用：将父盒子按照:percent-value来为某一个子盒子指定所占总的剩余空间的份数/权重/百分比，默认值为0。

    例如，如下代码：就定义了一个flex-container中含有2个指定宽度的flex-item、1个flex属性为1的flex-item，CSS代码如下，

 section{
      /* flex布局模式 */
      display: flex;
      /* 居中显示 */
      margin: 0 auto;
      width: 80%;
      height: 150px;
      background-color: blanchedalmond;
    }

    /* :nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。 */
    div:nth-child(1){
      width: 150px;
      height: 100%;
      background-color: greenyellow;
    }
    div:nth-child(2){
      flex: 1;
      /* height: 100%; */
      background-color: blue;
    }
    div:nth-child(3){
      width: 150px;
      height: 100%;
      background-color: plum;
    }

    显示效果如下，

    也可以利用flex属性将flex-container的剩余空间进行平分，CSS代码如下，

p>span{
      /* 将父盒子的空间等分为3分 */
      flex: 1;
    }
    p>span:nth-child(1){
      background-color: rebeccapurple;
    }
    p>span:nth-child(2){
      background-color: greenyellow;
    }
    p>span:nth-child(3){
      background-color: blue;
    }

    显示效果如下，

1.5.2 align-self：控制单个子项在侧轴的排列方式

    控制子盒子集合中的某一个盒子具有与其它盒子不同的对齐方式。可用于覆盖align-items指定的全体子盒子的属性值。属性值：align-self取值同align-items属性的取值。默认值为auto，表示继承父元素的align-items属性，如果没有子盒子，则等同于stretch。     如下代码，使得第3个flex-item按照flex-end的方式进行排列，

    section{
      /* 指定flex布局 */
      display: flex;
      height: 150px;
      background-color: pink;
      justify-content: space-between;
    }

    section>span{
      /* margin: auto 0; */
      width: 150px;
      height: 40%;
    }
    section>span:nth-child(1){
      background-color: rebeccapurple;
    }

    section>span:nth-child(2){
      background-color: green;
    }
  /*将三号子盒子使用flex-end方式排列*/
    section>span:nth-child(3){
      background-color: blue;
      align-self: flex-end;
    }

    显示效果如下，

1.5.3 order：定义单个子项的排列顺序（前后顺序）

    作用：控制子盒子集合中的单个核子的排列方式。该属性值：默认值为0，指定数值，浏览器会按照属性值从小到大的顺序进行排列。

2 携程网首页案例

    最终部分效果如下图所示，

2.1 页面布局分析

2.2 部分模块制作

2.2.1 头部搜索框部分

    头部搜索框部分采用固定定位，使其在页面滚动时，仍旧保持原有的位置；同时，为了保证页面在变化时，搜索框input部分大宽度是可变的，因此，还需要使用到flex布局。

（1）结构代码如下，

 <!-- 顶部搜索 -->
    <div>
        <div>搜索:目的地/酒店/景点/航班号</div>
        <a href="#">我 的</a>
    </div>

（2）样式代码

/* 搜索模块 */

.search-index {
    /* 指定flex-container使用flex布局 */
    display: flex;
    /* 固定定位跟父级没有关系 它以屏幕为准 */
    position: fixed;
    top: 0;
    left: 50%;
    /* 固定的盒子应该有宽度-调整至水平居中显示 */
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    /* 流式布局：指定父盒子宽度占总宽的100% */
    width: 100%;
    /* 指定flex-container最大最小宽度 */
    min-width: 320px;
    max-width: 540px;
    /* 指定高度 */
    height: 44px;
    /* background-color: pink; */
    background-color: #F6F6F6;
    /* 设置边框属性 */
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.search {
    /* 定位：子绝父相 */
    position: relative;
    height: 26px;
    line-height: 24px;
    border: 1px solid #ccc;
    /* 指定input-flex-item部分占据flex-container的全部剩余空间 */
    flex: 1;
    font-size: 12px;
    color: #666;
    margin: 7px 10px;
    padding-left: 25px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

.search::before {
    /* 伪元素选择器：设置搜索图标 */
    content: "";
    /* 定位：子绝父相 */
    position: absolute;
    top: 5px;
    left: 5px;
    width: 15px;
    height: 15px;
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;
}

.user {
    /* 为user模块指定宽高 */
    width: 44px;
    height: 44px;
    /* background-color: purple; */
    font-size: 12px;
    text-align: center;
    color: #2eaae0;
}

.user::before {
    /* 伪元素选择器，设置用户图标 */
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    background: url(../images/sprite.png) no-repeat -59px -194px;
    background-size: 104px auto;
    margin: 4px auto -2px;
}

2.2.2 局部导航栏部分

    该部分主要是采用flex布局的方式，指定单个flex-item占宽度为25%；另外，还要为flex容器（flex-container）设置上下边距margin值，以及圆角边框效果（border-radius）。而对于单个flex-item来说，上部的图片和下部的文字也可以再次使用flex布局，并将主轴设置为沿着浏览器的Y轴方向，接着由于是单列摆放，可以使用align-items属性设置它们水平居中显示。

（1）结构代码如下，

 <!-- 局部导航栏 -->
    <ul>
        <li>
            <a href="#" title="景点·玩乐">
                <span></span>
                <span>景点·玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点·玩乐">
                <span></span>
                <span>景点·玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点·玩乐">
                <span></span>
                <span>景点·玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点·玩乐">
                <span></span>
                <span>景点·玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点·玩乐">
                <span></span>
                <span>景点·玩乐</span>
            </a>
        </li>

    </ul>

（2）样式代码如下，

/* local-nav */

.local-nav {
    /* 最外边的flex-container */
    display: flex;
    height: 64px;
    margin: 3px 4px;
    background-color: #fff;
    /* 指定圆角边框 */
    border-radius: 8px;
}

.local-nav li {
    /* 指定flex-item自动调整宽度 */
    flex: 1;
}

.local-nav a {
    /* 在li中再次使用flex布局 */
    display: flex;
    /* 调整主轴方向 */
    flex-direction: column;
    /* 侧轴居中对齐 因为是单行 */
    align-items: center;
    font-size: 12px;
}
/* 以下为设置内部flex-item的图片北京 */
.local-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
    background-color: pink;
    margin-top: 8px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}

.local-nav li .local-nav-icon-icon2 {
    background-position: 0 -32px;
}

.local-nav li .local-nav-icon-icon3 {
    background-position: 0 -64px;
}

.local-nav li .local-nav-icon-icon4 {
    background-position: 0 -96px;
}

.local-nav li .local-nav-icon-icon5 {
    background-position: 0 -128px;
}

2.2.3 主导航栏部分

    主要布局如上图所示，整体分为三行，每一行使用flex布局，将内部拆分为3部分；然后在内部的第2、3部分继续使用flex布局，调整主轴方向，文字显示效果，外边距等，得到上图显示的效果。

（1）结构代码如下，

<!-- 主导航栏 -->
    <nav>
        <div>
            <div>
                <a href="#">海外酒店</a>
            </div>
            <div>
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div>
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
        <div>
            <div>
                <a href="#">海外酒店</a>
            </div>
            <div>
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div>
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
        <div>
            <div>
                <a href="#">海外酒店</a>
            </div>
            <div>
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div>
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
    </nav>

（2）样式代码如下，

/* nav */

nav {
    /* 设置溢出隐藏 */
    overflow: hidden;
    border-radius: 8px;
    margin: 0 4px 3px;
}

.nav-common {
    /* 设置flex布局 */
    display: flex;
    height: 88px;
    background-color: pink;
}

.nav-common:nth-child(2) {
    margin: 3px 0;
}

.nav-items {
    /* 不冲突的 */
    flex: 1;
    /* 内部再次使用flex布局 */
    display: flex;
    flex-direction: column;
}

.nav-items a {
    flex: 1;
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 14px;
    /* 文字阴影 */
    text-shadow: 1px 1px rgba(0, 0, 0, .2);
}

.nav-items a:nth-child(1) {
    border-bottom: 1px solid #fff;
}

.nav-items:nth-child(1) a {
    border: 0;
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size: 121px auto;
}


/* -n+2就是选择前面两个元素 */

.nav-items:nth-child(-n+2) {
    border-right: 1px solid #fff;
}

.nav-common:nth-child(1) {
    background: -webkit-linear-gradient(left, #FA5A55, #FA994D);
}

.nav-common:nth-child(2) {
    background: -webkit-linear-gradient(left, #4B90ED, #53BCED);
}

.nav-common:nth-child(3) {
    background: -webkit-linear-gradient(left, #34C2A9, #6CD559);
}

    另外，这部分还用到了背景渐变，可以使用背景属性background配合linear-gradient() 函数实现，设置方式可参见菜鸟教程：https://www.runoob.com/cssref/func-linear-gradient.html

AlloyLever —— 腾讯 Web 开发调试工具

AlloyLever是腾讯AlloyTeam团队开源的一款Web 开发调试工具。

功能：

• 点击alloylever按钮之间切换显示或隐藏工具面板

• Console会输出所有用户打印的日志如console.[log/error/info/debug/debug]

• Console会输出所有的错误信息(脚本错误和网络请求错误)

• XHR面板会输出所有（XMLHttpRequest）AJAX请求和服务器端返回的数据

• Resouces面板会输出所有的Cookie信息和LocalStorage

• TimeLime面板会输出页面相关的生命周期里的时间段耗时情况

Android开发调试工具ADB的使用

学习参考博客:

https://www.cnblogs.com/meil/archive/2012/05/24/2516055.html

ADB（Android Debug Bridge）是Android SDK中的一个工具, 使用ADB可以直接操作管理Android模拟器或者真实的Andriod设备。
    ADB主要功能有:
    1、在Android设备上运行Shell(命令行)
    2、管理模拟器或设备的端口映射
    3、在计算机和设备之间上传/下载文件
    4、将电脑上的本地APK软件安装至Android模拟器或设备上

ADB是一个客户端-服务器端程序, 其中客户端是你用来操作的电脑, 服务器端是android设备。

2、如果你已经安装了Android SDK 那么你可以在你的SDK目录下找到 ..\android-sdk-windows\platform-tools 这个目录，ADB工具就放在这里。如图：

常用的ADB命令

    a) adb install <apk文件路径>

      这个命令将指定的apk文件安装到设备上

    b) adb uninstall <软件名>
        adb uninstall -k <软件名>

        如果加 -k 参数,为卸载软件但是保留配置和缓存文件.

    c)adb shell 

       这个命令将登录设备的shell
       adb shell <command命令>

      后面加<command命令>将是直接运行设备命令, 相当于执行远程命令

    d)adb help

      这个命令将显示帮助信息

   c)adb push <本地路径> <远程路径>
       从电脑上发送文件到设备

       adb remount 在执行push命令之前我们还需要使用remount命令获取上传文件权限，否则会出现

       Read-only file system 的错误提示信息

关于移动web开发调试工具AlloyLever介绍和移动web开发教程的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于0-移动web开发之概述、2-移动web开发之Flex布局、AlloyLever —— 腾讯 Web 开发调试工具、Android开发调试工具ADB的使用等相关知识的信息别忘了在本站进行查找喔。