移动端布局之流式布局2（百分比布局）:案例-京东移动端首页2

已于 2023-05-30 23:09:39 修改
阅读量310 收藏 1
点赞数 1
分类专栏： 移动端布局 前端 文章标签： css css3 html
于 2023-05-30 23:09:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/130957277
版权

移动端布局之流式布局2

案例：京东移动端首页

二倍精灵图的做法

  1. 在firework中里面把精灵图等比例缩放为原来的一半(也可以在ps中)请添加图片描述

  2. 在ps中用选区将所选区域选中，打开工具栏中的“窗口=>信息”会出现鼠标的x和y值，记录下来
    (根据大小 测量坐标)
    请添加图片描述

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>Title</title>
    <!--引入我们的css初始化文件-->
    <link rel="stylesheet" href="css/normalize.css">
    <!--引入我们首页的css-->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <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>
    <!--搜索-->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="jd-icon"></div>
            <div class="sou"></div>
        </div>
        <div class="search-login">登录</div>
    </div>
</body>
</html>

index.css

body{
    width: 100%;
    max-width: 1080px;
    min-width: 320px;
    margin: 0 auto;
    font-size: 14px;
    color: #666;
    font-family: -apple-system,Helvetica,sans-serif; /*苹果手机文字，安卓手机默认字体*/
    line-height: 1.5;  /*字体大小的1.5倍*/
    background-color: #ccc;
}
.app{
    height: 45px;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.app ul li{
    float: left;
    height: 45px;
    background-color: #333;
    color: #fff;
    text-align: center;  /*图片水平居中*/
    line-height: 45px;  /*图片垂直居中*/
}
.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: #f53516;
}

.search-wrap{
    height: 44px;
    position: relative;
    /*外边距合并，解决方法是给父级添加overflow:hidden*/
    overflow: hidden;
}
.search-btn{
    position: absolute;
    width: 40px;
    height: 44px;
    top: 0;
    left: 0;
}
.search-btn::before{
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url("../images/s-btn.png") no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}
.search-login{
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    line-height: 44px;
    color: #fff;
}
.search{
    height: 30px;
    margin: 0 50px;
    border-radius: 15px;
    background-color: #fff;
    /*外边距合并，解决方法是给父级添加overflow:hidden*/
    margin-top: 7px;
    position: relative;
}
.jd-icon{
    width: 20px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 13px;
    background: url("../images/jd.png") no-repeat;
    background-size: 20px 15px;
}
/*JD图标后的小竖杠*/
.jd-icon::after{
    content: "";
    position: absolute;
    right: -8px;
    top: 0;
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}
.sou{
    width: 18px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 50px;
    background: url(../images/jd-sprites.png) no-repeat -80px 0;
    background-size: 200px;
}

请添加图片描述

背景渐变

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>Title</title>
    <!--引入我们的css初始化文件-->
    <link rel="stylesheet" href="css/normalize.css">
    <!--引入我们首页的css-->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <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>
    <!--搜索-->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="jd-icon"></div>
            <div class="sou"></div>
        </div>
        <div class="search-login">登录</div>
    </div>
    <!--背景渐变-->
    <div class="slider-bg"></div>
</body>
</html>

index.css

body{
    width: 100%;
    max-width: 1080px;
    min-width: 320px;
    margin: 0 auto;
    font-size: 14px;
    color: #666;
    font-family: -apple-system,Helvetica,sans-serif; /*苹果手机文字，安卓手机默认字体*/
    line-height: 1.5;  /*字体大小的1.5倍*/
    background-color: #ccc;
}
.app{
    height: 45px;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.app ul li{
    float: left;
    height: 45px;
    background-color: #333;
    color: #fff;
    text-align: center;  /*图片水平居中*/
    line-height: 45px;  /*图片垂直居中*/
}
.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: #f53516;
}

