移动端的京东

最新推荐文章于 2021-12-23 16:15:13 发布
最新推荐文章于 2021-12-23 16:15:13 发布
阅读量346 收藏 3
点赞数
分类专栏： 前端 文章标签： 移动端的京东
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heart_is_sunny/article/details/97525860
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 视口设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东移动端</title>
    <link rel="stylesheet" href="./mycss/jd-index.css">
</head>

<body>
    <div class="jd-container">
        <!-- 京东搜索框 -->
        <div class="jd-header">
            <!-- 搜索框 100% 自适应 -->
            <div class="header-inner">
                <!-- 搜索框盒子 -->
                <div class="search-bar">
                    <form action="#">
                        <input type="text" placeholder="牛奶">
                    </form>
                </div>
                <!-- 京东图标 -->
                <div class="search-bar-img">
                    <img src="./img/2.png" alt="">
                </div>
                <span>|</span>
                <!-- 放大镜图标 -->
                <div class="fdj"></div>
            </div>
            <!-- 菜单按钮 -->
            <div class="menu">
                <span class="sprites_menu"></span>
            </div>
            <!-- 登录按钮 -->
            <div class="login-box">
                <span>登录</span>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="box">
            <!-- 相框 -->
            <div class="picbox">
                <!-- 相片条 -->
                <ul>
                    <li>
                        <a href="#"><img src="./img/4.jpg" alt=""></a>
                        <a href="#"><img src="./img/4.jpg" alt=""></a>
                        <a href="#"><img src="./img/4.jpg" alt=""></a>
                        <a href="#"><img src="./img/4.jpg" alt=""></a>
                        <a href="#"><img src="./img/4.jpg" alt=""></a>
                    </li>
                </ul>
                <div class="circle">
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                </div>
            </div>
        </div>
        <!-- 白色模块 -->
        <div class="box1">
            <ul>
                <li><a href="#"><img src="./img/a.png" alt=""><span>京东超市</span></a></li>
                <li><a href="#"><img src="./img/b.png" alt=""><span>数码电器</span></a></li>   
                <li><a href="#"><img src="./img/c.png" alt=""><span>京东服饰</span></a></li>    
                <li><a href="#"><img src="./img/d.png" alt=""><span>京东生鲜</span></a></li>    
                <li><a href="#"><img src="./img/e.png" alt=""><span>京东到家</span></a></li>    
                <li><a href="#"><img src="./img/f.png" alt=""><span>充值缴费</span></a></li>    
                <li><a href="#"><img src="./img/g.png" alt=""><span>9.9元拼</span></a></li>   
                <li><a href="#"><img src="./img/h.png" alt=""><span>领券</span></a></li>    
                <li><a href="#"><img src="./img/i.png" alt=""><span>赚钱</span></a></li>    
                <li><a href="#"><img src="./img/k.png" alt=""><span>会员</span></a></li>    
            </ul>
        </div>
</body>

</html>

样式如下，用less写的

@import "jd-commom.less";
.jd-container {
    width: 100%;
    max-width: 640px;
    margin: 0px auto;
    height: auto;
}
// 流式布局 宽度+最大最小宽度
// 头部样式开始
.jd-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    height: 44px;
    background-color: transparent;
    .header-inner {
        width: 100%;
        height: 44px;
        padding: 7px 40px ;
        .search-bar {
            width: 100%;
            border-radius: 20px;
            height: 30px;
            overflow: hidden;
            form {
                input {
                    width: 100%;
                    height: 30px;
                    padding-left: 70px;
                }
            }
        }
        .search-bar-img {
            position: absolute;
            top: 14px;
            left: 50px;
            img {
                width: 20px;
                height: 15px;
            }
        }
        span {
            position: absolute;
            top: 13px;
            left: 75px;
            color: #e0e0e0;
        }
        .fdj {
            position: absolute;
            top: 14px;
            left: 85px;
            width: 17px;
            height: 15px;
            background: url(../img/3.png) no-repeat;
            // 精灵图的距离减小一半
            background-position: -122px 0px;
            // 整张精灵图的大小缩小一倍
            background-size: 200px 200px;
        }
    }
    .menu {
        position: absolute;
        left: 0;
        top: 0;
        width: 40px;
        height: 44px;
        .sprites_menu {
            display: inline-block;
            width: 20px;
            height: 16px;
            background: url(../img/1.png) no-repeat;
            // 原尺寸 40px*32px 一半 20*16px
            background-size: 20px 16px;
            margin: 14px 0px 0px 10px;
        }
    }
    .login-box {
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 44px;
        font-size: 14px;
        color: #fff;
        line-height: 44px; 
        text-align: center;
    }
}
// 头部样式结束
// 轮播图开始
.picbox {
    // 设置隐藏是为了不让他平铺
    overflow: hidden;
    width: 100%;
    height: 200px;
    ul {
        li {
            a {
                img {
                    width: 100%;
                    height:200px;
                }
            }
        }
    }
    .circle {
        position: absolute;
        top: 150px;
        left: 105px;
        width: 50%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        .item {
            display: inline-block;
            background-color: transparent;
            width: 8px;
            height: 8px;
            border: 1px solid #fff;
            border-radius: 50%;
            margin-right: 6px;
        }
    }
}
// 轮播图结束

