京东首页移动端-web实战

news2024/11/18 6:02:26

设置视口标签以及引入初始化样式

    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">

body常用初始化样式

body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    line-height: 1.5;
    color: #666;
}

头部制作

  • 移动端宽度一般用百分比
  • 插入图片时记得设置图片的宽高
  • 图片默认与文字的基线对齐，所以设置垂直居中时，要给图片加上vertical-align:middle
ul {
    margin: 0;
    padding: 0;
}
ul li {
    list-style: none;
}
.app {
    height: 45px;
}

.app ul li {
    float: left;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: #333;
    color:#fff;
}
.app ul li:nth-child(1){
    width: 8%;
}
.app ul li:nth-child(1) img {
    width: 10px;
    vertical-align: middle;
}
.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;
}
    <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>

 

 搜索框

  • 搜索框主体部分会随着页面宽度的变化而变化，左右两边的盒子宽度不变，故只需将左右两边盒子定位定宽定高，中间主体部分宽度百分百，之后再设置左右margin即可。
  • 京东后面的竖线可设置伪元素，记得转换伪元素为块级元素
  • 二倍精灵图要先将原图等比例缩放至原来的一半，之后根据改变之后的图片测量坐标，同时background-size变为原来精灵图宽度的一半，高度auto
  • 图片在搜索区域下方显示，将搜索区域设置为固定定位，一定要设置宽度，宽度100%

    <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="main-content">
        <!-- 滑动图 -->
        <div class="slider">
            <img src="./upload/banner.dpg" alt="">
        </div>
    </div>
/* 搜索 */
.search-wrap {
    width: 100%;
    position: fixed;
    height: 44px;
    /* 解决外边距合并问题 */
    overflow: hidden;
    max-width: 640px;
    min-width: 320px;
}

.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) no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}

.search-login {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    color:#fff;
    text-align: center;
    line-height: 44px;
}

.search {
    position: relative;
    height: 30px;
    margin: 7px 50px;
    border-radius: 15px;
    background-color: #fff;
}
.jd-icon {
    width: 20px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 13px;
    background: url(../images/jd.png) no-repeat;
    background-size: 20px 15px;
}
.jd-icon::after {
    content: "";
    position: absolute;
    right: -8px;
    display: block;
    width: 1px;
    height: 15px;
    background-color: #f63515;
}
.sou {
    position: absolute;
    top: 8px;
    left: 50px;
    width: 18px;
    height: 15px;
    /*二倍精灵图*/
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    background-size: 200px auto;
}
.slider img {
    width: 100%;
}

品牌日

  • 由三张图片组成，每个图片均为一个链接
  • div里的每张图片宽度均为三分之一，即33.33%
  • 给brand加圆角边框时，记得要溢出隐藏，因为图片并未设置圆角边框
  • 上面图片底部有缝隙，去除图片底部缝隙只需给图片加上vertical-align:top;
  • 每个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>
        </div>
.brand {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}
.brand div {
    float:left;
    width: 33.33%;
}
.brand div img {
    width: 100%;
}

图片格式

  • DPG图片压缩技术

京东自主研发推出DPG图片压缩技术，经测试该技术,可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。能够兼容jpeg，实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距。

  • webp图片格式

谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间
 

 导航栏

  • nav里10个a，a里有图片和文字
  • 将a浮动起来，且每个a宽度占20%，设置a里的内容水平居中即可
  • 适当设置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>
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;
}

 新闻模块

  • 三张图片，均浮动，a里面包括一张图片
  • 给每个a设置宽度，里面的图片百分百即可
  • 因为后两张图片有边框，为了不影响布局，应该让a元素变成CSS3模型（box-sizing:border-box）这样最后一张图片就不会挤下去

        <div class="news clearfix">
            <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>

 

.news {
    margin-top: 20px;
}
.news a:nth-child(1) {
    width: 50%;
}
.news a {
    float: left;
    box-sizing: border-box;
}
.news a:nth-child(n+2) {
    width: 25%;
    border-left: 1px solid #ccc;
}
.news a img {
    width: 100%;
}

