2倍图，移动端布局—京东案例

最新推荐文章于 2024-09-06 11:00:54 发布
最新推荐文章于 2024-09-06 11:00:54 发布
阅读量139 收藏 1
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45671998/article/details/115021461
版权

二倍图

如果放入的img图片的宽和高大于要放入盒子的宽和高，通常使用二倍图，background- size：x y 进行缩放显示，使img图片可以完全的展示在div盒子中

京东案例

在这里插入代码片
```<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东</title>
    <link rel="stylesheet" href="../JD_he/css/JD.css">
    <link rel="stylesheet" href="./base.css">
    
</head>
<body>
    <!-- 这是导航样式 -->
    <div class="top">
    <div class="daohang">
        <div class="left"></div>
        <div class="center">
            <div class="t1"></div>
            <div class="t2"></div>
            <input type="text" placeholder="搜索">
        </div>
        <div class="right">登录</div>
    </div>
    <img src="./images/banner.dpg" width="100%">
</div>
    <!--这是中间样式  -->
    <div class="zhong">
        <div class="left"><img src="./images/pic11.dpg" width="100%"></div>
        <div class="center"><img src="./images/pic22.dpg" width="100%"></div>
        <div class="right"><img src="./images/pic33.dpg" width="100%"></div>

        
    </div>
    <!-- 这是底部样式 -->
    <div class="di">
        <div class="top">
            <ul>
                
                <li>
                    <div class="tu">
                        <img src="./images/nav1.webp" width="100%" height="100%">
                    </div>
                    京东超市</li>
                <li>
                    <div class="tu">
                        <img src="./images/nav2.webp" width="100%" height="100%">
                    </div>
                    京东超市</li>
                <li>
                    <div class="tu">
                        <img src="./images/nav1.webp" width="100%" height="100%">
                    </div>
                    京东超市</li>
                <li>
                    <div class="tu">
                        <img src="./images/nav1.webp" width="100%" height="100%">
                    </div>
                    京东超市</li>
                <li><div class="tu">
                    <img src="./images/nav1.webp" width="100%" height="100%">
                </div>
                    京东超市</li>
            </ul>
        </div>
        <div class="bottom">
            <ul>
                
                <li>
                    <div class="tu">
                        <img src="./images/nav3.webp" width="100%" height="100%">
                    </div>
                    京东超市</li>
                <li>
                    <div class="tu">
                        <img src="./images/nav2.webp" width="100%" height="100%">
                    </div>
                    京东超市</li>
                <li>
                    <div class="tu">
                        <img src="./images/nav1.webp" width="100%" height="100%">
                    </div>
                    京东超市</li>
                <li>
                    <div class="tu">
                        <img src="./images/nav1.webp" width="100%" height="100%">
                    </div>
                    京东超市</li>
                <li><div class="tu">
                    <img src="./images/nav1.webp" width="100%" height="100%">
                </div>
                    京东超市</li>
            </ul>
        </div>


    </div>
    <!-- 这是最下面的样式 -->
    <div class="cn">
        <div class="cn1">
            <img src="./images/new1.dpg" width="100%" height="100%">
        </div>
        <div class="cn2">
            <img src="./images/new2.dpg" width="100%" height="100%">
        </div>
        <div class="cn3">
            <img src="./images/new3.dpg" width="100%" height="100%">
        </div>
       
        
    </div>
    
</body>
</html>

## ***CSS样式***

```css
 .body{
     max-width: 1000px;
     /* 最大显示宽度 */
     min-width: 400px;
     /* 最小显示宽度 */
     width: 100%;
 }
 /* 导航CSS */
  .daohang{
     width: 814px;
    height: 40px;
    position: relative;
    /* background: pink; */
    background: pink;


}
.daohang .left{
    width: 30px;
    height: 25px;
    background: url(../images/../images/fenlei.png) ;
    background-size: 30px 25px;
    /* 二倍图缩放 */
    position: absolute;
    left: 10px;
    top: 4%;
}
.daohang .right{
    width: 28px;
    height: 21px;
    background: red;
    font-size: 14px;
    color: white;
    position: absolute;
    right: 5px;
    top: 16%;
}
.daohang  .center{
    position: relative;
    height: 30px;
    margin: 0 130px;
    box-sizing: border-box;
}
.daohang .center .t1{
    width: 20px;
    height: 15px;
    background: url(../images/jd.png);
    background-size: 20px 15px;
    background-repeat: no-repeat;
    /* 不重叠 */
    border-right: 1px solid red;
    padding-right: 10px;
    position: relative;
    z-index: 20;   
    right: 62px;
    top: 8px;
}
.daohang .center .t2{
    width: 16px;
    height: 18px;
    background: url(../images/fdk.png);
    background-size: 16px 18px;
    background-repeat: no-repeat;
    position: relative;
    left: -22px;
    z-index: 20;
    bottom: 8px;

}
.daohang .center input{
    width: 722px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 15px;
    position: relative;
    left: -77px;
    bottom: 31px;
    padding-left: 80px;
    outline: none;
}
.top{
    width: 814px;
    height: 438px;

}
/* 中间CSS */
.zhong{
    width: 814px;
    height: 217px;
}
.zhong .left{
    width: 271px;
    float: left;
}
.zhong .center{
    width: 271px;
    float: left;
}
.zhong .right{
    width: 271px;
    float: right;
}
/* 底部CSS */
.di{
    width: 814px;
    height: 168px;
  
}
.di .top{
    width: 814px;
    height: 84px;
}
.di .top .tu{
    width: 40px;
    height: 40px;
    position: relative;
    left: 12px;
}
.di .top ul li{
    width: 20%;
    float: left;
    list-style: none;

}
.di .bottom{
    width: 814px;
    height: 84px;
}
.di .bottom .tu{
    width: 40px;
    height: 40px;
    position: relative;
    left: 12px;
}
.di .bottom ul li{
    width: 20%;
    float: left;
    list-style: none;

}
/* 这是最下面的样式 */
.cn{
    width: 814px;
    height: 203px;
    background: red;
}
.cn .cn1{
    width: 49%;
    height: 203px;
    float: left;
}
.cn .cn2{
    width:  25%;
    height: 203px;
    float: left;
}
.cn .cn3{
    width: 25%;
    height: 203px;
    float: right;
}