// 白色模块
.box1 {
    width: 100%;
    height: 185px;
    position: absolute;
    top: 190px;
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    ul {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
       
        li {
            width: 20%;
            // border: 1px solid red;
            margin-top: 15px;
           
            a {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                img {
                    width: 46px;
                    height: 46px;
                    margin-bottom: 5px;
                }
                span {
                    color: #898989;
                }
            }

        }
    }
}

效果图片，感觉less比css简单，代码量少，布局采用的弹性布局
在这里插入图片描述

heart_is_sunny
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
移动端+京东移动端首页制作
Sweat_candy的博客
04-05 3548
一：移动端的viewport 手机拥有了浏览器的初期,人们并没有专门为移动设备设计页面,造成的直接结果就是,访问的页面是直接将电脑页面进行缩放,操作起来有诸多不便,viewport就是用来解决这个问题的 1.viewport的概念:移动设备上,用来显示网页的区域. a)如果把移动设备的浏览器(也有可能是app中的webview) ,当做相框的话 b)viewport就相当于相框中的画,可能会比相框小,可能会比相框大,如果刚好一样大,那就皆大欢喜. 2.修改viewport:我们可以通过meta标签去修改vi
京东移动端页面布局
Waterme_lon的博客
05-20 3343
html代码 京东m 登录 </header> <div class="jd_banner"...
仿京东时间选择器
tong5555的博客
12-19 307
运行效果图如下：   可选择当天10后19点前的时间，若当前时间超过19点，则从第二天开始选择。 源码如下： DatePicker.zip 
仿移动端京东商城
宏斌的博客
01-17 1090
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shop</title> <link rel="stylesheet" href="../css/小商城.css"> <script sr...
移动端京东首页
冷月心的博客
05-13 1476
移动端京东首页目录结构页面骨架技术点源码效果图 目录结构 js index.js css base.css reset.css common.css index.css images index.html 页面骨架 技术点 语义化标签 移动端屏幕适配(视口设置) 移动端二倍图问题 流式布局(百分比布局) 响应式 顶部搜索栏(双飞翼) 利用伪元素清除浮动 利用组合样式布局 ...
移动端京东
weixin_43706224的博客
05-26 34
1.移动端样式重置文件 2.
学习项目1（移动端京东）
我是一只蘑菇17的博客
12-23 619
学习项目链接（京东移动端使用vue）：https://github.com/huangche007/vue-jd 1.window.event? window.event.returnValue = false : event.preventDefault(); event.preventDefault()方法是用于取消事件的默认行为，但此方法并不被ie支持，在ie下需要用window.event.returnValue = false; 来实现。 2.<a οnclick=“window.histo
vue仿移动端京东搜索历史自适应长度超两行折叠功能
吕小威的博客
01-27 1348
1.根据文本自适应宽度 2.标签超出两行显示两行 3.展开收起箭头按钮永远置于末位，若只有两行则箭头按钮隐藏，若超出两行，将箭头符号置于第二行的末位 效果如下图所示： <!-- 分组 --> <div class="header" ref="lableGroup" :class="chatMore ? 'chat-group-mask' : 'chat-group'"> <div :class="chatMore ? 'chat-group-con-mask' : 'ch
京东移动端首页 案例
qq_43198727的博客
11-16 1894
1、上次我们说过京东移动端的首页 是通过单独制作的。 所以我们采取单独制作移动页面的方案 2、布局采用流式布局 静态、自适应、流式、响应式的特点 点击直达。 设置视口标签:<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, maximum-scale=1.0,mini...
2019 防移动端京东 登陆页面 分类页面 购物车页面 注册页面 轮播图
07-05
本资料集“2019防移动端京东 登陆页面 分类页面 购物车页面 注册页面 轮播图”聚焦于京东在2019年对移动端界面的优化，旨在为开发者和设计师提供参考。 1. **登录页面**：登录页面是用户接触应用的第一步，其设计需...
基于Vue开发的京东商城移动前端代码
03-08
综上所述，基于Vue开发的京东商城移动前端代码项目涵盖了前端开发的多个方面，包括前端框架的运用、移动端适配策略、组件化开发模式以及与后端API的交互等。通过Vue.js的特性和生态，开发者能够构建出高效、可维护的...
京东商城商品详情页面网页源码解析（静动态结合，包含CSS、HTML、Javascript、jQuery）
06-10
京东商品详情页的CSS可能会涉及到响应式设计，确保页面在不同设备上都能良好显示。你将看到如何使用媒体查询（@media）来调整样式以适应手机、平板电脑和桌面设备，以及如何利用浮动（float）、定位（positioning）...
高仿京东移动端首页纯js轮播 倒计时 触摸滑动 滚动特效
09-22
【标题】"高仿京东移动端首页纯js轮播 倒计时 触摸滑动 滚动特效"所涉及的知识点主要包括JavaScript基础、移动端适配、CSS3动画、触摸事件处理以及页面滚动效果的实现。下面将逐一详细介绍这些内容。 1. JavaScript...
京东商城 和移动端代码
12-19
京东商城是中国知名的电子商务平台，其前端技术应用广泛且成熟，尤其在移动端的用户体验设计上具有很高的水准。在“京东商城 和移动端代码”这个主题中，我们可以深入探讨HTML和CSS这两个核心技术在京东商城网页及...
移动端三种布局方式之流式布局-移动端京东首页
JadeDu_的博客
08-18 790
结果图 思路解析及注意点 1. 顶部 头部通栏的大盒子宽度是100%，里面划分成四个小盒子，用ul li排列 四个li高度相同 设置不同宽度，让四个盒子里的内容垂直居中 为了代码规范，图片都要放在盒子里，改动盒子内图片大小直接设置就可以。 .app ul li:nth-child(1){ width: 8%; } /* 图片可以直接改宽，等比例缩放*/ .app ul li:nth-child(1) img{ width: 10px; } .app ul li:nth-child(2){
什么是less？less有什莫好处？
heart_is_sunny的博客
08-01 2991
less是动态的样式表语言，通过简单，明了的语法定义，使编写css 的工作变得非常简单，在实际项目开发中，大大提高了前端工程师的工作效率 css需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，造成这些困难的很大原因源于css是一门非程序性语言，没有变量，函数，scope等概念 less在css基础上引入了变量，混入，运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成...
什么是响应式布局？原理是什么?
heart_is_sunny的博客
08-01 1844
响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同显示方式。其理念是：页面的设计与开发会根据用户行为以及不同设备的环境来响应和调整。具体的实现方式有很多种，包括弹性网格和布局，图片，css媒体查询等，无论用户正在使用笔记本还是ipad的，我们的页面都能够自动切换分辨率。图片尺寸及相关脚本功能等，以适应不同的设备，换句话说，页面应该有能力去自动响应用户的设备环境，响应式网页设计就是一个网站能够兼...
常见的移动端布局解决方案有哪些？原理如何？
heart_is_sunny的博客
08-01 1055
①固定布局 采用固定像素 原理：设置好视口，跟PC端写法一样，版心设置320即可 优点：思路沿用pc端，上手简单 缺点：界面两侧留有空白，用户体验差，而且元素略小 ②流式布局 原理：用百分比代替固定像素，限制布局盒子的最大最小宽度 优点：实现自适应 缺点：只做宽度适配，高度会被拉伸 ③rem布局 原理：设置跟标签html字体的大小，利用媒体查询不同屏幕宽度下字体的大小，利用相对定位rem代替固定...
京东移动端首页制作代码实现
最新发布
05-19
由于京东移动端首页比较复杂，需要使用多种技术实现，以下是一个基本的实现思路： 1. 使用 HTML 和 CSS 构建页面结构和样式。 2. 使用 JavaScript 实现页面交互效果和动画效果。 3. 使用 AJAX 技术从后台服务器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值