京东首页移动端-web实战

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

    <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>

 

 

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

基于SpringBoot+Vue的实验室管理系统

基于SpringBoot+Vue的实验室管理系统

末尾获取源码作者介绍&#xff1a;大家好&#xff0c;我是墨韵&#xff0c;本人4年开发经验&#xff0c;专注定制项目开发 更多项目&#xff1a;CSDN主页YAML墨韵 学如逆水行舟&#xff0c;不进则退。学习如赶路&#xff0c;不能慢一步。 目录 一、项目简介 二、开发技术与环…
阅读更多...
没有联合和枚举 ， C语言怎么能在江湖混 ？

没有联合和枚举 ， C语言怎么能在江湖混 ？

本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 我会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人能…
阅读更多...
Flutter学习（八）Flutter_Boost接入

Flutter学习（八）Flutter_Boost接入

背景 基于安卓的原生项目&#xff0c;进行Flutter的接入&#xff0c;进行混合开发。 参考链接 官方地址&#xff1a;link fullter_boost配置&#xff1a;link git代理配置&#xff1a;link kotlin语法集成&#xff1a;link 混合开发的坑&#xff1a;link 开发环境 as4…
阅读更多...
Tauri 的基本使用笔记

Tauri 的基本使用笔记

文章目录 前言如何将 Tauri 集成到前端项目?进程间通信&#xff08;命令&#xff09;const invoke window.__TAURI__.invoke; 进程间通信&#xff08;事件&#xff09;前端 ⇒ RustRust ⇒ 前端我的疑问 开发时的一些技巧用代码打开前端的开发者工具让 Tauri 不要监听文件Rus…
阅读更多...
UE4 C++ 动态加载类和资源

UE4 C++ 动态加载类和资源

动态加载类和资源&#xff1a;指在运行时加载 .cpp void AMyActor::BeginPlay() {Super::BeginPlay();//动态加载资源UStaticMesh* MyTempStaticMesh LoadObject<UStaticMesh>(nullptr,TEXT("/Script/Engine.StaticMesh/Game/StarterContent/Shapes/Shape_NarrowC…
阅读更多...
基于单片机的智能燃气灶控制系统设计

基于单片机的智能燃气灶控制系统设计

摘要&#xff1a;针对传统燃气灶存在不能防干烧、不能进行温度检测、不能进行火力自动调节等问题&#xff0c;设计了一种基于单片机控制的智能燃气灶&#xff0c;它通过单片机进行控制&#xff0c;由开关模块、测温模块、语音播报模块、火力控制模块和防空烧模块五个模块组成&a…
阅读更多...
SpringBoot整合Knife4j接口文档生成工具

SpringBoot整合Knife4j接口文档生成工具

一个好的项目&#xff0c;接口文档是非常重要的&#xff0c;除了能帮助前端和后端开发人员更快地协作完成开发任务&#xff0c;接口文档还能用来生成资源权限&#xff0c;对权限访问控制的实现有很大的帮助。 这篇文章介绍一下企业中常用的接口文档工具Knife4j&#xff08;基于…
阅读更多...
博客|基于Springboot的个人博客系统设计与实现(源码+数据库+文档)

博客|基于Springboot的个人博客系统设计与实现(源码+数据库+文档)

个人博客系统目录 目录 基于Springboot的个人博客系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员功能实现 &#xff08;1&#xff09;用户管理 &#xff08;2&#xff09;文章分类管理 &#xff08;3&#xff09;公告信息管理 &#xff08;4&#…
阅读更多...
C#，河豚算法（Blowfish Algorithm）的加密、解密源代码

C#，河豚算法（Blowfish Algorithm）的加密、解密源代码

Bruce Schneier 1 河豚算法&#xff08;Blowfish Algorithm&#xff09; 河豚算法&#xff08;Blowfish Algorithm&#xff09;是1993年11月由Bruce Schneier设计的一个完全开源的算法。 Blowfish算法是一个分组长度为64位、密钥长度可变的对称分组密码算法。 Blowfish算法具…
阅读更多...
AI交互数字人究竟适合什么领域使用？

AI交互数字人究竟适合什么领域使用？

AI交互数字人可以像真人一样拥有流畅的对话能力、连贯的肢体动作&#xff0c;并且在大模型的加持下&#xff0c;通过整合语音交互、自然语言理解、图像识别等AI交互数字人技术&#xff0c;数字人可以轻松为用户提供“面对面”的语音对话交互服务。 AI交互数字人&#xff0c;赋能…
阅读更多...
【C语言——打印乘法口诀表】