整体代码：

 

body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    /* 当前文字的1.5倍 */
    line-height: 1.5;
    color: #666;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

a {
    color: #666;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
}

img {
    /* 去除图片底部的缝隙 */
    vertical-align: top;
}

ul li {
    list-style: none;
}

.app {
    height: 45px;
}

.app ul li {
    float: left;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: #333;
    color: #fff
}

.app ul li:nth-child(1) {
    width: 8%;
}

.app ul li:nth-child(1) img {
    width: 10px;
    vertical-align: middle;
}

.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 {
    width: 100%;
    position: fixed;
    height: 44px;
    /* 解决外边距合并问题 */
    overflow: hidden;
    max-width: 640px;
    min-width: 320px;
}

.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) no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}

.search-login {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    color: #fff;
    text-align: center;
    line-height: 44px;
}

.search {
    position: relative;
    height: 30px;
    margin: 7px 50px;
    border-radius: 15px;
    background-color: #fff;
}

.jd-icon {
    width: 20px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 13px;
    background: url(../images/jd.png) no-repeat;
    background-size: 20px 15px;
}

.jd-icon::after {
    content: "";
    position: absolute;
    right: -8px;
    display: block;
    width: 1px;
    height: 15px;
    background-color: #f63515;
}

.sou {
    position: absolute;
    top: 8px;
    left: 50px;
    width: 18px;
    height: 15px;
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    background-size: 200px auto;
}

.slider img {
    width: 100%;
}

