移动端三种布局方式之流式布局-移动端京东首页

最新推荐文章于 2023-05-30 01:15:39 发布
最新推荐文章于 2023-05-30 01:15:39 发布
阅读量792 收藏 16
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JadeDu_/article/details/119767401
版权

结果图

在这里插入图片描述

思路解析及注意点

1. 顶部

头部通栏的大盒子宽度是100%，里面划分成四个小盒子，用ul li排列 四个li高度相同 设置不同宽度，让四个盒子里的内容垂直居中
为了代码规范，图片都要放在盒子里，改动盒子内图片大小直接设置就可以。

.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;
}
.app ul li:nth-child(3){
    width: 57%;
}
.app ul li:nth-child(4){
    width: 25%;
    background-color: #F63515;
}

 

这里有个注意点：以往给所有的小li 设置line-height:行高 和 text-align:center 能让所有盒子里的行内元素和行内块元素垂直居中显示（图片和文字是行内元素），但这里不行。
如图
在这里插入图片描述
原因：图片默认与文字基线对齐，第一二个小li都排列位置不准，由于第一个图片很小，所以看起来偏差不大

解决方法：给index.css添加初始化代码

img {
    vertical-align: middle;
}

2. 头部

（1）头部通栏的大盒子中间放三个盒子。大盒子要设置高度。（老是忘记）
左右两个盒子用绝对定位定在两侧（脱离标准流），中间的盒子不设置宽度（标准流），默认和父元素一样宽，左右设置margin值，空出两个盒子的距离。
通栏大盒子固定在浏览器上部，给大盒子一个固定定位，在大盒子里增加代码 position:fixed

在这里插入图片描述
 

这里有个注意点：给中间盒子加 上边距后，父盒子塌陷

.search {
    position: relative;
    height: 30px;
    /* 父级边框塌陷也叫外边距合并问题，有四种方法可以解决，在这里我们使用给父级边框加一个overflow:hidden */
    margin: 7px 50px;
    border-radius: 15px;
    background-color: #fff;
}

解决方法：给父盒子加一个overflow:hidden
 

（2）左边的盒子里的图片是用伪元素写的(我不知道为什么不能直接把图片放到这个定位的盒子里，就这么写吧):伪元素是行内元素，转化为块元素才能设置宽高，content属性必须写。
background-size: 20px 18px;用来修改背景图片大小！！牛逼！

.search-btn::before{
    display: block;
    width: 20px;
    height: 18px;
    content: '';
    background: url(../images/s-btn.png) no-repeat;
    background-size: 20px 18px;
    margin:14px 0 0 15px;
}

 

（3）中间的盒子里面放了两个盒子，分别用来放两个图标（左边jd图标是背景图，右边放大镜是精灵图），然后用绝对定位把图标调整到盒子正确的位置里，图标中间的竖线是用伪元素写的。两个盒子都需要调成和图片一样的大小。
 
jd图标和竖线做法

.jd-icon{
    position:absolute;
    top: 0;
    left: 5px;
    width: 20px;
    height: 15px;
    background:url(../images/jd.png) no-repeat;
    background-size: 20px 15px;
    margin: 8px 8px 0 15px;
}
.jd-icon::after{
    position: absolute;
    top: 0;
    right: -5px;
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    background-color: #ccc;
}

 
放大镜做法（重点!!！二倍精灵图）（有写博客）

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

 

3.主体内容

（1）导航栏部分 在流式布局中不需要用ul li 直接用10个小a让他们浮动起来，一个占父盒子宽度的20%就行了
 

注意

.nav a{
    /* 但是这边的display block可以省略因为行内元素设置浮动以后可以设置宽高 */
    /* display: block; */
    float: left;
    width: 20%;
    /* 里面的图片和文字都可以居中对齐 */
    text-align: center;

}

(2)给后两张图片增加灰色左边框，需要给a标签加上css3盒子属性 box-sizing: border-box;不然盒子放不下一行

在这里插入图片描述

 
(3)增加最下面这个大盒子的margin-top属性发现没反应，是因为父盒子没有给高度，子元素浮动带来的影响，这时要清除浮动的影响，给父元素增加overflow: hidden;
在这里插入图片描述

.news{
    /* 这里清除浮动需要把上面那个nav盒子也清楚浮动，自己看图f12调试的时候能看出问题 */
    overflow: hidden;
    /* 要清除浮动margin-top才能生效，让子盒子自动撑开盒子，不给父盒子设置高度 */
    margin-top: 14px;
}

 

代码

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">
    <!-- 引入css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入首页的css文件 -->
    <link rel="stylesheet" href="css/index.css">
    <title>Document</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 class="">
                <a href="">
                    <img src="upload/pic11.dpg" alt="">
                </a>
            </div>
            <div class="">
                <a href="">
                    <img src="upload/pic22.dpg" alt="">
                </a>
            </div>
            <div class="">
                <a href="">
                    <img src="upload/pic33.dpg" alt="">
                </a>
            </div>
        </div>
    
    <!-- nav部分 -->
    <nav class="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>
    <!-- news新闻快报模块 -->
    <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>

 

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链接初始化链接颜色灰色，去掉链接下划线 */
a {
    color: #666;
    text-decoration: none;
}
/* 清除ul的原始样式  内外边距小圆点 */
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* /* 图片默认和文字基线对齐，这样设置图片和文字居中对齐，去除图片底侧空白缝隙 */
img {
    vertical-align: middle;
} 

