移动WEB开发二、流式布局

news2024/11/14 14:16:56

零、文章目录

文章地址

  • 个人博客-CSDN地址：https://blog.csdn.net/liyou123456789
  • 个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn

代码仓库地址

  • Gitee：https://gitee.com/bluecusliyou/TechLearn
  • Github：https://github.com/bluecusliyou/TechLearn

移动WEB开发二、流式布局

1、流式布局

  • 流式布局，就是百分比布局，也称非固定像素布局，是移动web开发使用的比较常见的布局方式。
  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
  • max-width 最大宽度 （max-height 最大高度）
  • min-width 最小宽度 （min-height 最小高度）

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>流式布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        section {
            width: 100%;
            max-width: 980px;
            min-width: 320px;
            margin: 0 auto;
        }
        
        section div {
            float: left;
            width: 50%;
            height: 400px;
        }
        
        section div:nth-child(1) {
            background-color: pink;
        }
        
        section div:nth-child(2) {
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>

</html>

image-20230201215056610

2、京东移动端首页制作

  • 访问地址：m.jd.com

（1）技术选型

  • 方案：我们采取单独制作移动页面方案
  • 技术：布局采取流式布局

（2）搭建相关文件夹结构

image-20230112152537911

（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" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

（4）常用初始化样式

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

（5）二倍精灵图做法

  • 有时候，精灵图大小是实际图大小的两倍，需要把精灵图等比例缩放为原来的一半，之后根据大小测量坐标。
  • 注意代码里面background-size也要写： 整个精灵图设置为原来宽度的一半，高度会等比例缩放。

（6）图片格式

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

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

（7）代码实现

index.html

<!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">
    <!-- 引入我们的css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入我们首页的css -->
    <link rel="stylesheet" href="css/index.css">
    <title>京东移动首页</title>
</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/nav2.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/nav3.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">
            <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>

index.css

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


/*点击高亮我们需要清除清除  设置为transparent 完成透明*/

* {
    -webkit-tap-highlight-color: transparent;
}


/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/

input {
    -webkit-appearance: none;
}


/*禁用长按页面时的弹出菜单*/

img,
a {
    -webkit-touch-callout: none;
}

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

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    vertical-align: middle;
}

div {
    /* css3 盒子模型 */
    box-sizing: border-box;
}

.clearfix:after {
    content: "";
    display: block;
    line-height: 0;
    visibility: hidden;
    height: 0;
    clear: both;
}

.app {
    height: 45px;
}

.app ul li {
    float: left;
    height: 45px;
    line-height: 45px;
    background-color: #333333;
    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;
    width: 100%;
    height: 44px;
    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) no-repeat;
    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-color: #fff;
    margin: 0 50px;
    border-radius: 15px;
    margin-top: 7px;
}

.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;
    top: 0;
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}