*
weixin_45671998
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端开发之二倍图
HXL521666的博客
11-08 3070
物理像素&物理像素比 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。出厂就设置好了。(分辨率) 我们开发时候的1px不一定就等于1个物理像素 PC端页面，1个px等于1个物理像素，但是移动端就不尽相同 1个px的能显示的像素个数，称为物理像素比或屏幕像素比 物理像素比 = 物理像素（分辨率） / 独立像素（CSS像素） 例如：iPhone X 的物理像素比为 3 屏幕尺寸 独立像素（CSS像素） 物理像素（分辨率） ppi/dpi（像素密度） dpr（倍图
移动端开发案例-京东移动端首页
m0_37643322的博客
09-26 5373
1.移动端技术选型 方案：单独制作移动页面方案 布局：流式布局 2.搭建相关文件夹结构 其中index.html是京东首页，index.css是自己写的样式，另外一个css初始化文件可以从http://necolas.github.io/normalize.css//下载保存到相应位置. images主要是放置背景图，upload主要是放置一些产品图片 3.设置视口标签以及引入初始化样式 4.整体html结构 5.分析页面布局 移动端的布局和网页端的布局基本一样，也是大盒子套小盒子，综合应用流式、定位
移动web开发笔记1:移动端基础、常见移动端屏幕尺寸、布局视口、视觉视口、理想视口、meta标签、二倍图、物理像素、物理像素比、背景缩放、css3盒子模型、特殊样式、常见布局、流式布局、京东案例
小黄呀呀呀的博客
02-14 949
移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。 总结：兼容移动端主流浏览器，处理Web
前端二倍图
m0_51495354的博客
12-01 1151
前端二倍图
CSS关于二倍图的使用
xiaozhuo_tang的博客
02-09 1万+
实际工作中可能会得到二倍图，但我们需要的是一倍图的尺寸显示在网页，有N张图的情况下我们不可能去调节每一张图故可以通过transform:scale进行缩放 transform-origin:left top; transform:scale(0.5); 但此时原本的盒子大小不会变化，会留下一大片空白 这个时候我们可以使用zoom，zoom会改变到盒子的大小，不过可能会有性能问题，这个时候...
前端移动Web第一天：京东移动端首页案例-流式布局.zip
04-16
这个"京东移动端首页案例-流式布局.zip"压缩包提供了一个实践性的示例，让我们深入理解如何构建适应不同屏幕尺寸的流式布局。流式布局是现代Web设计的核心，它允许网页内容在各种设备上自适应展示，无论是桌面、平板...
【HTML+CSS】移动端布局之流式布局
qq_30148319的博客
04-23 1241
学习视频及笔记参考来源：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 一、移动端基础 1、视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。 布局视口 layout viewport：一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 视觉视口 visual viewport：用户正在看到的网站的区域。 理想视口 idea
移动端流式布局京东首页
HanananQYF的博客
02-24 193
移动端网页开发京东案例
移动端布局-流式布局
weixin_49455047的博客
12-03 943
1.1流式布局（百分比布局） 流式布局，就是百分比布局，也称非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充 流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度（max-height 最大高度） min-width 最小宽度 （min-height 最小高度） <style> *{ margin:0; ...
自动将文件夹下3倍图转成2倍图片
01-05
改代码运行在Mac OS端，可以将一个文件夹下所有的3倍尺寸的图片，自动转成2倍图片。 运行方式是在终端运行clang++ -o imageResizer main.mm -framework Foundation -framework Cocoa -framework QuartzCore ./imageResizer imageFolderPath
二倍图三倍图什么意思_iOS 2倍图 3倍图适配小结
weixin_35415045的博客
01-30 2975
写在前面越来越觉得知识点是这样的 ，知道了是一回事，总结起来，又是另外一回事。有时候，明明知道了，感觉已经掌握了这个知识点，但是总结起来却很难，甚至都不知道从何下手，也许还是知识点没掌握牢固的缘故。(以下都是小虾小结，大咖请绕行哦????)正题整个项目主要功能基本完成，测试也接近尾声，UI还在不断的细调中。关于UI发现的几个问题，特此记录下来。操作类button宽度以及默认和点击状态小图标失真背景大图片...
上传单个文件大小限制_设计师必看的线上图片使用攻略
weixin_34379309的博客
01-11 1367
公众号改推动机制了，以后可能收不到咱们的消息了，不想错过优质的免费资源分享，请点击左上角蓝字黑狮力，然后按下面步骤，设置星标就可以优先推送了，谢谢大家的支持。目录1-线上图片的四大类别2-线上图片常见的五种处理方式3-线上图片使用的五大要点一、线上图片的四大类别1、 信息图片：在页面中单独存在的图片，以图片为主要元素传达给用户有效信息。例如好好住APP，它在“看图板块”中就使用了信息图片...
移动端-二倍图
qq_45803977的博客
10-03 298
二倍图 1. 物理像素&物理像素比 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好的，比如苹果6\7\8 是750*1334 我们开发时候的1px不是一定等于一个物理像素点 PC端页面，1个px等于1个物理像素点，但是移动端就不尽相同 一个px点能显示的物理像素点的个数，称为物理像素比或屏幕像素比 PC端和早前的手机屏幕/普通手机屏幕：1CSS像素 = 1物理像素的 Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分
扒一扒“WEBP格式”的图片
热门推荐
09-27 1万+
谷歌于2010年推出的新一代图片格式 —— WEBP，随着移动互联网的发展，WEBP格式在2015年逐渐的开始被大公司部分采用。本文主要除了比较WEBP与JPG等传统格式的图片之外，还介绍了如何转换WEBP格式图片以及具体开发时的用法。 使用WEBP图片的目的 保证图片质量的前提下缩小图片体积。JPEG、PNG以及GIF这些格式的图片已经没有太大的优化空间。但是，WebP图片格式给图片
移动端二倍图三倍图的使用方法
weixin_30786657的博客
08-16 3156
写个如上的mixin就好了 转载于:https://www.cnblogs.com/kugeliu/p/7371568.html
CSS精灵图&二倍图&背景图填充
imber___zsk的博客
08-09 825
精灵图/雪碧图/sprite： 把小图片放到一张稍大的图片里，减小服务器压力，页面加载速度更快。 以右上角开始、向下为-y值，向右为-x值，用ps调 核心代码 background: url("./imgs/sprite.png") no-repeat -325px -140px; /* background-position: -325px -140px; */ 二倍图： 解决移动端图片方法变模糊问题 图片为100*100，盒子50*50 登录页的背景图充满整个页面： <!
移动端 二倍图
weixin_50736511的博客
11-20 1006
在移动端的时候添加的图片会自动放大，图片会变得模糊 所以可以先把图片先缩小然后让移动端再把它放大 比如需要的图片是 50px* 50px 如果移动端把图片放大的是二倍，然后可以把这张图片设置成25px x 25px然后移动端会自动放大二倍就变成了50px*50px ...
css——网格布局
最新发布
bengbeng2345的博客
09-06 565
div{$}*9+tab键，快捷生成。
移动端flex布局案例
08-19
当然，我可以为您提供一个移动端的Flex布局案例。假设您想要创建一个简单的导航栏，其中包括三个链接按钮，它们应该在移动设备上水平居中显示。以下是一个使用Flex布局实现此效果的示例代码： HTML代码： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值