京东移动端首页 案例

最新推荐文章于 2024-04-10 17:14:17 发布
最新推荐文章于 2024-04-10 17:14:17 发布
阅读量1.8k 收藏 13
点赞数 2
文章标签： 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43198727/article/details/103076970
版权

1、上次我们说过京东移动端的首页 是通过单独制作的。
所以我们采取单独制作移动页面的方案
2、布局采用流式布局
静态、自适应、流式、响应式的特点 点击直达。

  • 设置视口标签:<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, maximum-scale=1.0,minimum-scale=1.0"> /*width - viewport的宽度 height - viewport的高度,initial-scale - 初始的缩放比例,maximum-scale - 允许用户缩放到的最大比例,user-scalable - 用户是否可以手动缩放*/
  • 引入初始化样式
    在这里插入图片描述
    index.css 是需要自己写的css。
    二倍精灵图的做法。
  • 在firework里面把精灵图等比例缩放为原来的一半。
  • 之后根据大小测量坐标
  • 注意代码里面background-size也要写:精灵图是原来宽度的一半。
    图片格式:
    DPG图片压缩技术
    京东自主研发推出的DPG图片压缩技术，经测试该技术，可直接节省用户近百分之50的浏览流量 极大的提升了用户的网页打开速度，能够 兼容jepg实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人浏览测试后发现，压缩后的图片和webp的清晰度对面没有差异。
    wbep图片格式
    谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量服务器的带宽资源和数据空间。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,
    maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京东移动端首页</title>
    <!-- 引入我们的css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.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>
        <div class="main-Content">
            <!-- 滑动图 -->
            <div class="slider">
                <img src="upload/banner.dpg" alt="">
            </div>
        </div>
        <!--小家电品牌 -->
        <div class="brand">
            <div>
                <a href="#">
                    <img src="upload/pic11.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/pic22.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#"><img src="upload/pic33.dpg" alt=""></a>
            </div>
            <!-- nav -->
            <nav>
                <a href="">
                    <img src="upload/nav1.webp" alt="">
                    <span>京东超市</span>
                </a>
                <a href="">
                    <img src="upload/nav1.webp" alt="">
                    <span>京东超市</span>
                </a>
                <a href="">
                    <img src="upload/nav1.webp" alt="">
                    <span>京东超市</span>
                </a>
                <a href="">
                    <img src="upload/nav1.webp" alt="">
                    <span>京东超市</span>
                </a>
                <a href="">
                    <img src="upload/nav1.webp" alt="">
                    <span>京东超市</span>
                </a>
                <a href="">
                    <img src="upload/nav1.webp" alt="">
                    <span>京东超市</span>
                </a>
                <a href="">
                    <img src="upload/nav1.webp" alt="">
                    <span>京东超市</span>
                </a>
                <a href="">
                    <img src="upload/nav1.webp" alt="">
                    <span>京东超市</span>
                </a>
                <a href="">
                    <img src="upload/nav1.webp" alt="">
                    <span>京东超市</span>
                </a>
                <a href="">
                    <img src="upload/nav1.webp" alt="">
                    <span>京东超市</span>
                </a>
            </nav>
            <!-- 新闻模块 -->
        </div>
    </div>
    <div class="news">
        <a href="#">
            <img src="upload/new1.dpg" alt="">
        </a>
        <a href="#">
            <img src="upload/new2.dpg" alt="">
        </a>
        <a href="#">
            <img src="upload/new3.dpg" alt="">
        </a>
    </div>
</body>

</html>

