移动Web开发--学习笔记一布局

最新推荐文章于 2024-04-27 15:31:42 发布

DevCsdner

最新推荐文章于 2024-04-27 15:31:42 发布

阅读量185

点赞数

分类专栏：前端文章标签： html css3 css

本文链接：https://blog.csdn.net/smartboy_01/article/details/105028924

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

移动Web开发

网页适配

流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局
视觉窗口：viewport是移动端特有。这是一个虚拟的区域，承载网页的。
承载关系：浏览器---->viewport---->网页

适配要求：

网页宽度必须和浏览器保持一致
默认显示的缩放比例和PC端保持（缩放比例1.0）
不允许用户自行缩放网页

满足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案。

适配设置：

如果任何设置都没有，默认走的就是viewport的默认设置。

可以手去设置新的viewport设置,达到适配要求。
<meta name="viewport"> 设置视口的标签在head里面并且应该紧接着编码设置

viewport的功能：

width 可以设置宽度 (device-width 当前设备的宽度)
height 可以设置高度
initial-scale 可以设置默认的缩放比例
user-scalable 可以设置是否允许用户自行缩放
maximum-scale 可以设置最大缩放比例
minimum-scale 可以设置最小缩放比例

在<meta name="viewport" content="" > content=""使用以上参数

width=device-width 宽度一致比例是1.0
initial-scale=1.0 宽度一致比例是1.0
user-scalable=no 不允许用户自行缩放（yes，no 1,0）

标准适配方案：

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

meta:vp + tab 快捷方式

非主流的适配方案

页面的真实尺寸会比在设备的上尺寸要大几倍
假设设备是iphone4 -> 320px -> 网页尺寸640px
缩放操作，有2倍的有3倍和屏幕像素比有关系
什么是屏幕像素（物理像素，像素点） px(页面的尺寸单位)
1. 物理像素是设备显示屏的最小可视颗粒的大小以前的手机（直板手机）
2. 现在有高清显示屏视网膜屏 retina屏,显示的效果就提高了更细腻，但是在显示同等质量的图片的时候（模糊效果）
在屏幕像素比（一个px宽的屏幕能放几个物理像素）高的设备图片（非矢量）显示会模糊
提高网页的清晰度根据屏幕的像素比来缩放网页
但是这样的适配方案成本非常高
一般的企业开发当中使用的还是标准化设置
在高清显示屏当中：图片可能会失真（模糊）

移动端Web开发工具

JS
一般不使用jquery,jQuery做了很多桌面浏览器的兼容问题特别是IE，但是移动端没有IE浏览器

主流的浏览器：谷歌火狐（2016年停止了维护和更新） safari浏览器百度 360 qq …

特点：内核基本上都是 webkit 或者 blink 兼容 -webkit-
使用H5的api或者说使用一个叫做： zepto.js的库（基于高版本浏览器开发）中文地址https://www.html.cn/doc/zeptojs_api/

CSS使用box-sizing: border-box;

为了使用box-sizing: border-box;一般加padding控制边距，border-box从border开始计算，加margin会增加盒子的总大小，使用百分比布局时容易出现超出100%的情况,出现滚动条。

移动端以流式布局为主
百分比布局
非固定像素布局
无法准确计算容器的尺寸

box-sizing.hmtl测试使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--标准设置-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            border: 20px solid pink;
            height: 1000px;
            /*防止内容溢出  不出现滚动条  提供用户体验*/
            /*取消时会出现滚动条*/
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<!--
1. 移动端以流式布局为主
2. 百分比布局
3. 非固定像素布局
4. 无法准确计算容器的尺寸
-->
<div class="box"></div>
</body>
</html>

基本CSS

/*=======reset css========*/
*,
*::before,
*::after{
    /*所有的标签，和伪元素都选中*/
    margin: 0;
    padding: 0;
    /*移动端常用布局是非固定像素*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*点击高亮效果的清除*/
    tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
}
body{
    font-size: 14px;
    font-family: "Microsoft YaHei",sans-serif;
    color: #333;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
    color: #333;
}
input,textarea{
    border: none;
    outline: none;
    /*不允许改变尺寸*/
    resize: none;
    /*元素的外观  none没有任何样式*/
    -webkit-appearance: none;
}
/*=======common css========*/
.f_left{
    float: left;
}
.f_right{
    float: right;
}
.clearFix::before,
.clearFix::after{
	/*设置内容为空*/
    content: "";
    /*占位*/
    display: block;
    /*不可见*/
    visibility: hidden;
    /*高度为0*/
    height: 0;
    /*高度为0*/
    line-height: 0;
    /*清空*/
    clear: both;
}
.m_l10{
    margin-left:10px;
}
.m_r10{
    margin-right:10px;
}
.m_t10{
    margin-top:10px;
}
.m_b10{
    margin-bottom:10px;
}
/*使用精灵图的公用样式*/
[class^="icon_"],[class*=" icon_"]{
    background-repeat: no-repeat;
    background-image: url("../images/sprites.png");
    /*设置大小，2倍图进行压缩*/
    background-size: 200px 200px;
}

