苏宁易购自适应屏幕移动端

最新推荐文章于 2022-12-01 18:55:14 发布
最新推荐文章于 2022-12-01 18:55:14 发布
阅读量583 收藏 17
点赞数 1
分类专栏： html web css 文章标签： css3 html5 vscode 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42583802/article/details/124896012
版权
html 同时被 3 个专栏收录
12 篇文章 0 订阅
订阅专栏
css
12 篇文章 0 订阅
订阅专栏
web
8 篇文章 0 订阅
订阅专栏

 

                   

html代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0" />
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>苏宁易购</title>
    <link rel="shortcut icon" href=" favicon.ico" />

</head>

<body>
    <!-- 顶部搜索框 -->
    <div class="search-content">
        <a href="#" class="classify"></a>
        <div class="search">
            <input type="search" placeholder="厨卫保季暖">
        </div>
        <div class="login">登录</div>
    </div>
    <!-- 广告部分 -->
    <div class="banner">
        <img src="upload/banner.gif" alt="">
    </div>
    <div class="ad">
        <a href="#">
            <img src="upload/ad1.gif" alt="">
        </a>
        <a href="#">
            <img src="upload/ad2.gif" alt="">
        </a>
        <a href="#">
            <img src="upload/ad3.gif" alt="">
        </a>
    </div>
    <!-- nav模块 -->
    <nav>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>
                苏宁秒杀
            </span>
        </a>
        <a href="#">
            <img src="upload/nav2.png" alt="">
            <span>
                苏宁超市
            </span>
        </a>
        <a href="#">
            <img src="upload/nav3.png" alt="">
            <span>
                苏宁拼购
            </span>
        </a>
        <a href="#">
            <img src="upload/nav4.png" alt="">
            <span>
                手机数码
            </span>
        </a>
        <a href="#">
            <img src="upload/nav5.png" alt="">
            <span>
                苏宁家电
            </span>
        </a>
        <a href="#">
            <img src="upload/nav6.png" alt="">
            <span>
                免费水果
            </span>
        </a>
        <a href="#">
            <img src="upload/nav7.png" alt="">
            <span>
                super会员
            </span>
        </a>
        <a href="#">
            <img src="upload/nav8.png" alt="">
            <span>
                签到有礼
            </span>
        </a>
        <a href="#">
            <img src="upload/nav9.png" alt="">
            <span>
                领券中心
            </span>
        </a>
        <a href="#">
            <img src="upload/nav10.png" alt="">
            <span>
                更多频道
            </span>
        </a>
    </nav>
    <!-- bottom模块 -->
    <div class="bottom">
        <div class="row">
            <a href="#">
                <img src="upload/bot1.jpg" alt="">
            </a>
            <a href="#">
                <img src="upload/bot2.jpg" alt="">

            </a>
        </div>
        <div class="row">
            <a href="#">
                <img src="upload/bot3.jpg" alt="">
            </a>
            <a href="#">
                <img src="upload/bot4.jpg" alt="">

            </a>
        </div>
        <div class="row">
            <a href="#">
                <img src="upload/bot5.jpg" alt="">
            </a>
        </div>
    </div>
</body>

</html>

css代码

