使用百分比布局-实现静态京东移动端首页

最新推荐文章于 2023-04-25 11:49:31 发布

SHoadgnaw

最新推荐文章于 2023-04-25 11:49:31 发布

阅读量210

点赞数

分类专栏：小项目文章标签： css3 html5 移动开发

本文链接：https://blog.csdn.net/weixin_44541948/article/details/115285413

版权

本文介绍如何使用百分比布局（流式布局）来创建适应屏幕宽度的静态京东移动端首页，确保内容不会混乱，同时探讨了DPG图片压缩技术和webp图片格式，以提升页面加载速度并节省流量。

摘要由CSDN通过智能技术生成

使用百分比布局-实现静态京东移动端首页

百分比布局(流式布局)
- 小tips
html代码
CSS代码

百分比布局(流式布局)

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

为了保护内容不会出现混乱的问题
需要设置
max-width: 和 min-width
最大宽度和最小宽度

小tips

DPG图片压缩技术
京东自主研发推出DPG图片压缩技术，该技术，可直接节省用户50%的浏览流量
提升了用户的网页打开速度，能够兼容jpeg，实现全平台全浏览器支持，压缩后的图片和webp的清晰度没有差距

webp图片格式
谷歌开发的一种加快图片加载速度的图片格式
压缩体积只有jpeg的2/3，能节省大量的服务器宽带资源和数据空间

html代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>多快好省，购物上京东</title>
</head>

<body>
    <!-- 下载APP -->
    <div class="app">
        <li>
            <img class="app_close" src="images/close.png">
        </li>
        <li>
            <img class="app_logo" src="images/logo.png">

        </li>
        <li>
            <p>打开京东App , 购物更轻松</p>
        </li>
        <li>
            <a href="#">立即打开</a>
        </li>
    </div>
    <!-- 搜索 -->
    <div class="search_warp">
        <div class="search_list">
            <img src="images/s-btn.png">
        </div>
        <div class="login">登录</div>
        <div class="search_text">
            <li><img src="images/jd.png"></li>
            <li></li>
            <li>
                <div class="search_img">

最低0.47元/天解锁文章

SHoadgnaw

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用百分比布局-实现静态京东移动端首页

使用百分比布局-实现静态京东移动端首页百分比布局(流式布局)小tipshtml代码CSS代码百分比布局(流式布局)通过盒子宽度设置成百分比来根据屏幕宽度进行伸缩，不受固定像素限制，内容向两侧填充为了保护内容不会出现混乱的问题需要设置max-width: 和 min-width最大宽度和最小宽度小tipsDPG图片压缩技术京东自主研发推出DPG图片压缩技术，该技术，可直接节省用户50%的浏览流量提升了用户的网页打开速度，能够兼容jpeg，实现全平台全浏览器支持，压缩后的图片和webp的清晰
复制链接

扫一扫