CSS动效实战(纯CSS与JS动效)02 flex 布局实战(仿 JD 及 gitCode 布局)及 media 自适应初探

Posted 1_bit

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS动效实战(纯CSS与JS动效)02 flex 布局实战(仿 JD 及 gitCode 布局)及 media 自适应初探相关的知识,希望对你有一定的参考价值。

一、flex 仿 JD 布局

首先,我们在编辑器中,写上基础代码,当然要在 style 中加上一个 flex 类,用于 flex 布局的定义,这个是必然需要的,在此一定得加上。

<!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">
    <title>flex jd page demo</title>
    <style>
        .flex
            display:flex;
        
    </style>
</head>
<body>
    
</body>
</html>

1.1 JD 基本布局

基础代码有了,我们直接看 jd 的布局。

我们首先查看当前 JD 首页的头部:

在此我们可以将其图中部分看成一个整体,我们不在乎其内部实现细节,我们此时只需要将这个页面的整体布局划分,那么再到每个块之间对其内部元素进行再一次的细分即可。

在此我们将头部看成是一个整体后,再往下看,我们可以将其看做是一个另一个整体,那么整个 flex 布局的方向就是 column,竖轴方向,那么此时我们在 style 中添加一个类,直接类名咩咩咩为 column即可,这个类如下:

<style>
	.column
	    flex-direction: column;
	
</style>

这个时候我们直接以 body 设置为 flex 布局,并且还需要设置其 flex 方向为 column:

<body class="flex column">

随后在 body 之下添加对应的 div 表示头部,但是此时我们需要添加两个 div ,一个用于头部,另一个用于其主要内容区域,那么此时 body 内的代码如下:

<body class="flex">
    <!--头部-->
    <div></div>
    <!--主要内容-->
    <div></div>
</body>

此时直接设置第一个 div 的高度值,当然这个高度值你可以随意给一个,在此不做要求,本节只是为了锻炼布局能力。在此我给予这个 div 的高度值为 150 px:

<!--头部-->
<div></div>
<!--主要内容-->
<div></div>

此时刷新页面,发现并不能看见任何有用的信息,这个原因是因为背景色都一样你怎么可能看得见,还有就是你也需要给予 div 标签对应的背景颜色,所以在这里使用一种较为常用的颜色,灰和白;灰作为背景 ,白色用于div 背景,此时只需要创建两个样式,一个为背景色类样式,另一个 直接设置所有的 div 标签背景色为白色即可:

<style>
	.bgcolor 
	    background-color: rgb(230, 230, 230);
	
	
	div 
	    background-color: white;
	
</style>

随后给予 body bgcolor 作为背景色:

<body class="flex column bgcolor">

此时页面效果如下:

这时我们发现,这个页面边缘还是存在一定的空隙,直接给予样式:

<style>
        * 
            margin: 0;
        
</style>

这样默认的样式就去除了。

不过我们发现此时的样式还是有些奇怪,因为如果 div 是白色的话为什么只显示了头部的 div 背景色为白色,底部的 div 就像消失了一样,案例来说设置 flex 方向为竖轴后,那么下面的 div 应该会占满空间才是;这个原因其实是当前的高度并没有确定,我们只需要给予 body 的高度为 100个 vh (100%视窗)即可:

<style>
body 
    height: 100vh;

</style>

那这个时候发现还不行,这是因为你还未说明这个装内容的 div 所占高度比例多少,这个时候你直接给予样式 flex:1 让其填充剩余空间就ok了:

<body class="flex column bgcolor">
    <!--头部-->
    <div style="height: 150px;"></div>
    <!--主要内容-->
    <div style="flex:1"></div>
</body>

此时页面刷新后你会发现空白一片,好像也不是很利于观察,这个时候你只需要给予每个 div 的margin 距离即可,直接在 div 中添加对应的样式,此时 div 的样式应该为如下:

<style>
	div 
	    background-color: white;
	    margin: 4px
	
</style>

界面效果如下:

1.2 banner布局

姑且我就叫做 banner吧这个部分,又或者说菜单 :

这部分怎么做呢?

首先我们要想到,这个部分在整个内容块之内,并且这个区域应该是处于单独的一个块之中,那就说明,在我们的内容 div 之下,还需要再创建一个 div 来包裹这一块的内容,那么此时我们到整个 内容块 div 下创建一个 div:

<!--主要内容-->
<div style="flex:1">
	<!--banner or menu?-->
    <div></div>
</div>

接着,这个新创建的 div 应该有左右中 3 个部分,我们可以将最右侧看成是一个块(当然你也可以用你的分法),那么此时就可以在这个 div 内部再创建 3 个 div:

<!--主要内容-->
<div style="flex:1">
    <!--banner or menu?-->
    <div>
        <!--依次左中右-->
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

这个时候我们应该可以意识到,这个 banner 这块直接给予 一个 flex 布局就可以了,并且这其中 3 个 div 应该有不同的宽度占比,直接设置 flex 值即可。

那么此时直接给予这个装 banner 内容的 div flex 样式,并且可以设置其高度为 50个 vh:

<!--banner or menu?-->
<div class="flex" style="height: 50vh;">
    <!--依次左中右-->
    <div></div>
    <div></div>
    <div></div>
</div>

此时刷新页面,白茫茫一片,这是因为你外部的 div 也是白色,然后你这个 div 在外部的 div 之内,都是白色背景,当然看不出来了,所以都要给这两个 div 加上 bgcolor 类样式,这样都是灰色背景,才能看得到对应的div 内容:

<!--主要内容-->
<div style="flex:1" class="bgcolor">
   <!--banner or menu?-->
   <div class="flex bgcolor" style="height: 50vh;">
       <!--依次左中右-->
       <div></div>
       <div></div>
       <div></div>
   </div>
