huapin

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <!-- 优先使用 IE 最新版本和 Chrome -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <!-- 关闭电话号码的自动识-->

    <meta name="format-detection" content="telephone=no,email=no" />

    <!-- 页面描述 -->

    <meta name="description" content="百胜扬是一家做企业收并购整合的工业电子商务平台公司..."/>

    <!-- 页面关键词 -->

    <meta name="keywords" content="百胜扬"/>

    <!-- 网页作者 -->

    <meta name="author" content="百胜扬"/>

    <!-- 为移动设备添加 viewport -->

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    <!-- 强制竖屏 -->

    <meta name="screen-orientation" content="portrait">

    <!-- UC强制全屏 -->

    <meta name="full-screen" content="yes">

    <!-- 强制全屏 -->

    <meta name="x5-fullscreen" content="true">

    <!-- UC应用模式 -->

    <meta name="browsermode" content="application">

    <!-- 应用模式 -->

    <meta name="x5-page-mode" content="app">

    <!-- winphone系统a、input标签被点击时去掉半透明灰色背景-->

    <meta name="msapplication-tap-highlight" content="no">

    <link rel="stylesheet" href="../../../macs/mcbas/miconfont.css">

    <link rel="stylesheet" href="../../../macs/mcbas/mbastandard.css"/>

    <link rel="stylesheet" href="../../../macs/mcbam/mcbas/mcbasear/mbaseari-a-1.css"/>

</head>

<body ontouchstart>

    <div class="head-stus"></div>

    <div class="main-c">

        <div class="head-overall">

            <header>

                <span>

                    <i class="iconfont icon-fanhui"></i>

                </span>

                <section class="inp-sear">

                    <i class="iconfont icon-sousuo"></i>

                    <input type="text" placeholder="">

                    <i class="iconfont icon-yuyin"></i>

                </section>

                <span>

                    Search

                </span>

            </header>

        </div>

        <div class="con-main">

            <nav class="clrflo">

                <h2>Hot search</h2>

                <div class="contrl-hotsear clrflo">

                    <div class="hotsear" id="hotsear">

                        <ul class="clrflo">

                            <li>iPhone SEs</li>

                            <li>Huawei Mata9</li>

                            <li>LG G5</li>

                            <li>MEIZU Pro</li>

                            <li>Xiaomi 5</li>

                            <li>Mate Book</li>

                            <li>Vivo Xplay 5</li>

                            <li>OPPO S9</li>

                            <li>NOKIA N10</li>

                        </ul>

                        <ul class="clrflo " >

                            <li>iPhone2 SEs</li>

                            <li>Huawei2 Mata9</li>

                            <li>LG2 G5</li>

                            <li>MEIZU2 Pro</li>

                            <li>Xiaomi2 5</li>

                            <li>Mate2 Book</li>

                            <li>Vivo2 Xplay 5</li>

                            <li>OPPO2 S9</li>

                            <li>NOKIA2 N10</li>

                        </ul>

                        <ul class="clrflo ">

                            <li>iPhone3 SEs</li>

                            <li>Huawei3 Mata9</li>

                            <li>LG3 G5</li>

                            <li>MEIZU3 Pro</li>

                            <li>Xiaomi3 5</li>

                            <li>Mate3 Book</li>

                            <li>Vivo3 Xplay 5</li>

                            <li>OPPO3 S9</li>

                            <li>NOKIA3 N10</li>

                        </ul>

                    </div>

                </div>

                <div class="dot-hotsear" id="dot-hotsear">

                    <i class="iconfont icon-dian active"></i>

                    <i class="iconfont icon-dian"></i>

                    <i class="iconfont icon-dian"></i>

                </div>

            </nav>

            <section >

                <ul>

                    <li>

                        <i class="iconfont icon-zuji"></i>

                        iPhone 6S gold 128G

                    </li>

                    <li>

                        <i class="iconfont icon-zuji"></i>

                        iPhone 6S gold 128G

                    </li>

                    <li>

                        <i class="iconfont icon-zuji"></i>

                        iPhone 6S gold 128G

                    </li>

                    <li>

                        <i class="iconfont icon-zuji"></i>

                        iPhone 6S gold 128G

                    </li>

                    <li>

                        <i class="iconfont icon-zuji"></i>

                        iPhone 6S gold 128G

                    </li>

                    <li>

                        <i class="iconfont icon-zuji"></i>

                        iPhone 6S gold 128G

                    </li>

                </ul>

                <a href="javascript:;" class="btn-clrhisty">Clear History</a>

            </section>

        </div>

    </div>

    <script src="../../../majs/mjbas/zepto.min.js"></script>

    <script src="../../../majs/mjbam/mjbas/mjbasear/mbaseari-a-1.js"></script>