上面的是HTML代码
下面的为css代码需要单独创建文件

    body {
        width: 100px;
        min-width: 320px;
        max-width: 640px;
        margin: 0 auto;
        /*使盒子居中对齐*/
        font-size: 14px;
        /*整个移动端设置为14px*/
        font-family: -apple-system, helvetica, sans-serif;
        /*如果手机是苹果的话就用syste 如果不是就是helvetica和sans-serif*/
        color: #666;
        line-height: 1.5;
    }
    
    a {
        color: #666;
        text-decoration: none;
    }
    
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    img {
        vertical-align: top;
    }
    
    .app {
        height: 45px;
    }
    
    .app ul li {
        float: left;
        height: 45px;
        line-height: 45px;
        background-color: #333;
        text-align: center;
        color: #fff;
    }
    
    .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: #f63515;
    }
    /* 搜索 */
    
    .search-wrap {
        position: fixed;
        overflow: hidden;
        height: 44px;
        width: 100px;
        min-width: 320px;
        max-width: 640px;
    }
    
    .search-btn {
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 44px;
    }
    
    .search-btn::before {
        content: "";
        display: block;
        width: 20px;
        height: 18px;
        background: url(/images/s-btn.png);
        background-size: 20px 18px;
        margin: 14px 0 0 15px;
    }
    
    .search-login {
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 44px;
        color: #fff;
        line-height: 44px;
    }
    
    .search {
        position: relative;
        height: 30px;
        background: #fff;
        margin: 0 50px;
        border-radius: 15px;
        margin-top: 7px;
    }
    
    .jd-icon {
        width: 20px;
        height: 15px;
        position: absolute;
        top: 8px;
        left: 13px;
        background-color: pink;
        background: url(/images/jd.png);
        background-size: 20px 15px;
    }
    
    .jd-icon::after {
        content: "";
        position: absolute;
        display: block;
        right: -8px;
        top: 0;
        width: 1px;
        height: 15px;
        background-color: #cccccc;
    }
    
    .sou {
        position: absolute;
        top: 8px;
        left: 50px;
        width: 18px;
        height: 15px;
        background-color: pink;
        background: url(../images/jd-sprites.png) no-repeat -81px 0px;
        background-size: 200px auto;
    }
    
    .slider img {
        width: 100%;
    }
    /* 品牌日 */
    
    .brand {
        overflow: hidden;
        border-radius: 10px 10px 0 0;
    }
    
    .brand div {
        float: left;
        width: 33.33%;
    }
    
    .brand div img {
        width: 100%;
    }
    
    nav {
        padding-top: 5px;
    }
    
    nav a {
        float: left;
        width: 20%;
        text-align: center;
    }
    
    nav a img {
        width: 40px;
        margin: 10px 0;
    }
    
    nav a span {
        display: block;
    }
    
    .news img {
        width: 100%;
    }
    /* news */
    
    .news {
        margin-top: 20px;
    }
    
    .news a {
        float: left;
        box-sizing: border-box;
    }
    
    .news a:nth-child(1) {
        width: 50%;
    }
    
    .news a:nth-child(2) {
        width: 25%;
        border-left: 1px solid #ccc;
    }
    
    .news a:nth-child(3) {
        width: 25%;
        border-left: 1px solid #ccc;
    }

只是做了一些部分，剩下的部分可以参照上面继续做。
中间提到的fireworks
可以在华军软件园下载奉上链接:http://www.onlinedown.net/soft/9864.htm
由于官网不更新我也没办法。