.search-wrap{
    height: 44px;
    position: relative;
    /*外边距合并，解决方法是给父级添加overflow:hidden*/
    overflow: hidden;
}
.search-btn{
    position: absolute;
    width: 40px;
    height: 44px;
    top: 0;
    left: 0;
}
.search-btn::before{
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url("../images/s-btn.png") no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}
.search-login{
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    line-height: 44px;
    color: #fff;
}
.search{
    height: 30px;
    margin: 0 50px;
    border-radius: 15px;
    background-color: #fff;
    /*外边距合并，解决方法是给父级添加overflow:hidden*/
    margin-top: 7px;
    position: relative;
}
.jd-icon{
    width: 20px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 13px;
    background: url("../images/jd.png") no-repeat;
    background-size: 20px 15px;
}
/*JD图标后的小竖杠*/
.jd-icon::after{
    content: "";
    position: absolute;
    right: -8px;
    top: 0;
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}
.sou{
    width: 18px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 50px;
    background: url(../images/jd-sprites.png) no-repeat -80px 0;
    background-size: 200px;
}
.slider-bg{
    position: absolute;
    top: 0;
    width: 150%;
    height: 200px;
    left: -25%;
    z-index: -1;
    background: linear-gradient(0deg,#f1503b,#c82519 50%);
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
}

请添加图片描述

焦点图与折扣日制作

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>Title</title>
    <!--引入我们的css初始化文件-->
    <link rel="stylesheet" href="css/normalize.css">
    <!--引入我们首页的css-->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <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>
    <!--搜索-->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="jd-icon"></div>
            <div class="sou"></div>
        </div>
        <div class="search-login">登录</div>
    </div>
    <!--背景渐变-->
    <div class="slider-bg"></div>
    <!--主体内容部分-->
    <div class="main-content">
        <!--滑动图-->
        <div class="slider">
            <img src="upload/banner.jpeg" alt="">
        </div>
        
        <!--折扣价-->
        <div class="brand">
            <div>
                <a href="#">
                    <img src="upload/discount-left.png" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/discount-middle.png" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/discount-right.png" alt="">
                </a>
            </div>
        </div>
    </div>
</body>
</html>

index.css

body{
    width: 100%;
    max-width: 1080px;
    min-width: 320px;
    margin: 0 auto;
    font-size: 14px;
    color: #666;
    font-family: -apple-system,Helvetica,sans-serif; /*苹果手机文字，安卓手机默认字体*/
    line-height: 1.5;  /*字体大小的1.5倍*/
    background-color: #ccc;
}
.app{
    height: 45px;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.app ul li{
    float: left;
    height: 45px;
    background-color: #333;
    color: #fff;
    text-align: center;  /*图片水平居中*/
    line-height: 45px;  /*图片垂直居中*/
}
.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: #f53516;
}
.search-wrap{
    height: 44px;
    position: relative;
    /*外边距合并，解决方法是给父级添加overflow:hidden*/
    overflow: hidden;
    width: 100%;
    /*position: fixed;*/
    /*max-width: 640px;*/
    /*min-width: 320px;*/
}
.search-btn{
    position: absolute;
    width: 40px;
    height: 44px;
    top: 0;
    left: 0;
}
.search-btn::before{
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url("../images/s-btn.png") no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}
.search-login{
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    line-height: 44px;
    color: #fff;
}
.search{
    height: 30px;
    margin: 0 50px;
    border-radius: 15px;
    background-color: #fff;
    /*外边距合并，解决方法是给父级添加overflow:hidden*/
    margin-top: 7px;
    position: relative;
}
.jd-icon{
    width: 20px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 13px;
    background: url("../images/jd.png") no-repeat;
    background-size: 20px 15px;
}
/*JD图标后的小竖杠*/
.jd-icon::after{
    content: "";
    position: absolute;
    right: -8px;
    top: 0;
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}
.sou{
    width: 18px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 50px;
    background: url(../images/jd-sprites.png) no-repeat -80px 0;
    background-size: 200px;
}
.slider-bg{
    position: absolute;
    top: 0;
    width: 150%;
    height: 200px;
    left: -25%;
    z-index: -1;
    background: linear-gradient(0deg,#f1503b,#c82519 50%);
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
}
.slider{
    margin: 0 13px;
    overflow: hidden;
}
.slider img{
    width: 100%;
    border-radius: 10px;
}
/*品牌折扣日*/
.brand{
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}
.brand div{
    width: 33.33%;
    float: left;
}
.main-content img{
    /*去除图片底下的空白缝隙*/
    vertical-align: top;
}
.brand a img{
    width: 100%;
    height: 192.02px;
}

请添加图片描述

VillanelleS
关注
专栏目录
2022年4月25号案例:移动端页面流式布局京东网页讲解。
qq_56248592的博客
04-25 357
上面的案例:如果是你你会用什么方案呢？ 分解一步分为如果是我:进行分解讲述将这个页面:化整为零思想.一步步的去分解。 这个案例的目的是让你去将知识理解明白:做的灵活运用。css我在这里使用的是外链式。 Header头部：如何去写先写html大体框架。 <!-- 头部 --> <header id="app"> <ul> <li> <img src="img/close.png" /> ......
移动WEB开发之流式布局 ---京东移动端首页
不爱吃菜的菜菜的博客
04-27 647
步骤： 1. 技术选型 方案：我们采取单独制作移动页面方案 技术：布局采取流式布局 2. 搭建相关文件夹结构 3. 设置视口标签以及引入初始化样式 <!-- 引入我们的CSS初始化文件 --> <link rel="stylesheet" href="css/normalize.css"> <!-- 引入我们首页的css --> <link rel="stylesheet" href="css/index...
关于精灵图
Twilight's Blog
02-07 9172
之前就发现一些网站吧所有的小图标拼接在一张图片中，但是一直不知道这是怎么做到的，今天特地了解了一下，才知道这种用法叫做精灵图。他的优点是可以减少浏览器请求的次数，把所有图片拼接在一张图中就只需要请求一次，当浏览器需要用到图片时再从大图片中解析。这样可以加快访问的次数。先来看看效果图：拼接的图片： 他的原理是，先规定好每个小图标的大小，创建一个和小图标大小相同的容器，再通过移动背景图片的方法将大图中
京东移动端首页
Awui
04-24 4471
移动端技术选型： 单独制作移动端页面之流式布局 1.准备的文件夹（网站）： 2.在京东页面收集素材（其中index.css是自己写的样式，另外一个css初始化文件可以从http://necolas.github.io/normalize.css//下载保存到相应位置，其他不同格式的图片都是从京东下载下来的）： 3.设置视口，分析手机像素： <!-- 标准的viewport --&...
02移动端布局基础之流式布局项目实战(京东移动端首页)
CurryCoder的个人博客
05-09 484
技术交流QQ群:1027579432，欢迎你的加入！ 1.技术选型 方案：采取单独制作移动页面方案 技术：布局采取流式布局 2.搭建相关文件夹结构 3.设置视口标签以及引入初始化样式 ``` <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
下图精灵V1.0免费版（网店图片批量下载，支持淘宝天猫京东阿里巴巴）
06-21
下图精灵是一款图片批量下载软件，能高速中下载网店中的主图和详情页，并分类排序
前端移动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
移动端布局-流式布局
weixin_49455047的博客
12-03 943
1.1流式布局（百分比布局） 流式布局，就是百分比布局，也称非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充 流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度（max-height 最大高度） min-width 最小宽度 （min-height 最小高度） <style> *{ margin:0; ...
移动端开发案例-京东移动端首页
m0_37643322的博客
09-26 5373
1.移动端技术选型 方案：单独制作移动页面方案 布局：流式布局 2.搭建相关文件夹结构 其中index.html是京东首页，index.css是自己写的样式，另外一个css初始化文件可以从http://necolas.github.io/normalize.css//下载保存到相应位置. images主要是放置背景图，upload主要是放置一些产品图片 3.设置视口标签以及引入初始化样式 4.整体html结构 5.分析页面布局 移动端的布局和网页端的布局基本一样，也是大盒子套小盒子，综合应用流式、定位
京东商城 和移动端代码
12-19
京东商城是非常典型的p2p网站，非常值得我们去学习。还有开发文档
京东移动端首页 案例
qq_43198727的博客
11-16 1909
1、上次我们说过京东移动端的首页 是通过单独制作的。 所以我们采取单独制作移动页面的方案 2、布局采用流式布局 静态、自适应、流式、响应式的特点 点击直达。 设置视口标签:<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, maximum-scale=1.0,mini...
京东/淘宝移动端商城
最新发布
m0_74384946的博客
10-31 466
这个商城是基于HTML框架开发的，对初学者比较的友好。javascrip作为辅助型框架进行对网页的修改和帮助。本移动商城主要以2022年的京东网页为参考进行的设计与勾勒。此代码一部分都有注释，方便新学者学习！话不多说直接上代码！！
京东移动端分类页面侧导航栏实现
热门推荐
云
04-08 5万+
【代码】京东移动端分类页面侧导航栏实现。
京东移动端首页布局静态页面
weixin_39288299的博客
04-03 2798
涉及知识点： 静态页面 flex布局 二倍图 定位 代码实现： index.html部分代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--移动端设置viewport--> <meta name="viewport" ...
移动端购物类页面首页、购物车、搜索页面HTML、LESS代码
weixin_64208498的博客
04-10 4170
location实现页面跳转，forEach实现数据的遍历渲染，固定定位，背景渐变
android京东首页轮播代码,web移动端-轮播
weixin_39929687的博客
05-26 214
var bannerImg = document.querySelectorAll(".jd_banner ul li");/*1.自动滚动(定时器+过渡transition+位移transform:translateX);2.点随之滚动起来,改变当前的class样式3.添加滑动事件(touch)(1)当滑动超过一定距离的时候 滚动到上一张或者下一张 (banner图片的1/3);(2)当滑动不超...
Android仿京东购物车-----完整代码(三)
big_fff的博客
08-24 3637
activity public class MainActivity extends AppCompatActivity implements View.OnClickListener { ExpandableListView expandableListView; Context context; private CheckBox checkall; pri...
移动端案例-京东首页
weixin_45662026的博客
08-27 1251
方案： 单独制作移动页面方案。
移动端自适应布局解析：响应式、rem/em与Js策略
"移动端的自适应布局是网页设计中不可或缺的一部分，尤其在移动设备多样化的今天。本篇文章聚焦于移动端自适应布局的实现策略，包括响应式设计、rem和em单位的使用，以及JavaScript动态调整。" 在移动互联网的快速...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值