</body>

</html>

css

*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
-ms-touch-action: none;
-moz-user-select: -moz-none;
}
/* head-stus start */
.head-stus{
z-index: 100;
width: 100%;
height:20px;
position:fixed;
top:0;
left:0;
background: rgba(0,0,0,0.8);
}
/* head-stus end */

/* header start */
.head-overall{
position:fixed;
z-index:99;
width:100%;
padding-top:20px;
}
header{
z-index: 99;
width:100%;
/* height:48px;
line-height:48px; */
padding:5px 0;
text-align: center;
background: #fff;
box-sizing:content-box;
overflow: hidden;
}
header span:nth-of-type(1){
float:left;
padding:4px 18px;
}
header span:last-of-type{
float:right;
padding:7px 8px;
}
header i.iconfont{
font-size: 22px;
color:#353535;
font-weight: normal;
}

header section.inp-sear{
display: inline-block;
float: left;
position: relative;
width: calc(100% - 54px - 75px);
height:32px;
border:1px solid #f6f6f6;
border-radius: 4px;
background: #f2f2f2;
line-height: 48px;
box-sizing: content-box;
}
header section.inp-sear .icon-sousuo{
float:left;
padding: 0 8px;
font-size: 16px;
line-height: 32px;
color:#ccc;
}
header section.inp-sear .icon-yuyin,
header section.inp-sear .icon-qingchu{
float: right;
position:absolute;
right:0;
z-index:2;
padding: 0 8px;
font-size: 16px;
line-height: 32px;
color: #969696;
/*border:1px solid #000;*/
}
header section.inp-sear input{
float: left;
width: 84%;
height: 100%;
border: 0;
font-size: 16px;
line-height: 32px;
outline: none;
background: transparent;
text-indent: 4px;
}
header .active{
color:#f85200;
}
input::-webkit-input-placeholder{
color:#222222;
}
input:focus::-webkit-input-placeholder{
color:#888888;
}
/* header end */

/* con-main start */
.con-main{
padding-top:68px;
overflow: hidden;
}
.con-main nav{
width:100%;
position:relative;
margin:0 9px;
overflow: hidden;
}
.con-main nav h2{
font-size:12px;
padding-top: 5px;
font-weight:400;
}
.con-main nav .contrl-hotsear{
width:100%;
height:114px;
overflow: hidden;
}
.con-main nav .hotsear{
width:300%;
overflow: hidden;
}
.con-main nav ul{
width:33.333%;
float:left;
}
.con-main nav ul li{
float: left;
height: 34px;
width: calc(33.333% - 12px);
margin-right: 9px;
margin-top: 4px;
border: 1px solid #f0f0f0;
border-radius: 4px;
font-size: 13px;
line-height: 34px;
background: #fff;
text-align: center;
}
.con-main nav .dot-hotsear{
text-align: center;
}
.con-main nav .dot-hotsear i{
display: inline-block;
font-size: 12px;
line-height: 30px;
color: #d4d4d4;
padding: 0 2px;
transform: scale(0.75);
-webkit-transform: scale(0.75);
}
.con-main nav .dot-hotsear i.active{
color:#f96302;
}
.con-main section ul{
border-top:1px solid #ebebeb;
}
.con-main section ul li{
border-bottom:1px solid #ebebeb;
font-size:15px;
line-height: 47px;
background: #fff;
}
.con-main section ul li i{
padding:0 10px;
font-size:20px;
color:#a9a9a9;
}
.con-main section ul li i.icon-sousuo{
padding:0 10px;
font-size:17px;
color:#a9a9a9;
}
.con-main section a.btn-clrhisty{
display:block;
height: 46px;
border:1px solid #cacaca;
border-radius:4px;
margin:33px 13px 0 13px;
text-align: center;
line-height:46px;
background: #fff;
}
.con-main .sear-result{
margin-top:8px;
}
.con-main section ul li span{
float:right;
padding-right:10px;
font-size: 8px;
color:#a3a3a3;
}
.display-n{
display:none;
}
/* con-main end */