.brand {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.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 */
.news {
    margin-top: 20px;
}

.news a:nth-child(1) {
    width: 50%;
}

.news a {
    float: left;
    box-sizing: border-box;
}

.news a:nth-child(n+2) {
    width: 25%;
    border-left: 1px solid #ccc;
}

.news a img {
    width: 100%;
}
<!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">
    <title>Document</title>
    <!-- 引入初始化样式 -->
    <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 class="main-content">
        <!-- 滑动图 -->
        <div class="slider">
            <img src="./upload/banner.dpg" alt="">
        </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>
        </div>
        <!-- nav部分 -->
        <nav class="clearfix">
            <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 class="news clearfix">
            <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>
    </div>
</body>

</html>

 

 

之后的布局以及样式都与上面大致相同，京东移动端的练习就先到这里啦 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1435398.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

问题：鼻中隔前上部血供主要来自于筛后动脉。（ ） #学习方法#其他

问题：鼻中隔前上部血供主要来自于筛后动脉。（ ） #学习方法#其他

问题&#xff1a;鼻中隔前上部血供主要来自于筛后动脉。&#xff08; &#xff09; 对 错 参考答案如图所示
阅读更多...
unity 增加系统时间显示、FPS帧率、ms延迟

unity 增加系统时间显示、FPS帧率、ms延迟

代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;using UnityEngine;public class Frame : MonoBehaviour {// 记录帧数private int _frame;// 上一次计算帧率的时间private float _lastTime;// 平…
阅读更多...
PCIE 参考时钟架构

PCIE 参考时钟架构

一、PCIe架构组件 首先先看下PCIE架构组件&#xff0c;下图中主要包括&#xff1a; ROOT COMPLEX (RC) (CPU); PCIE PCI/PCI-X Bridge; PCIE SWITCH; PCIE ENDPOINT (EP) (pcie设备); BUFFER; 各个器件的时钟来源都是由100MHz经过Buffer后提供。一个PCIE树上最多可以有256…
阅读更多...
02-Web应用_架构构建_漏洞_HTTP数据包_代理服务器

02-Web应用_架构构建_漏洞_HTTP数据包_代理服务器

Web应用_架构构建_漏洞_HTTP数据包_代理服务器 一、网站搭建前置知识1.1 域名1.2、子域名1.3、DNS二、web应用环境架构类三、web应用安全漏洞分类四、web请求返回过程数据包 五、演示案例5.1、架构-Web应用搭建-域名源码解析5.2、请求包-新闻回帖点赞-重放数据包5.3、请求包-移…
阅读更多...
09 - python操作Excel

09 - python操作Excel

python读取Excel python使用xlrd模块用于读取Excel的数据&#xff0c;支持.xls和.xlsx两种文件格式读取。 使用示例 先安装模块 pip install xlrd 代码 # 导入excel读模块 import xlrd# 获取工作簿对象 wb xlrd.open_workbook(./人员.xls)# 获取所有工作表名 sheet_name…
阅读更多...
阿里云服务器多少钱一年？4核16G10M带宽26元/月

阿里云服务器多少钱一年？4核16G10M带宽26元/月

2024年2月阿里云服务器租用价格表更新&#xff0c;云服务器ECS经济型e实例2核2G、3M固定带宽99元一年、ECS u1实例2核4G、5M固定带宽、80G ESSD Entry盘优惠价格199元一年&#xff0c;轻量应用服务器2核2G3M带宽轻量服务器一年61元、2核4G4M带宽轻量服务器一年165元12个月、2核…
阅读更多...
2024不可不会的StableDiffusion之反向提示词（六）

2024不可不会的StableDiffusion之反向提示词（六）

1. 引言 在之前的文章中&#xff0c;我们先后介绍了Stable Diffusion中的所有关键组件&#xff0c;以及如何根据文本提示词来生成图像的整体流程。在这篇文章中&#xff0c;我将展示如何编辑反向提示词&#xff08; Negative Prompt&#xff09;来控制图像生成功能&#xff0c…
阅读更多...
导入jar包的办法，若Maven报日志错误，Cannnot resolve XXXXX.jar

导入jar包的办法，若Maven报日志错误，Cannnot resolve XXXXX.jar

相信很多人在进行涉及到java工程项目&#xff0c;都会遇到很多问题&#xff0c;在pom文件中导入jar包&#xff0c;或许会出现cannot resolve XXXXX的问题&#xff0c;从而会报个别的错误。 接下来我将介绍两种导入jar包的方法 导入jar包&#xff0c;从官网直接下载下来相关的…
阅读更多...
5-3、S曲线生成器【51单片机+L298N步进电机系列教程】

5-3、S曲线生成器【51单片机+L298N步进电机系列教程】

↑↑↑点击上方【目录】&#xff0c;查看本系列全部文章 摘要&#xff1a;本节介绍步进电机S曲线生成器的计算以及使用 一.计算原理 根据上一节内容&#xff0c;已经计算了一条任意S曲线的函数。在步进电机S曲线加减速的控制中&#xff0c;需要的S曲线如图1所示&#xff0c;横…
阅读更多...
2024年【高处安装、维护、拆除】最新解析及高处安装、维护、拆除新版试题

2024年【高处安装、维护、拆除】最新解析及高处安装、维护、拆除新版试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年【高处安装、维护、拆除】最新解析及高处安装、维护、拆除新版试题&#xff0c;包含高处安装、维护、拆除最新解析答案和解析及高处安装、维护、拆除新版试题练习。安全生产模拟考试一点通结合国家高处安装、维…
阅读更多...
蓝桥杯每日一题-----数位dp练习

蓝桥杯每日一题-----数位dp练习

题目 链接 参考代码 写了两个&#xff0c;一个是很久以前写的&#xff0c;一个是最近刚写的&#xff0c;很久以前写的时候还不会数位dp所以写了比较详细的注释&#xff0c;这两个代码主要是设置了不同的记忆数组&#xff0c;通过这两个代码可以理解记忆数组设置的灵活性。 im…
阅读更多...
ArcGISPro中Python相关命令总结

ArcGISPro中Python相关命令总结

主要总结conda方面的相关命令 列出当前活动环境中的包 conda list 列出所有 conda 环境 conda env list 克隆环境 克隆以默认的 arcgispro-py3 环境为模版的 my_env 新环境。 conda create --clone arcgispro-py3 --name my_env --pinned 激活环境 activate my_env p…
阅读更多...
opensuse安装百度Linux输入法

opensuse安装百度Linux输入法

前言 Linux下有输入法&#xff0c;拼音&#xff0c;百度的都有&#xff0c;但是用起来总感觉不如在windows下与安卓中顺手。 目前搜狗与百度都出了Linux的输入法&#xff0c;但是没有针对OpenSUSE的&#xff0c;只有ubuntu/deepin/UOS的安装包。 本文主要讲的如何把百度Linux输…
阅读更多...
如何进行游戏服务器的负载均衡和扩展性设计？

如何进行游戏服务器的负载均衡和扩展性设计？

​在进行游戏服务器的负载均衡和扩展性设计时&#xff0c;需要考虑多个方面&#xff0c;以确保服务器的稳定性和可扩展性。以下是一些关键的步骤和考虑因素&#xff1a; 负载均衡的需求分析 在进行负载均衡设计之前&#xff0c;需要深入了解游戏服务器的负载特性和需求。这包括…
阅读更多...
记录关于node接收并解析前端上传excel文件formData踩的坑

记录关于node接收并解析前端上传excel文件formData踩的坑

1.vue2使用插件formidable实现接收文件&#xff0c;首先接口不可以使用任何中间件&#xff0c;否则form.parse()方法不执行。 const express require(express) const multipart require(connect-multiparty); const testController require(../controller/testController)/…
阅读更多...
天线阵列车载应用——第1章 介绍 1.1节 汽车工业中的天线阵列:应用和频率范围

天线阵列车载应用——第1章 介绍 1.1节 汽车工业中的天线阵列:应用和频率范围

1.1 汽车工业中的天线阵列:应用和频率范围 无线通信系统的发展需要新的技术来支持更高质量的通信、新的服务和应用。近年来&#xff0c;汽车无线通信市场得到了极大的扩展。现代汽车使用不同的服务:AM/FM收音机、卫星广播(SDARS)、移动电话通信、数字音频广播(DAB)、远程无钥匙…
阅读更多...
Flink面试准备

Flink面试准备

零. 主要内容 一. Flink 提交 1. Flink怎么提交? Local模式 JobManager 和 TaskManager 共用一个 JVM,只需要jdk支持&#xff0c;单节点运行&#xff0c;主要用来调试。 Standlone模式 Standlone 是Flink自带的一个分布式集群&#xff0c;它不依赖其他的资源调度框架、不依赖y…
阅读更多...
Docker进阶篇-CIG重量级监控系统

Docker进阶篇-CIG重量级监控系统

一、简介 通过docker stats命令可以很方便的查看当前宿主机上所有容器的CPU、内存、网络流量等数 据&#xff0c;可以满足一些小型应用。 但是docker stats统计结果只能是当前宿主机的全部容器&#xff0c;数据资料是实时的&#xff0c;没有地方存储、 没有健康指标过线预警…
阅读更多...
YOLOv5改进 | 细节涨点篇 | DySample一种超级轻量的动态上采样算子（效果完爆CARAFE）

YOLOv5改进 | 细节涨点篇 | DySample一种超级轻量的动态上采样算子（效果完爆CARAFE）

一、 本文介绍 本文给大家带来的改进机制是一种号称超轻量级且有效的动态上采样器——DySample。与传统的基于内核的动态上采样器相比，DySample采用了一种基于点采样的方法，相比于以前的基于内核的动态上采样器，DySample具有更少的参数、浮点运算次数、GPU内存和延迟。此外…
阅读更多...
深度学习缝模块怎么描述创新点？(附写作模板+涨点论文)

深度学习缝模块怎么描述创新点？(附写作模板+涨点论文)

深度学习缝了别的模块怎么描述创新点、怎么讲故事写成一篇优质论文&#xff1f; 简单框架&#xff1a;描述自己这个领域&#xff0c;该领域出现了什么问题&#xff0c;你用了什么方法解决&#xff0c;你的方法有了多大的性能提升。 其中&#xff0c;重点讲清楚这两点&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023