远方0905
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端开发案例-京东移动端首页
m0_37643322的博客
09-26 5305
1.移动端技术选型 方案：单独制作移动页面方案 布局：流式布局 2.搭建相关文件夹结构 其中index.html是京东首页，index.css是自己写的样式，另外一个css初始化文件可以从http://necolas.github.io/normalize.css//下载保存到相应位置. images主要是放置背景图，upload主要是放置一些产品图片 3.设置视口标签以及引入初始化样式 4.整体html结构 5.分析页面布局 移动端的布局和网页端的布局基本一样，也是大盒子套小盒子，综合应用流式、定位
京东移动端小案例
weixin_42378409的博客
03-31 238
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1.0, maximum-scale...
HTML和CSS实现京东首页（html和css详解）
热门推荐
道阻且长，行则将至。
12-20 1万+
HTML和CSS实现京东首页，效果图如下： 基本代码如下：需要源代码和素材的加Q（2997381395） <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title> <meta name="descri
HTML+CSS+JS实现京东首页[web课设代码+模块说明+效果图]
最新发布
心态的博客
04-10 1234
用时差不多一个星期，抽空把前端课设做完了。html代码量800+行，css代码量1200+行，因为有轮播图(加了100多行js代码)。京东首页用了2000行代码。里面避免不了有冗余的代码。大多数的常见知识点均已运用。每个css样式修饰都有注释，阅读起来会很方便。 资源使用html+css+js纯手写，无任何组件。纯源生代码编写的静态页面。
前端移动Web第一天：京东移动端首页案例-流式布局.zip
04-16
京东移动端首页案例-流式布局源代码文件附上
移动端、流式布局、京东移动端首页案例
qq_40501188的博客
12-26 812
视口 **视口（viewport）**就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上显现，只不过元素看上去很小，一般默认可以通过手动缩放网页 视觉视口 visual viewport 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域 我
5.案例：京东移动端首页
lazylYYY的博客
07-26 210
移动端流式布局过程——京东移动端首页案例
weixin_45655555的博客
11-10 1042
1. 准备工作 1.1 技术选型 方案： 单独制作移动页面方案 技术： 布局采取流式布局 1.2 搭建相关文件夹结构 1.3 设置视口标签以及引入初始化样式 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"> <link rel="stylesheet"
京东零售流量数仓架构建设
08-23
本次分享主要从三个方面介绍京东流量场下的数据处理方案，同时也会结合京东实际场景案例，介绍京东在流量场下的一些数据应用和实践。 全文会围绕以下三方面内容展开： 京东零售流量数仓架构 京东零售场景的数据...
京东H5.zip与你分享
02-03
流式布局页面小案例,运用有div+html,js基础,百分比布局是移动端布局中的一种,比传统布局用户体验要好
移动端布局之流式布局（百分比布局）
06-06
移动端布局之流式布局，包括了移动端基础以及京东移动端首页布局案例
仿京东商城H5移动端首页
03-29
仿京东商城H5移动端App，其中首页轮播无缝切换以及活动倒计时，以及分类页有关的html、css及相关js代码。
京东手机网站首页源码
04-17
手机端京东网站首页，大家可以看一下，有需要的就不要犹豫啊
京东手机端页面
12-24
京东手机端首页布置，简单详细的页面，运用到了h5，bootstrap，sweeper等等各种前沿技术。
流式布局---京东案例
11-01
文件内容与博客《前端与移动开发----移动web开发流式布局》是一起的，昨天没有做完，今天结合弹性布局一起做了出来
京东商城 和移动端代码
12-19
京东商城是非常典型的p2p网站，非常值得我们去学习。还有开发文档
jquer实例大全【清晰版】
12-13
canvas滑动验证插件 jQuery Bootstrap弹窗...类似京东多条件查询插件 人脸识别动画 人脸抓拍 扫二维码 实现图片提示效果 书页翻动作 图片滑动验证带提示 一维码和二维码集合 移动端日期选择插件 注销验证 自定义弹框
移动端案例-京东首页
weixin_45662026的博客
08-27 1219
方案： 单独制作移动页面方案。
移动端京东案例
qq_43537987的博客
05-26 567
效果展示： 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, ma...
京东移动端首页制作代码实现
05-19
由于京东移动端首页比较复杂，需要使用多种技术实现，以下是一个基本的实现思路： 1. 使用 HTML 和 CSS 构建页面结构和样式。 2. 使用 JavaScript 实现页面交互效果和动画效果。 3. 使用 AJAX 技术从后台服务器获取数据，并将数据渲染到页面上。 4. 使用响应式布局技术适配不同尺寸的移动设备。 以下是一个简单的示例代码： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东移动端首页</title> <style> /* 页面样式 */ </style> </head> <body> <header> <!-- 页头内容 --> </header> <nav> <!-- 导航栏内容 --> </nav> <main> <section id="slide"> <!-- 轮播图内容 --> </section> <section id="category"> <!-- 分类内容 --> </section> <section id="promotion"> <!-- 促销内容 --> </section> <section id="recommend"> <!-- 推荐内容 --> </section> <section id="hot"> <!-- 热门内容 --> </section> </main> <footer> <!-- 页脚内容 --> </footer> <script> // 页面交互效果和动画效果的实现 </script> </body> </html> ``` 注意：以上代码仅为示例，实际实现中需要根据具体需求进行修改和完善。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值