div {
    /* css3 盒子模型 */
    box-sizing: border-box;
}
/* 顶部 */
.app{
    width: 100%;
    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;

}

.app ul li:nth-child(2){
    width: 10%;
}
.app ul li:nth-child(2) img{
    width: 30px;
}
.app ul li:nth-child(3){
    width: 57%;
}
.app ul li:nth-child(4){
    width: 25%;
    background-color: #F63515;
}
/* 搜索 */
.search-wrap{
    position: relative;
    /* 固定定位，根据浏览器 */
    position: fixed;
    overflow:hidden;
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    height: 44px;
    background-color:  #F63515;
}
.search-wrap .search-btn{
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 44px;
    background-color:  #F63515;
}
/* 利用伪元素可以不用在html页面放盒子，伪元素可以生成盒子，伪元素是行内块元素，转成块元素才可以设置宽高放背景图片,再在这个盒子里放背景图片 因为要符合规范img必须放在盒子里，这里的盒子是固定大小所以需要重新设置一个放img的盒子，既然如此用伪元素比较方便*/
.search-btn::before{
    display: block;
    width: 20px;
    height: 18px;
    content: '';
    background: url(../images/s-btn.png) no-repeat;
    background-size: 20px 18px;
    margin:14px 0 0 15px;
}

.search-wrap .search-login{
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    background-color: #F63515;
    line-height: 44px;
    text-align: center;
    color: #fff;
}
/* 搜索框根据屏幕大小自适应的方法 */
.search-wrap .search {
    position: relative;
    height: 30px;
    /* 父级边框塌陷也叫外边距合并问题，有四种方法可以解决，在这里我们使用给父级边框加一个overflow:hidden */
    margin: 7px 50px;
    border-radius: 15px;
    background-color: #fff;
}
.jd-icon{
    position:absolute;
    top: 0;
    left: 5px;
    width: 20px;
    height: 15px;
    background:url(../images/jd.png) no-repeat;
    background-size: 20px 15px;
    margin: 8px 8px 0 15px;
}
.jd-icon::after{
    position: absolute;
    top: 0;
    right: -5px;
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    background-color: #ccc;
}
/* 二倍精灵图做法 */
.sou {
    position: absolute;
    top: 8px;
    left:56px;
    width: 18px;
    height: 15px;
    background-color: pink;
    background: url(../images/jd-sprites.png) no-repeat -83px 0;
    background-size:200px;
}
/* 主体内容部分 */
/* 滑动图 */
/* .main-content{width: 100%;} */
.slider img{
    width: 100%;
}
/* 品牌日 */
.brand  {
    /* 设置图片圆角 */
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    
}
.brand div{
    float: left;
    width: 33.333%;   
}
.brand div img{
    width: 100%;
}
.nav{
    overflow: hidden;
    padding-top: 5px;
}

.nav a{
    /* 但是这边的display block可以省略因为行内元素设置浮动以后可以设置宽高 */
    /* display: block; */
    float: left;
    width: 20%;
    /* 里面的图片和文字都可以居中对齐 */
    text-align: center;

}
.nav a img{
    width: 40px;
    margin: 10px 0;
}
.nav a span{
    display: block;
}
.news a {
    display: block;
    /* 因为给行内元素a设置了宽度上面所以要先转化为块元素然后再浮动，但是只写浮动也是可以的，因为加了浮动的盒子可以设置宽高*/
    float: left;
    
    box-sizing: border-box;
}
.news{
    /* 这里清除浮动需要把上面那个nav盒子也清楚浮动，自己看图f12调试的时候能看出问题 */
    overflow: hidden;
    /* 要清除浮动margin-top才能生效，让子盒子自动撑开盒子，不给父盒子设置高度 */
    margin-top: 14px;
}


