042篇 移动端网页开发---流式布局（京东案例）

目录

一、流式布局（百分比布局）

二、京东案例

2.1常用初始化样式

2.2二倍精灵图做法

2.3案例

​

---

一、流式布局（百分比布局）

• 流式布局，就是百分比布局，也称为非固定像素布局

• 通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充

• 流式布局方式是移动web开发使用的比较常见的布局方式

• 流式布局主要看的是宽度，高度可以写成固定值

• max-width 最大宽度（max-height 最大高度）

• min-width 最小宽度（min-height最小高度）

二、京东案例

2.1常用初始化样式

   margin:0 auto;
    /* 最小宽度 */
    min-width: 320px;
    /* 最大宽度 */
    max-width: 640px;
    background:#fff;
    font-size: 14px;
    font-family: -apple-system,Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;

2.2二倍精灵图做法

• 把精灵图等比例缩放为原来的一半

• 之后根据大小测量坐标

• 注意代码里面background-size也要写：精灵图原来宽度的一半 

2.3案例

顶部

 <!-- 顶部 -->
    <header class="app">
        <ul>
            <li><img src="images/close.png" alt=""></li>
            <li>
                <img src="images/logo.png" alt="">
            </li>
            <li>打开京东App,购物更轻松</li>
            <li>立即打开</li>
        </ul>
    </header>

.app {
    height: 45px;
}

.app ul li {
    float: left;
    height: 45px;
    background-color: #333;
    text-align: center;
    line-height: 45px;
    color: #fff;
}

.app ul li:nth-child(1) {
    width: 8%;
}

.app ul li:nth-child(1) img {
    width: 10px;
}

.app ul li:nth-child(2) {
    width: 10%;
}

.app ul li:nth-child(2) img {
    width: 30px;
    /* 让图片和文字居中对齐 */
    vertical-align: middle;
}

.app ul li:nth-child(3) {
    width: 57%;
}

.app ul li:nth-child(4) {
    width: 25%;
    background-color: #f63515;
}

广告页面和nav页面

 

        <div class="brand">
            <div>
                <a href="#">
                    <img src="upload/pic111.dpg" alt="">

                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/pic222.dpg" alt="">

                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/pic333.dpg" alt="">
                </a>
            </div>
        </div>

        <!-- nav -->
        <nav class="clearfix">
            <a href="#">
                <img src="upload/nav1.dpg" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="upload/nav2.webp" alt="">
                <span>全球购</span>
            </a>
            <a href="#">
                <img src="upload/nav3.webp" alt="">
                <span>京东服饰</span>
            </a>
            <a href="#">
                <img src="upload/nav4.dpg" alt="">
                <span>京东生鲜</span>
            </a>
            <a href="#">
                <img src="upload/nav5.dpg" alt="">
                <span>京东到家</span>
            </a>
            <a href="#">
                <img src="upload/nav1.dpg" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="upload/nav1.dpg" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="upload/nav1.dpg" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="upload/nav1.dpg" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="upload/nav1.dpg" alt="">
                <span>京东超市</span>
            </a>
        </nav>

/* 品牌日 */

.brand {
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.brand div {
    float: left;
    width: 33.3%;
}

.brand div img {
    /* 图片宽度和div盒子一样 */
    width: 100%;
}


/* nav */

nav {
    padding-top: 5px;
}

nav a {
    float: left;
    width: 20%;
    text-align: center;
}

nav a img {
    width: 40px;
    margin: 10px 0;
}

nav a span {
    display: block;
}