首页页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>京东移动站-首页</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--版心-->
<!--
1.最大宽度设置成了640px
2.设计稿psd的尺寸就是640px
3.目的：当设备的尺寸比设计稿不至于失真
4.640px的尺寸设计稿的原因：根据当前主要流行的设备尺寸有关系iphone4,4s 尺寸320px
5.750px的设计稿：参考原型iphone6 尺寸375px
6.最小宽度320px  保证最小的宽度320px不让页面错乱
-->
<div class="jd_container">
    <!--顶部搜索:双飞翼布局-->
    <header class="jd_search">
        <div class="jd_search_box">
            <a href="#" class="red icon_logo"></a>
            <form action="#">
                <span class="icon_search"></span>
                <input type="search" placeholder="占位符">
            </form>
            <a href="#" class="login">登录</a>
        </div>
    </header>
    <!--轮播图-->
    <div class="jd_banner">
        <ul>
            <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l2.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l3.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l4.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l5.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l6.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l7.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
        </ul>
        <ul>
            <li class="now"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!--导航栏-->
    <nav class="jd_nav">
        <ul class="clearFix">
            <li><a href="#"><img src="images/nav0.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav1.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav2.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav3.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav4.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav5.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav6.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav7.png" alt=""><p>分类</p></a></li>
        </ul>
    </nav>
    <!--产品区块-->
    <div class="jd_product">
        <section class="jd_product_box sk"><!--second kill-->
            <div class="tit nb">
                <div class="f_left">
                    <span class="icon"></span>
                    <span class="name">掌上描述</span>
                    <div class="time">
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                    </div>
                </div>
                <div class="f_right"><a class="m_r10" href="#">更多&gt;</a></div>
            </div>
            <div class="con">
                <ul class="pro clearFix">
                    <li>
                        <a href="#"><img src="images/detail01.jpg" alt=""></a>
                        <p class="nowPrice">&yen;10.00</p>
                        <p class="oldPrice">&yen;100.00</p>
                    </li>
                    <li>
                        <a href="#"><img src="images/detail02.jpg" alt=""></a>
                        <p class="nowPrice">&yen;10.00</p>
                        <p class="oldPrice">&yen;100.00</p>
                    </li>
                    <li>
                        <a href="#"><img src="images/detail01.jpg" alt=""></a>
                        <p class="nowPrice">&yen;10.00</p>
                        <p class="oldPrice">&yen;100.00</p>
                    </li>
                </ul>
            </div>
        </section>
        <section class="jd_product_box">
            <div class="tit"><h3>京东超市</h3></div>
            <div class="con clearFix">
                <a class="w_50p f_left br" href="#"><img src="images/cp1.jpg" alt=""></a>
                <a class="w_50p f_right bb" href="#"><img src="images/cp2.jpg" alt=""></a>
                <a class="w_50p f_right" href="#"><img src="images/cp3.jpg" alt=""></a>
            </div>
        </section>
        <section class="jd_product_box">
            <div class="tit"><h3>京东自营</h3></div>
            <div class="con clearFix">
                <a class="w_50p f_right bl" href="#"><img src="images/cp4.jpg" alt=""></a>
                <a class="w_50p f_left bb" href="#"><img src="images/cp5.jpg" alt=""></a>
                <a class="w_50p f_left" href="#"><img src="images/cp6.jpg" alt=""></a>
            </div>
        </section>
        <section class="jd_product_box">
            <div class="tit"><h3>京东热门</h3></div>
            <div class="con clearFix">
                <a class="w_50p f_left br" href="#"><img src="images/cp1.jpg" alt=""></a>
                <a class="w_50p f_right bb" href="#"><img src="images/cp2.jpg" alt=""></a>
                <a class="w_50p f_right" href="#"><img src="images/cp3.jpg" alt=""></a>
            </div>
        </section>
    </div>
</div>

<script src="js/common.js"></script>
<script src="js/index.js"></script>
</body>
</html>

页面CSS

body{
    background: #f5f5f5;
}
/*版心*/
.jd_container{
    min-width: 320px;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}