html {
  font-size: 50px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333333px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 24px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 25px;
  }
}
@media screen and (min-width: 384px) {
  html {
    font-size: 25.6px;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 26.66666667px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 27.6px;
  }
}
@media screen and (min-width: 424px) {
  html {
    font-size: 28.26666667px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 32px;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 36px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 48px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 50px;
  }
}
img {
  vertical-align: middle;
}
a {
  text-decoration: none;
}
body {
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  background-color: #f2f2f2;
  font-size: 25px;
  height: 2000px;
}
.search-content {
  position: fixed;
  display: flex;
  left: 0;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15rem;
  height: 1.76rem;
  background-color: #ffc001;
  align-items: center;
}
.search-content .classify {
  width: 0.88rem;
  height: 1.4rem;
  background: url(../images/classify.png) no-repeat;
  background-size: 0.88rem;
  margin: 0 0.4rem;
}
.search-content .login {
  width: 1.5rem;
  height: 1.4rem;
  margin: 0 0.2rem;
  color: #fff;
  font-size: 0.5rem;
  text-align: center;
  line-height: 1.4rem;
}
.search-content .search {
  flex: 1;
}
.search-content .search input {
  width: 11.24rem;
  height: 1.32rem;
  border-radius: 1.32rem;
  border: 0;
  padding: 0 1rem;
  background-color: #fff2cc;
  color: #757575;
  font-size: 0.52rem;
  outline: none;
}
.banner {
  width: 15rem;
}
.banner img {
  width: 100%;
}
.ad {
  display: flex;
  width: 15rem;
  margin: 0.1rem 0;
}
.ad a {
  flex: 1;
}
.ad a img {
  width: 100%;
}
nav {
  width: 15rem;
  overflow: hidden;
  background-color: #f6f6f6;
  margin-bottom: 0.4rem;
}
nav a {
  float: left;
  width: 3rem;
  height: 2.8rem;
  color: #333;
  font-size: 0.5rem;
  text-align: center;
}
nav a img {
  display: block;
  width: 1.64rem;
  height: 1.64rem;
  margin: 0.2rem 0.68rem 0.06rem;
}
.bottom {
  width: 15rem;
}
.bottom .row {
  display: flex;
}
.bottom .row a {
  flex: 1;
  box-sizing: border-box;
}
.bottom .row a img {
  width: 100%;
}
.bottom .row:nth-child(-n+2) a:nth-child(1) {
  border-right: 1px solid #ccc;
}
.bottom .row:nth-child(3) a:nth-child(1) {
  border-top: 1px solid #ccc;
}

 