.news a img{
    width: 100%;
}
.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;
}
JadeDu_
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
京东商城 和移动端代码
12-19
京东商城是非常典型的p2p网站，非常值得我们去学习。还有开发文档
京东/淘宝移动端商城
最新发布
m0_74384946的博客
10-31 417
这个商城是基于HTML框架开发的，对初学者比较的友好。javascrip作为辅助型框架进行对网页的修改和帮助。本移动商城主要以2022年的京东网页为参考进行的设计与勾勒。此代码一部分都有注释，方便新学者学习！话不多说直接上代码！！
京东移动端分类页面侧导航栏实现
热门推荐
云
04-08 5万+
【代码】京东移动端分类页面侧导航栏实现。
京东移动端首页布局静态页面
weixin_39288299的博客
04-03 2767
涉及知识点： 静态页面 flex布局 二倍图 定位 代码实现： index.html部分代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--移动端设置viewport--> <meta name="viewport" ...
移动端购物类页面首页、购物车、搜索页面HTML、LESS代码
weixin_64208498的博客
04-10 3900
location实现页面跳转，forEach实现数据的遍历渲染，固定定位，背景渐变
京东移动端首页制作--移动端开发之流式布局
03-18
在京东移动端首页项目中，流式布局通常通过CSS3的媒体查询（Media Queries）来实现。媒体查询允许开发者根据设备特性，如视口宽度，来应用不同的样式规则，确保页面在各种屏幕尺寸下都能保持良好的视觉效果。 在...
前端移动Web第一天：京东移动端首页案例-流式布局.zip
04-16
这个"京东移动端首页案例-流式布局.zip"压缩包提供了一个实践性的示例，让我们深入理解如何构建适应不同屏幕尺寸的流式布局。流式布局是现代Web设计的核心，它允许网页内容在各种设备上自适应展示，无论是桌面、平板...
移动端布局之流式布局（百分比布局）
06-06
本文将深入探讨“流式布局”这一主题，它是一种基于百分比的布局方式，能够灵活适应不同屏幕尺寸，实现响应式设计。 流式布局的核心思想是利用百分比而非固定像素来定义元素的宽度，这样可以确保页面在不同分辨率和...
京东移动端首页 流式布局
05-10
流式布局是网页设计中的一种常见布局方式，尤其在移动端应用广泛，因为它能提供良好的响应式体验，确保页面内容在不同尺寸的设备上都能自适应显示。京东移动端首页的流式布局设计，是为了保证用户在手机、平板等不同...
移动端项目，仿京东移动端（流式布局）.zip
11-07
总的来说，这个项目展示了如何结合 HTML5 和 CSS3 的优势来构建一个适应移动端的流式布局界面，特别是对于像京东这样的电商平台，这种布局方式能够提供一致且优质的用户体验，无论用户使用的是何种设备。通过深入...
android京东首页轮播代码,web移动端-轮播
weixin_39929687的博客
05-26 181
var bannerImg = document.querySelectorAll(".jd_banner ul li");/*1.自动滚动(定时器+过渡transition+位移transform:translateX);2.点随之滚动起来,改变当前的class样式3.添加滑动事件(touch)(1)当滑动超过一定距离的时候 滚动到上一张或者下一张 (banner图片的1/3);(2)当滑动不超...
Android仿京东购物车-----完整代码(三)
big_fff的博客
08-24 3618
activity public class MainActivity extends AppCompatActivity implements View.OnClickListener { ExpandableListView expandableListView; Context context; private CheckBox checkall; pri...
【移动端h5项目】京东移动端（流式布局）
coderYYY的博客
03-09 1043
技术栈 html css 体验 浏览器打开：jd-mobile Gitee 效果 主要使用流式布局（百分比布局），页面较为简单
移动端案例-京东首页
weixin_45662026的博客
08-27 1236
方案： 单独制作移动页面方案。
移动端开发——京东首页制作（流式布局）
道阻且长，行则将至。
05-17 1312
移动端开发——京东首页制作（流式布局） 项目准备 初始化基本文件夹 创建index.html 设置视口 引入基本公共样式 引入自己的css样 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
移动端通用样式
sword_chiu的博客
06-07 549
html { font-family: "Helvetica Neue", Helvetica, sans-serif; /*谷歌浏览器字体最小字体12px*/ -webkit-text-size-adjust: 100%; /*100%/none 关闭字体大小自动调整功能*/ /*a标签及拥有 :active伪类的元素有默认的高亮框*/ -webk...
仿京东移动端分类页面的布局及css设置
zuo-yiran的博客
12-22 5229
项目中用到的分类界面要的效果类似于京东移动端的分类页面：（两侧都可滑动且互不影响）放弃了，代码到这上面又变的奇怪了不少，直接到csdn上看吧！地址是：http://blog.csdn.net/zuoyiran520081/article/details/53811671 效果如图： html代码如下： 柴米油盐 柴米油盐1 柴米油盐2 柴...
几行代码解决京东购物界面
流楚丶格念的博客
07-10 9159
文章目录完整项目界面展示GIF界面代码index.htmlindex.css（中间主要部分）base.css（头部，尾部）normal.css图片资源 完整项目 https://download.csdn.net/download/weixin_45525272/12596801 界面展示 GIF 界面代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
移动端布局之流式布局1（百分比布局）：流式布局基础、案例：京东移动端首页1
qq_34306228的博客
05-30 1041
【代码】移动端布局之流式布局1（百分比布局）
移动端三段式布局代码
05-27
下面是一个简单的移动端三段式布局代码示例： ```html <!DOCTYPE html> 移动端三段式布局 <meta name="viewport" content="width=device-width, initial-scale=1.0"> /* 设置页眉样式 */ header { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值