for(var i = 0;i < aBtns.length;i++){
if(i != iNow){
removeClass(aBtns[i] ,'active');
}else{
addClass(aBtns[i],'active');
}
}
oHotsear.style.WebkitTransition = oHotsear.style.transition = '0.2s';
toStyle();
}

function toStyle(){
oHotsear.style.WebkitTransform = oHotsear.style.transform = 'translateX('+iScroll+'px)';
}

huapin的更多相关文章

swiper 实现滑动解锁
最近项目中有这样一个需求,研究了两种写法一个原生,一个使用框架原生写法: <!DOCTYPE html> <html> <head> <meta chars ...

随机推荐

T-SQL基础（五）之增删改
在前面的文章中对T-SQL的查询做了基本总结,接下来我们看下SQL中的另外一个常用操作——数据的修改. INSERT INSERT 向数据表中插入数据的基本语句,句式: INSERT INTO tab ...
汇编语言--微机CPU的指令系统（五）（标志位操作指令）
(2)标志位操作指令标志位操作指令是一组对标志位置位.复位.保存和恢复等操作的指令. 1.进位CF操作指令 Ø 清进位指令CLC(Clear Carry Flag):CF←0 Ø 置进位指令STC( ...
ES6 import and export
定义: 用来导入或者导出模块. ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";. 严格模式主要有以下限制. 变量必须声明后再使用函数的参数不 ...
远程过程调用概述-RMI简介
简介: RPC是远程过程调用(Remote Procedure Call)的缩写形式.SAP系统RPC调用的原理其实很简单,有一些类似于三层构架的C/S系统,第三方的客户程序通过接口调用SAP内部的标 ...
bootstrap timepicker 在angular中取值赋值并转化为时间戳
上一篇我们讲到angular对于timepicker的一个封装后的插件angular-bootstrap-timepicker,但是由于angular的版本必须是v1.2.30以上的.对于有些涉及到多 ...
iPhone照片格式heic图片怎么打开
苹果自iOS11系统之后默认的是heic图片格式,在电脑和安卓中都无法直接查看,需要将其转换图片格式,那苹果heic图片怎么转换成jpg格式?下面我们一起来看看吧! 使用工具:电脑.图片操作方法: ...
Android在程序崩溃或者捕获异常之后重新启动app
在Android应用开发中,偶尔会因为测试的不充分导致一些异常没有被捕获,这时应用会出现异常并强制关闭,这样会导致很不好的用户体验,为了解决这个问题,我们需要捕获相关的异常并做处理. 首先捕获程序崩溃 ...
ImportError: No module named simplejson.scanner
一.出现ImportError: No module named simplejson.scanner,是没有安装simplejson,安装一下就好了. 安装指令:python setup.py in ...
Java synchronized解析
多线程三大特性: 可见性.原子性.有序性 synchronize的特性: 1.同一时刻只有一个线程访问临界资源 2.其它未获取到锁执行权的线程必须排队等待 3.保证共享资源的原子性.可见性和有序性 4 ...
chrome正确的打开方式
1:修改默认的搜索引擎原因是中国不能使用Google浏览器,所以需要对其默认的搜索引擎进行改造: 三个点/设置/修改默认搜索引擎 2:使用插件; 右上角的省略号小点/更多工具/扩展应 ...

huapin

huapin的更多相关文章

随机推荐

热门专题