Bubble_Qi
关注
  • 1
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
苏宁易购（rem+媒体查询+移动端）
03-08
rem布局练习
仿苏 宁 易 购官网模板html源码-商城网站模板
04-06
高仿苏宁易购商城源码是一套基于php开发的商城高仿应用最新版网站项目源码，实现了首页、搜索页、商品分类页、购物页、个人中心的登录注册、应用设置页面的UI布局模仿。UI仿照度 高达百分之九十.其中包含首页弹出式分类、轮播广告，商品列表页与详细页左侧只显示当前分类下的所有小类，非常不错哦。浏览器兼容性强。实现了几乎所有用户所需要的购物及浏览功能，舒适的体验和美观的ui是网站最大的特色。 商城源码站长在这边已经分享了不少，这款是其中效果比较好的，没有实际测试，但是看过别人搭建的效果是杠杠，下面分享一下部分界面演示图。
移动端rem布局 案例练习
MartinYP的博客
08-07 294
学习记录博客
移动端项目-苏宁易购
weixin_45662026的博客
12-01 348
【代码】移动端项目-苏宁易购。
苏宁易购移动端页面（附源码）
weixin_47627102的博客
10-14 4141
苏宁易购移动端简写首页（附源码） 源码链接：https://pan.baidu.com/s/1CXdE4t30e31Q3eJIGWlbRg 提取码：nbnb 其中有一些属性计算教冗余，建议大家使用vscode然后预装一下Easy LESS，运用less可以大大减少开发时间 以下是效果展示： ...
苏宁11.11:苏宁易购移动端的架构优化实践
weixin_34186128的博客
11-10 491
双11，不仅是广大商家和消费者们的饕餮盛宴，同时也是各家电商公司的技术研发力量的实力体现。2016年苏宁易购双11首小时订单量增287%，移动端占比86%。为了给用户带来更好的体验，苏宁易购移动端团队一直以来追求 “极速、稳定、安全” 的目标，围绕这一共同目标，我们以小团队作战、敏捷的开发模式，开展了一系列工作，其中主要包括：\\\\（1）客户端架构解耦：为了保障App性能的稳定，适应业务的快熟发...
PHP轻量级人工在线客服系统源码 自适应手机移动端.zip
06-19
PHP轻量级人工在线客服系统源码 自适应手机移动端 支持多商家 带搭建教程 支持多商家 支持多商家，每个注册用户为一个商家，每个商家可以添加多个客服。 不限坐席 每个商家可以无限添加坐席，不限制坐席数 支持H5...
HTML5期末前端大作业 仿苏宁易购 移动端 19页 自适应响应式
最新发布
06-28
本次HTML5期末前端大作业以“仿苏宁易购移动端”为主题，旨在通过实践的方式深入学习和掌握现代Web开发的核心技术——HTML5、CSS3以及JavaScript，并结合Bootstrap等流行框架实现一个自适应、响应式的移动电商网站。...
PHP轻量级人工在线客服系统源码 自适应手机移动端 支持多商家 带搭建教程
07-14
PHP轻量级人工在线客服系统源码 自适应手机移动端 PHP轻量级人工在线客服系统源码 自适应手机移动端 支持多商家 带搭建教程 支持多商家 支持多商家，每个注册用户为一个商家，每个商家可以添加多个客服。 不限坐席...
在线客服系统源码+自适应手机移动端+支持多商家+带搭建教程
02-13
在线客服系统源码+自适应手机移动端+支持多商家+带搭建教程 PS 本源码提供给大家学习研究借鉴美工之用，请勿用于商业和非法用途，无任何技术支持！ 运行环境 apache+mysql5.6+php7.2 风格截图
苏宁易购 源码
03-17
苏宁易购 源码，
手机端网站H5静态页面 仿苏宁移动端
06-22
手机端网站H5静态页面 仿苏宁移动端, 自适应，只有静态页，可供学习
最新仿苏宁易购商城源码（完整版）
05-15
最新仿苏宁易购商城源码（完整版）
苏宁易购模版
06-04
绝对商业版，测试完整可用，shopex4.85苏宁易购第二版/模板堂shopex4.85模板商业版/B2C网站程序！PHP+MySQL，压缩包里有安装说明，下载使用即可！ （1）使用“仿苏宁易购第二版全站”里的文件，运行http://域名/install/ ，安装shopex4.85。 （2）完成shopex4.85安装之后，http://域名/shopadmin/ 登陆shopex4.85。 （3）在后台选择“页面管理”—“模板管理”—“模板列表”—“使用模板”苏宁易购(Shopex4.8) 注释：分离出来的模板和插件文件在“仿苏宁易购第二版模板”文件夹中，需要的朋友可以在自己的Shopex4.8网站中使用。 程序介绍： 1、高仿苏宁易购第二版B2C网站程序采用ShopEx4.8.5内核，配以仿苏宁易购第二版风格，模版仿真率达95%以上，运行环境需支持PHP+MYSQL。 亲,试试微信扫
NewEBuy 苏宁易购ios源码 github版本
10-09
NewEBuy 苏宁易购ios源码 github版本 仅存下载链接 从速
使用两种rem布局方案-实现静态苏宁易购移动端首页
SHoadgnaw的博客
03-29 2407
使用两种rem布局方案-实现静态苏宁易购移动端首页方案1:rem+less+媒体查询htmlcommon.lessindex.less方案2:flexible.js+rem小插件小问题htmlindex.lessflexible.js 方案1:rem+less+媒体查询 跟其他页面不同的文件，需要新建common.less文件 用媒体查询设置不同的html字体大小 因为除了首页其他页面也要 尺寸为 320px 360px 375px 400px 414px 424px 480px 540px 720px
仿照苏宁易购的简单网站制作（包含效果图及其代码）
m0_65054943的博客
07-12 1579
苏宁易购简单网页制作
rem适配布局制作苏宁移动端首页
qq_49900295的博客
03-25 1236
实现效果： 可以看到随着我们屏幕尺寸的不断变化，我们制作的移动端页面也能有一个自适应的效果，这就是rem适配布局的好处 这里我们主要是体现一个rem适配布局所以剩下的部分以同样方法搭建 1.技术选型 方案：采取单独制作移动页面方案 技术：布局采取rem适配布局（less+rem+媒体查询） 设计图：采用750px设计尺寸 2.搭建相关文件夹结构 3.设置视口标签以及引入初始化样式 关于初始化样式normalize.css文件和案例用到的图片，大家在这个链接拿来就可以用 链接: link. index.
苏宁易购页面（未完成）
m0_62270197的博客
07-12 200
苏宁易购未完成页面
htm自适应适配移动端
08-23
这种方法可以通过基于设备屏幕的宽度和像素密度等信息来计算出合适的适配值，例如使用rem单位来实现自适应。rem是相对于根元素的字体大小的单位，通过动态设置根元素的字体大小，可以实现页面的自适应。 所以，对于...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Bubble_Qi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值