【C语言——打印乘法口诀表】

乘法表&#xff1a; 我们可以定义一个i控制行的变化&#xff0c;外加看上图的表得知我们需要用到循环结构&#xff0c;i是行需要不停的加加&#xff0c;因此&#xff0c;for循环比较好用&#xff0c;可以用两个嵌套的循环&#xff0c;外层循环即用到的i表示的是每一行的打印&am…
阅读更多...
【tgcalls】webrtc::Call的使用

【tgcalls】webrtc::Call的使用

call 是MediaManager的成员 G:\CDN\P2P-DEV\tdesktop-offical\Telegram\ThirdParty\tgcalls\tgcalls\MediaManager.hstd::unique_ptr<webrtc::Call> _call;MediaManager 内置网络模块：NetworkInterfaceImpl class NetworkInterfaceImpl : public cricket
阅读更多...
Rust 数据类型使用注意点

Rust 数据类型使用注意点

文章目录 前言一、Rust 的数据类型基本数据类型&#xff1a;复合数据类型&#xff1a; 二、使用注意点&#x1f4e2;整型溢出 总结 前言 Rust 学习系列 &#xff0c;学习rust的数据类型。牢记其中的注意点&#x1f4e2; 一、Rust 的数据类型 Rust 提供了丰富的数据类型&#…
阅读更多...
如何更改默认浏览器？

如何更改默认浏览器？

打开设置---应用---默认应用 点击你想要设置为默认浏览器的应用&#xff08;假设为Microsoft Edge&#xff09;&#xff0c;点击设置默认值就可以了。
阅读更多...
MC34063异常发热分析

MC34063异常发热分析

问题描述&#xff1a; 工程现场反馈若干电源转换模块损坏&#xff0c;没有输出。拿到问题模块后&#xff0c;查看有一个MC34063周围的PCB有比较明显的高温痕迹&#xff0c;配套的电感也有明显的高温过热痕迹。 问题调查&#xff1a; MC34063的电路非常经典&#xff08;虽然自…
阅读更多...
Google聊天机器人Bard计划更名为Gemini并推出新功能；12 个 RAG 痛点和建议

Google聊天机器人Bard计划更名为Gemini并推出新功能；12 个 RAG 痛点和建议

&#x1f989; AI新闻 &#x1f680; Google聊天机器人Bard计划更名为Gemini并推出新功能 摘要&#xff1a;Google的聊天机器人Bard即将更名为Gemini并在2月7日上线。Gemini将推出付费计划Gemini Advanced&#xff0c;类似于ChatGPT Plus的付费模式&#xff0c;用户可以访问强…
阅读更多...
使用mmrotate对自定义数据集进行检测

使用mmrotate对自定义数据集进行检测

这里写自定义目录标题 安装虚拟环境创建与准备安装mmrotate 自定义数据集标注数据与格式转换数据集划分与大图像切片 训练与测试修改配置文件执行训练进行测试鸣谢 安装 mmrotate是一个自带工作目录的python工具箱&#xff0c;个人觉得&#xff0c;在不熟悉的情况下&#xff0…
阅读更多...
忘掉Access吧，全新0代码表格编程工具登场，中国造

忘掉Access吧，全新0代码表格编程工具登场，中国造

灵活好用&#xff0c;广为流传 曾几何时&#xff0c;Access作为微软推出的关系数据库管理系统&#xff0c;风光无限。它不仅是Office家族的一员&#xff0c;更以其易上手、开发周期短的特点&#xff0c;成为非IT专业办公人员的得力助手。一句“Excel使用高手&#xff0c;比不上…
阅读更多...
【电路笔记】-互感

【电路笔记】-互感

互感 文章目录 互感1、概述2、互感3、耦合系数4、互感示例15、互感示例2 互感是一个线圈磁场与另一个线圈的相互作用&#xff0c;因为它在相邻线圈中感应出电压。 1、概述 互感是两个磁耦合线圈之间的电路参数&#xff0c;定义了一个线圈产生的时变磁通量被感应到相邻的第二个…
阅读更多...
不懂快团团大团长对接？凭什么快团团的钱轮到你赚？

不懂快团团大团长对接？凭什么快团团的钱轮到你赚？

对接头部快团团大团长&#xff0c;让快团团大团长帮你卖货 分享几个推品的关键词&#xff1a; 1.推品的内容&#xff1a;产品实拍图核心卖点 不要上来就发笔记&#xff0c;你的产品图和文案还没吸引人&#xff0c;就发笔记没有人看。 可以先发你产品的简短卖点和图片&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023