.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 {
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.brand div {
    float: left;
    width: 33.33%;
}

.brand div img {
    width: 100%;
}


/* 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;
}


/* news */

.news {
    margin-top: 20px;
}

.news img {
    width: 100%;
}

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

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


/* .news a:nth-child(2),
.news a:nth-child(3),
{
    width: 25%;
} */


/* n+2 就是从从2个往后面选 */

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


/* .news a:nth-child(3) {
    width: 25%;
} */

（8）运行效果

image-20230208091757162

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

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

相关文章

【Linux】线程函数和线程同步详细整理（金针菇般细）

【Linux】线程函数和线程同步详细整理（金针菇般细）

目录 一&#xff0c;线程函数 1.获取当前线程ID 2.创建线程 3.退出线程 4.阻塞线程 5.分离线程 6.取消线程 7.线程比较 8.测试代码&#xff08;线程函数总结&#xff09; 二&#xff0c;线程同步 1.互斥锁 2.读写锁 3.条件变量 4.信号量 一&#xff0c;线程函数 …
阅读更多...
【阿旭机器学习实战】【29】产品广告投放实战案例---线性回归

【阿旭机器学习实战】【29】产品广告投放实战案例---线性回归

【阿旭机器学习实战】系列文章主要介绍机器学习的各种算法模型及其实战案例&#xff0c;欢迎点赞&#xff0c;关注共同学习交流。 目录问题描述数据处理过程及源码通过数据可视化分析数据训练线性回归模型可视化训练好的线性回归模型结果预测问题描述 你所在的公司在电视上做产…
阅读更多...
mybatis狂神（附自学过程中疑问解决）

mybatis狂神（附自学过程中疑问解决）

首先先附上mybatis的官方文本链接mybatis – MyBatis 3 | 简介一、Mybatis介绍MyBatis 是一款优秀的持久层框架&#xff0c;它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的 XML 或注解来…
阅读更多...
Comparator和Comparable的区别以及Collections.sort排序原理

Comparator和Comparable的区别以及Collections.sort排序原理

一、概述 Comparable和Comparator都是两个接口&#xff0c;接口都可以用来实现集合中元素的比较、排序&#xff0c;Comparator位于包java.util下&#xff0c;而Comparable位于包java.lang下&#xff0c;Comparable接口将比较代码嵌入自身类中&#xff0c;而Comparator既可以嵌…
阅读更多...
非标题党：前端Vue React 项目编程规范化配置（大厂规范）

非标题党：前端Vue React 项目编程规范化配置（大厂规范）

前端项目编程规范化配置 下述例子主要是从 代码规范化 以及 git 提交规范化 两方面进行配置。内容很多&#xff0c;请做好心理准备 一、代码检测工具 ESLint 在我们通过 vue create “项目名” 时&#xff0c;我们可以通过手动配置的方式&#xff0c;来配置 ESLint 来对代码进…
阅读更多...
QDateTime的11种显示方式

QDateTime的11种显示方式

QDateTime datetime QDateTime::currentDateTime(); datetime.toString(“hh:mm:ss\nyyyy/MM/dd”); datetime.toString(“hh:mm:ss ap\nyyyy/MM/dd”); datetime.toString(“hh:mm:ss\nyyyy-MM-dd”); datetime.toString(“hh:mm:ss ap\nyyyy-MM-dd”); datetime.to…
阅读更多...
【分享】订阅用友YonSuite集简云连接器同步销售出库数据至用友YonSuite

【分享】订阅用友YonSuite集简云连接器同步销售出库数据至用友YonSuite

方案场景 在企业中因多种系统孤立导致数据割裂&#xff0c;是现企业中现阶段面临的最大问题&#xff0c;而钉钉作为常用的OA审批系统&#xff0c;用友YonSuite作为ERP系统&#xff0c;原方式钉钉内完成审批再由人工将数据同步到用友YonSuite系统&#xff0c;数据同步过程中不仅…
阅读更多...
将HTTP接口配置成HTTPS

将HTTP接口配置成HTTPS

一、使用Java的keytool.exe程序生成本机的TLS许可找到Java的jdk目录进入bin默认安装路径C:\Program Files\Java\jdk1.8.0_91\bin 进入命令面板&#xff0c;在bin的路径栏中输入cmd敲击回车即可使用keytoolkeytool -genkeypair -alias tomcat_https -keypass 123456 -keyalg RSA…
阅读更多...
linux线程的基本知识

linux线程的基本知识

这里用的是Linux的pthread线程库&#xff0c;需要加pthread线程库。 线程的创建 第一个参数是线程id的地址。第二个参数是线程属性&#xff0c;一般为NULL。第三个是要执行的函数。第四个是函数的参数&#xff0c;一般也为NULL 线程的等待&#xff0c;第一个参数是线程的id,第…
阅读更多...
VBA提高篇_27 OptionBOX_CheckBox_Frame_Image_VBA附加控件

VBA提高篇_27 OptionBOX_CheckBox_Frame_Image_VBA附加控件

文章目录1.单选按钮OptionBOX:2.复选框CheckBox:3.框架Frame:4.图像Image: (loadPictrue)5. VBA附加控件:6. 适用于很多控件的重要属性:1.单选按钮OptionBOX: 默认时,同一窗体的所有单选按钮均属于同一组,只能选中一个 可通过Frame控件进行分组解决. 2.复选框CheckBox: 一次可以…
阅读更多...
备考软考系统分析师-1

备考软考系统分析师-1

系统分析师教程网盘资源&#xff1a;链接: https://pan.baidu.com/s/1ekHuCJJ3o5RrW1xeMkxhdA 提取码: 6666 信息系统战略规划 信息系统开发方法&#xff1a; 结构化法 瀑布模型 原型法 自顶向下 用于需求阶段较多 面向对象 自底向上 面向服务的方法 系统建模 政府信息…
阅读更多...
在Excel接入 chatgtp （图文教学）

在Excel接入 chatgtp （图文教学）

效果图 话不多说&#xff0c;开始教学 首先点击插入&#xff0c;然后点击获取加载项 office Excel 加载加载项时出错 解决办法_long_songs的博客-CSDN博客今天在添加维基百科的时候&#xff0c;怎么都添加不了&#xff0c;网上的办法都是关闭&#xff0c;重启&#xff0c;或者…
阅读更多...
[架构之路-114]-《软考-系统架构设计师》-软件架构设计-7-软件架构评估

[架构之路-114]-《软考-系统架构设计师》-软件架构设计-7-软件架构评估

前言第7节 软件架构评估7.1 什么是架构评估/为什么要软件架构评估在软硬件系统总体架构设计完成之后&#xff0c;为保证架构设计的合理性、完整性和针对性&#xff0c;从根本上保证系统质量&#xff0c;降低成本及投资风险&#xff0c;需要对总体架构进行评估。7.2 软件架构评估…
阅读更多...
word高效技巧：几个快速填充表格的操作方法

word高效技巧：几个快速填充表格的操作方法

我们办公人员在面对大量表格数据的时候&#xff0c;都希望以最简便、快捷的方式完成对数据的填充、美化等整理工作。比如&#xff0c;日常工作中几种常用的Word表格填充类型&#xff1a;1. 填充序号&#xff1b;2. 填充文本&#xff1b;3. 填充颜色。因此&#xff0c;接下来给大…
阅读更多...
你了解互联网APP推荐的背后逻辑么（下）？

你了解互联网APP推荐的背后逻辑么（下）？

上篇重点介绍了互联网APP在搜索交互场景下的通用逻辑&#xff0c;让大众对每天离不开的搜索进行了一个普遍介绍。这一篇&#xff0c;我们来聊聊抖音、头条等APP划一划这个动作背后&#xff0c;是怎么做推荐的。推荐的背后&#xff0c;离不开每个用户的数据&#xff0c;而且这个…
阅读更多...
谈谈Linux内核的噪声

谈谈Linux内核的噪声

Linux内核是广被使用的操作系统&#xff0c;从嵌入式家用设备&#xff0c;航空航天设备到超级计算机&#xff0c;到处都有Linux内核的身影&#xff0c;这归功于Linux内核丰富的配置带来的巨大灵活性。 网络虚拟化和软件定义网络的发展&#xff0c;也从另外一个方面证实了在网络…
阅读更多...
Java线程的6中状态

Java线程的6中状态

Java 线程的状态 Java线程有六种状态&#xff1a; 初始&#xff08;NEW&#xff09;、运行&#xff08;RUNNABLE&#xff09;、阻塞&#xff08;BLOCKED&#xff09;、 等待&#xff08;WAITING&#xff09;、超时等待&#xff08;TIMED_WAITING&#xff09;、终止&#xff08…
阅读更多...
layui框架学习（8：动态操作选项卡）

layui框架学习（8：动态操作选项卡）

Layui官网示例&#xff08;参考文献3&#xff09;中的选项卡部分除了介绍选项卡的样式外&#xff0c;还介绍了新增选项卡、删除选项卡、切换选项卡等动态操作选项卡方式&#xff0c;主要调用element模块中与选项卡相关的函数实现&#xff0c;除此之外&#xff0c;element模块还…
阅读更多...
树莓派下安装OpenEuler

树莓派下安装OpenEuler

openEuler作为华为开源的应用于嵌入式设备的操作系统&#xff0c;正在受到越来越多的关注。树莓派是一个很好的应用场景&#xff0c;这篇文章就介绍下如何在树莓派上安装openEuler。   ps&#xff1a;openEuler要求树莓派的版本是4B 1.下载openEuler镜像 镜像网址&#xff1…
阅读更多...
【K哥爬虫普法】百度、360八年乱战，robots 协议之战终落幕

【K哥爬虫普法】百度、360八年乱战，robots 协议之战终落幕

我国目前并未出台专门针对网络爬虫技术的法律规范&#xff0c;但在司法实践中&#xff0c;相关判决已屡见不鲜&#xff0c;K哥特设了“K哥爬虫普法”专栏&#xff0c;本栏目通过对真实案例的分析&#xff0c;旨在提高广大爬虫工程师的法律意识&#xff0c;知晓如何合法合规利用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023