</div>

这个时候刷新页面,更奇怪了,啥都没有:

这是因为你内部 div 的宽度还没分配呢:

那么这个时候直接用 style 给予样式(style 演示 只是为了方便和演示清楚):

<!--banner or menu?-->
<div class="flex bgcolor" style="height: 50vh;">
    <!--依次左中右-->
    <div style="flex:0.2"></div>
    <div style="flex:0.4"></div>
    <div style="flex:0.2"></div>
</div>

这个时候给予的值总和不会超过1,这样就不会充满整个屏幕宽,并且按照比例分配,刷新页面如下:

这个时候我们应该是居中,那么这个时候新建一个类咩咩咩为 center直接给予水平居中属性:

<style>
	.center
	   justify-content: center;
	
</style>

然后给予到当前 banner 的 div 之中:

<!--主要内容-->
    <div style="flex:1" class="bgcolor">
        <!--banner or menu?-->
        <div class="flex bgcolor center " style="height: 50vh;">
            <!--依次左中右-->
            <div style="flex:0.2"></div>
            <div style="flex:0.4"></div>
            <div style="flex:0.2"></div>
        </div>
    </div>

刷新页面如下:

那么此时我们应该可以意识到,当前的 内容 父容器还需要包裹其他内容,都是竖着的,那么每一个块当作是一个 div 进行包裹,那么整体上看是竖着排列的 flex 布局,那么此时内容块应该是为 flex 布局,并且方向为竖,那么直接给予这个内容块最大的容器 div 对应的样式:

<!--主要内容-->
<div style="flex:1" class="bgcolor flex column">
    <!--banner or menu?-->
    <div class="flex bgcolor center " style="height: 50vh;">
        <!--依次左中右-->
        <div style="flex:0.2"></div>
        <div style="flex:0.4"></div>
        <div style="flex:0.2"></div>
    </div>
</div>

此时这一部分的完整代码如下:

<!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">
    <title>flex jd page demo</title>
    <style>
        * 
            margin: 0;
        
        
        body 
            height: 100vh;
        
        
        .bgcolor 
            background-color: rgb(230, 230, 230);
        
        
        div 
            background-color: white;
            margin: 4px
        
        
        .flex 
            display: flex;
        
        
        .column 
            flex-direction: column;
        
        
        .center 
            justify-content: center;
        
    </style>
</head>

<body class="flex column bgcolor">
    <!--头部-->
    <div style="height: 150px;"></div>
    <!--主要内容-->
    <div style="flex:1" class="bgcolor flex column">
        <!--banner or menu?-->
        <div class="flex bgcolor center " style="height: 50vh;">
            <!--依次左中右-->
            <div style="flex:0.2"></div>
            <div style="flex:0.4"></div>
            <div style="flex:0.2"></div>
        </div>
    </div>
</body>

</html>

1.3 其他内容布局

我们接着往下看:

这一部分秒杀区域,我们直接看成左边为一个 div 右边为一个大 div ,方向为默认横方向即可,那么直接创建一个 div,一个比例 0.2 一个比例 0.6 刚好等于 0.8 总和,和之前 banner 宽度综合一样,一点毛病都没有:

<!--主要内容-->
<div style="flex:1" class="bgcolor flex column">
   <!--banner or menu?-->
   <div class="flex bgcolor center " style="height: 50vh;">
       <!--依次左中右-->
       <div style="flex:0.2"></div>
       <div style="flex:0.4"></div>
       <div style="flex:0.2"></div>
   </div>
   <!--秒杀-->
   <div class="flex bgcolor center " style="height: 30vh;">
       <div style="flex:0.2"></div>
       <div style="flex:0.6"></div>
   </div>
</div>

秒杀区域直接一个 flex 给予到对应的居中以及背景色,重新设置对应的 高度 即可,页面如下:

此时细心的话,你应该可以发现, 30 vh 应该不止这一点高度,这是因为我们 flex 布局可以对当前我们的内容进行伸缩,因为 body 高度就 100vh,多了内容肯定要平均的去分配高度的,那么此时我们该怎么办呢?

这个简单,既然他伸缩了,我们就不给他伸缩不就好了,给予一个样式:

<style>
.flex-shrink 
    flex-shrink: 0;

</style>

flex-shrink 为0时就表示对应的元素不进行伸缩,固定尺寸显示,此时将不允许伸缩的内容全部加上该样式就ok了:

<body class="flex column bgcolor">
    <!--头部-->
    <div style="height: 150px;" class="flex-shrink"></div>
    <!--主要内容-->
    <div style="flex:1" class="bgcolor flex column flex-shrink">
        <!--banner or menu?-->
        <div class="flex bgcolor center flex-shrink" style="height: 50vh;">
            <!--依次左中右-->
            以上是关于CSS动效实战(纯CSS与JS动效)02 flex 布局实战(仿 JD 及 gitCode 布局)及 media 自适应初探的主要内容,如果未能解决你的问题,请参考以下文章

CSS动效实战(纯CSS与JS动效)02 flex 布局实战(仿 JD 及 gitCode 布局)及 media 自适应初探 下

CSS动效实战(纯CSS与JS动效)02 flex 布局实战(仿 JD 及 gitCode 布局)及 media 自适应初探 下

01超精美渐变色动态背景完整示例CSS动效实战(纯CSS与JS动效)

01超精美渐变色动态背景完整示例CSS动效实战(纯CSS与JS动效)

CSS动效实战(纯CSS与JS动效)03 精美手风琴侧边栏完整示例教程 示例1

CSS动效实战(纯CSS与JS动效)03 精美手风琴侧边栏完整示例教程 示例1