京东流式布局底边栏案例

简介: 京东流式布局底边栏案例

对于流式布局,就是百分比布局,宽度适用百分比,高度自适应就可以了。这个是一种比较古老的布局显示,需要稍作了解。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul li {
            list-style: none;
        }
        div {
            position: fixed;
            width: 100%;
            bottom: 0px;
            left: 0px;
            height: 50px;
            background-color: palegoldenrod;
        }
        ul li a img {
            height: 100%;
        }
        ul li {
            float: left;
            height: 50px;
            width: 20%;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><a href="#"><img src="./images/index.png" alt=""></a></li>
            <li><a href="#"><img src="./images/classify.png" alt=""></a></li>
            <li><a href="#"><img src="./images/jd.png" alt=""></a></li>
            <li><a href="#"><img src="./images/car.png" alt=""></a></li>
            <li><a href="#"><img src="./images/login.png" alt=""></a></li>
        </ul>
    </div>
</body>
</html>

1.png


补充:


使用二倍图片的时候,设计时给出的是750px的大小设计图,我们需要将图片拖到软件中,切换到开发模式,将倍数修改成2倍就可以了,结果就是宽度变成了350px。


相关文章
|
前端开发 JavaScript
JS中Promise详解
JS中Promise详解
260 0
|
JavaScript 前端开发
2022年了!你有几种获取URL参数的方法?
前言 作为一个前端开发,我们很多时候都需要对URL进行操作和处理,最常见的一种就是获取URL链接中携带的参数值了。使用框架开发的小伙伴可能会觉得这很简单,因为框架提供了很多方法让我们方便的获取URL链接携带的参数。但是有些时候我们不能依赖框架,需要我们使用原生JS去获取参数,这也是面试中经常遇到的一道题。今天我们就手撕代码,利用原生JS去获取URL链接参数值。
1594 1
2022年了!你有几种获取URL参数的方法?
|
10月前
|
机器学习/深度学习 搜索推荐 语音技术
智能语音识别技术在智能家居中的应用与挑战####
本文深入探讨了智能语音识别技术的基本原理、关键技术环节,以及其在智能家居领域的广泛应用现状。通过分析当前面临的主要挑战,如环境噪音干扰、方言及口音识别难题等,文章进一步展望了未来发展趋势,包括技术融合创新、个性化服务定制及安全隐私保护的加强。本文旨在为读者提供一个关于智能语音识别技术在智能家居中应用的全面视角,同时激发对该领域未来发展方向的思考。 ####
727 33
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
|
机器学习/深度学习 物联网 数据处理
社区供稿 | 封神榜团队提出首个引入视觉细化器的多模态大模型Ziya-Visual-Lyrics,多个任务SOTA
封神榜大模型团队基于在多模态领域积累的先进技术,首次在多模态大模型上加入图像标记、目标检测、语义分割模块,推出了多模态大模型Ziya-Visual-Lyrics。
|
SQL 分布式计算 DataWorks
MaxCompute操作报错合集之在创建SQL函数时,遇到报错,该如何解决
MaxCompute是阿里云提供的大规模离线数据处理服务,用于大数据分析、挖掘和报表生成等场景。在使用MaxCompute进行数据处理时,可能会遇到各种操作报错。以下是一些常见的MaxCompute操作报错及其可能的原因与解决措施的合集。
396 0
|
缓存 Kubernetes JavaScript
SpringBoot整合分布式消息平台Pulsar
SpringBoot整合分布式消息平台Pulsar
692 0
SpringBoot整合分布式消息平台Pulsar
|
小程序 JavaScript
微信小程序项目实例——智能用电
微信小程序项目实例——智能用电
|
弹性计算 运维 监控
基于云监控实现的监控系统
通过阿里云云监控功能给非阿里云主机安装监控插件,从而实现对非阿里云主机的各项指标进行监控和管理,在配置报警规则和报警人的情况下,能对特定的场景做出报警反应通知到报警人的手机上。
BUUCTF 还原大师 1
BUUCTF 还原大师 1
204 0