/*顶部搜索*/
.jd_search{
    width: 100%;
    height: 40px;
    /*fixed后不能居中*/
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
}
/*内容居中*/
.jd_search .jd_search_box{
    height: 40px;
    background: rgba(201,21,35,0.85);
    min-width: 320px;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.jd_search .jd_search_box .icon_logo{
    position: absolute;
    left: 10px;
    top: 4px;
    width: 60px;
    height: 36px;
    background-position: 0 -103px;
}
.jd_search .jd_search_box .login{
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
}
.jd_search .jd_search_box form{
    width: 100%;
    padding-left:70px;
    padding-right:50px;
    position: relative;
}
.jd_search .jd_search_box form .icon_search{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 80px;
    top: 10px;
    background-position: -60px -109px;
    /*缩放*/
    /*background:url(../sprites.png) no-repeat -60px -109px / 200px 200px*/
}
/*百分比的计算：基于父容器的内容的宽度*/
.jd_search .jd_search_box form input{
    width: 100%;
    height: 30px;
    margin-top:5px;
    background: #fff;
    border-radius: 15px;
    padding-left: 40px;
}
/*轮播图*/
.jd_banner{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.jd_banner ul:first-child{
    width: 1000%;
    transform: translateX(-10%);
    -webkit-transform: translateX(-10%);
}
.jd_banner ul:first-child li{
    width: 10%;
    float: left;
}
.jd_banner ul:first-child li a{
    display: block;
    width: 100%;
}
.jd_banner ul:first-child li a img{
    display: block;
    width: 100%;
}
.jd_banner ul:last-child{
    position: absolute;
    width: 118px;
    height: 6px;
    left: 50%;
    margin-left:-59px;
    bottom: 6px;
}
.jd_banner ul:last-child li{
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 1px solid #fff;
    margin-left:10px;
    float: left;
}
.jd_banner ul:last-child li:first-child{
    margin-left:0;
}
.jd_banner ul:last-child li.now{
    background: #fff;
}
/*导航栏*/
.jd_nav{
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #ccc;
}
.jd_nav ul{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.jd_nav ul li{
    width: 25%;
    float: left;
}
.jd_nav ul li a{
    display: block;
    width: 100%;
}
.jd_nav ul li a img{
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}
.jd_nav ul li a p{
    text-align: center;
    font-size: 12px;
    color: #666;
    padding: 5px 0;
}
/*产品区块*/
.jd_product{
    padding: 0 5px;
}
/*产品盒子*/
.jd_product_box{
    margin-top: 10px;
    box-shadow: 0 0 2px #ccc;
    background: #fff;
}
.jd_product_box .tit{
    height: 34px;
    line-height: 34px;
    border-bottom: 1px solid #ddd;
}
.jd_product_box .tit.nb{
    border-bottom: none;
}
.jd_product_box .tit h3{
    font-weight: normal;
    position: relative;
    padding-left:23px;
}
.jd_product_box .tit h3::before{
    content: "";
    width: 3px;
    height: 12px;
    background: #d8505c;
    position: absolute;
    left: 10px;
    top: 11px;
}

/*秒杀*/
.sk .icon{
    width: 16px;
    height: 20px;
    float: left;
    margin-left:10px;
    margin-top:7px;
    background: url("../images/seckill-icon.png") no-repeat center/16px 20px;
}
.sk .name{
    float: left;
    margin-left:10px;
    font-size: 16px;
    color: #d8505c;
}
.sk .time{
    float: left;
    margin-left:10px;
}
.sk .time span{
    float: left;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: #333;
    margin-left: 3px;
    margin-top:9px;
}
.sk .time span:nth-child(3n){
    background: #fff;
    width: 3px;
    color: #333;
}
.sk .pro{
    width: 100%;
    padding: 10px 0;
}
.sk .pro li{
    width: 33.3333%;
    float: left;
}
.sk .pro li a{
    display: block;
    border-right: 1px solid #ddd;
}
.sk .pro li:last-child a{
    border-right:none;
}
.sk .pro li a img{
    display: block;
    margin: 0 auto;
    width: 64%;
}
.sk .pro li p{
    text-align: center;
    font-size: 12px;
    padding: 5px 0;
}
.sk .pro li .nowPrice{
    color: #d8505c;
}
.sk .pro li .oldPrice{
    color: #666;
    text-decoration: line-through;
}

/*组合样式的使用*/
.w_50p{
    width: 50%;
}
.w_50p img{
    display: block;
    width: 100%;
}
.bl{
    border-left:1px solid #ddd;
}
.br{
    border-right:1px solid #ddd;
}
.bb{
    border-bottom:1px solid #ddd;
}

顶部搜索:双飞翼布局

两栏自适应布局

小技巧通过文本环绕实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .box1{
            float: left;
            width: 100px;
            height: 100px;
            background: pink;
        }        
    </style>
</head>
<body>
<!--1.小技巧-->
<!--2.文本环绕-->
<div class="box1"></div>
<div class="box2">
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>

效果
在这里插入图片描述
想方法让左侧盒子占用整个高度即可满足两栏

 .box2{
     /*让这个元素绝对绝缘  bfc*/
     /*不让其他浮动元素影响自己*/
     /*不让自己的浮动去影响别的元素*/
     overflow: hidden;
 }

overflow: hidden;这个元素绝对绝缘bfc规定

不让其他浮动元素影响自己
不让自己的浮动去影响别的元素

注意

两栏自适应注意，要使浮动元素优先放在代码上部
浏览器从上向下解析，先使用浮动占位后再使用块元素，可以达到两栏自适应效果
否则，块级元素先解析后占用整行，再浮动也不可能两栏

<!--不能达到两栏效果-->
<div class="box2">
<div class="box1"></div>

分类页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>京东移动站-分类</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/category.css">
</head>
<body>
<!--全屏容器-->
<div class="jd_layout">
    <!--顶部通栏-->
    <header class="jd_topBar">
        <a href="#" class="icon_back"></a>
        <form action="#"><input type="search" placeholder="顶部通栏"></form>
        <a href="#" class="icon_menu"></a>
    </header>
    <!--分类主体:两栏自适应布局-->
    <div class="jd_main">
        <div class="jd_cateLeft">
            <ul>
                <li class=""><a href="javascript:;">热门推荐</a></li>
                <li class="now"><a href="javascript:;">潮流女装</a></li>
                <li class=""><a href="javascript:;">品牌男装</a></li>
                <li class=""><a href="javascript:;">内衣配饰</a></li>
                <li class=""><a href="javascript:;">家用电器</a></li>
                <li class=""><a href="javascript:;">电脑办公</a></li>
                <li class=""><a href="javascript:;">手机数码</a></li>
                <li class=""><a href="javascript:;">母婴频道</a></li>
                <li class=""><a href="javascript:;">图书</a></li>
                <li class=""><a href="javascript:;">家居家纺</a></li>
                <li class=""><a href="javascript:;">居家生活</a></li>
                <li class=""><a href="javascript:;">家具建材</a></li>
                <li class=""><a href="javascript:;">热门推荐</a></li>
                <li class=""><a href="javascript:;">潮流女装</a></li>
                <li class=""><a href="javascript:;">品牌男装</a></li>
                <li class=""><a href="javascript:;">内衣配饰</a></li>
                <li class=""><a href="javascript:;">家用电器</a></li>
                <li class=""><a href="javascript:;">电脑办公</a></li>
                <li class=""><a href="javascript:;">手机数码</a></li>
                <li class=""><a href="javascript:;">母婴频道</a></li>
                <li class=""><a href="javascript:;">图书</a></li>
                <li class=""><a href="javascript:;">家居家纺</a></li>
                <li class=""><a href="javascript:;">居家生活</a></li>
                <li class=""><a href="javascript:;">家具建材</a></li>
            </ul>
        </div>
        <div class="jd_cateRight">
            <div class="jd_cateRight_box">
                <a class="banner" href="#"><img src="images/banner_1.jpg" alt=""></a>
                <div class="hot">
                    <h3>热门分类</h3>
                    <ul class="clearFix">
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                    </ul>
                </div>
                <div class="hot">
                    <h3>热门分类</h3>
                    <ul class="clearFix">
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/common.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/category.js"></script>
</body>
</html>

区域滚动效果

使用IScroll.js插件实现区域滚动效果
条件：一个容器装着一个容器html结构

找到大容器
子容器大于父容器

  new IScroll(document.querySelector('.jd_cateLeft'),{
        scrollX:false,
        scrollY:true
    });

完整项目路径：https://gitee.com/SoFeelLove/JdMobile

DevCsdner

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动Web开发--学习笔记一布局

移动Web开发网页适配流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局视觉窗口：viewport是移动端特有。这是一个虚拟的区域，承载网页的。承载关系：浏览器---->viewport---->网页适配要求：网页宽度必须和浏览器保持一致默认显示的缩放比例和PC端保持（缩放比例1.0）不允许用户自行缩放网页满足这些要求达到了适...
复制链接

扫一扫