如何更容易地快速学会网格布局?CSS Grid Layout进阶设计实战:模仿京东女装首页(二)

一、引言

CSS网格布局主要抓住两个核心:先确定轴线方向上的元素,然后确定对齐方式,这样开发起来就会顺畅很多。本教程主要围绕CSS网格布局进行实战开发,网格系统布局非常强大,你可以不用依赖第三方框架快速设计页面。如果你还不大了解CSS网格布局可以参考上一篇的教程:CSS网格布局入门详解。

二、女装页面设计需求分析

我们的页面设计目标主要是参考京东女装首页,虽然是模仿界面练习,但是还是需要进行基本的需求分析。一看到就马上写代码不是一个好习惯,如果还没大概想好就做,后面问题会很多,浪费不必要的时间和精力。

需求是什么?标准的需求定义在经济学中,但是它不是一个触不可及的名词,很通俗的名词,不必过多纠结它的意思,需求就是:你需要什么?需要衣、食、住、行、性需求。在这里是指页面要提供的功能。

要说明这个并不容易,要切记需求必不可少,它提供软件设计的基本参考,没需求就是圣人,什么都不用做。

下面的分析并非严格的分析,因为已经有实在的网页参考了,都是简单地直接取功能,简单粗暴。

下面开始分析,主要对下面两张截图中的内容分析,其它的就不需要了,毕竟整个页面比较复杂。京东女装首页地址:https://channel.jd.com/women.html

页面布局分析图解01
页面布局分析图解02

1、顶部

因为顶部还有很多菜单,就不设计这些菜单了,去除菜单功能,仅保留顶部的部分链接文字内容:

左边:首页链接

右边:注册链接、登录链接

2、横幅广告保留

3、Logo一行保留,细节去除,保留的内容:

Logo和标题

搜索框

购物车按钮

4、商品分类整一行的内容均保留,展开菜单不实现,保留的功能:

分类菜单

导航

图片轮播

商品推荐展示

5、下面的部分仅实现一种【品牌上新】商品展示样式:

品牌展示

是不是很简单?每个人都会!当然这是因为有模仿对象了,让我们继续。。。

三、女装页面布局设计分析

因为我们主要是练习CSS网格布局设计,所以本教程会尽量使用Grid布局,从网格布局方面考虑。

我们主要是从整体到局部分析:

1、整个页面:网页主要内容在中间,这里取内容宽度为1200px,暂不考虑响应式的问题;

2、内容部分:顶部、广告横幅、logo一行、导航、分类菜单一行、品牌展示,自上而下都是线性的,也就是每种内容都占据了一行。我们可以整体使用grid设置为1列5行;

3、Logo一行:logo+标题+搜索+购物车,都是横向排版的。这里grid布局可以采取1行3列。导航类似;

4、分类菜单和广告导航左右两列,广告导航内再嵌套grid上下布局;

大概布局方向如下:

布局分析图解

主要就是先垂直切分主要元素,再水平细切分元素。这个也很简单吧,也是每个人都会的操作。

下面我们分析一下需要使用的技术和工具:

1)整体布局:经过上面的简单分析,整体使用Grid网格布局是没有问题的,除了一些复杂的控件使用第三方框架,其它均采用Grid布局;

2)控件元素:这里为简单起见,使用第三方布局框架Semantic-ui中的控件;

3)轮播图:使用boostrap4的轮播;

4)图片文字资源:根据情况,部分直接取京东的。

到这里我们基本清楚设计的内容和如何布局了,一步一步来,先了解清楚你要做的内容,开发起来会更轻松。

下面开始具体的代码设计。。。

四、女装页面布局设计实现细节

1、搭建整体的布局框架

HTML代码如下:

<div class="top">
    <!--顶部内容-->
    <header class="header">
        <div class="begin">
            <a class="item" href="#"><i class="home icon"></i>女装首页</a>
            <a class="item" href="#"><i class="map marker alternate icon"></i>北京</a>
        </div>
        <div class="end">

        </div>
    </header>
</div>

<!--主要内容-->
<div class="wrapper">
    <!--广告横幅-->
    <div class="banner">

    </div>

    <!--logo一行的内容-->
    <div class="bar">

    </div>

    <!--导航-->
    <div class="navigation">

    </div>

    <!--商品分类一行-->
    <div class="splash">

    </div>

    <!--品牌展示-->
    <div class="goods">

    </div>

</div>

CSS代码如下:

/*主要内容*/
.wrapper{
    width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
}


/*顶部内容 - 开始*/
.top{
    width: 100%;
    background-color: #e3e4e5;
}
.top .header{
    width: 1200px;
    height: 30px;
    margin: 0 auto;
    font-size: 12px;
    display: grid;
    grid-template-columns: auto;
    align-items: center;
}
.top .header a{
    color: #999;
    margin-right: 12px;
}
.top .header a:hover{
    color: #f46;
}
.top .header .begin{

}
.top .header .end{

}
/*顶部内容 - 结束*/


/*广告横幅 - 开始*/
.wrapper .banner{
    height: 70px;
    background-color: rgba(255, 105, 139, 0.64);
}
/*广告横幅 - 结束*/


/*logo一行的内容 - 开始*/
.wrapper .bar{
    height: 87px;
    background-color: #d2aeff;
}
/*logo一行的内容 - 结束*/


/*导航 - 开始*/
.wrapper .navigation{
    height: 33px;
    margin-top: 10px;
    background-color: #e5a957;
}
/*导航 - 结束*/


/*商品分类一行 - 开始*/
.wrapper .splash{
    height: 640px;
    padding-bottom: 45px;
    background-color: #e56aa5;
}
/*商品分类一行 - 结束*/


/*品牌展示 - 开始*/
.wrapper .goods{
    height: 447px;
    background-color: #d5e582;
}
/*品牌展示 - 结束*/

效果图如下:

页面初步效果图

分析:

CSS布局中主要在两处使用Grid布局:

1).top .header头部中,设置align-items:
center让header的内容居中;

2).wrapper主要内容中,主要是让.wrapper的单元网格占据整列,然后线性向下布局内容。

2、布局顶部内容

关键CSS布局代码如下:

.top .header{
    width: 1200px;
    height: 30px;
    margin: 0 auto;
    font-size: 12px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    grid-template-areas:
            "begin end";
}
.top .header .begin{
    grid-area: begin;
}
.top .header .end{
    grid-area: end;
}

将头部header网格容器分为两部分网格区域“begin”和“end”,“begin”为左边的内容,“end”是右边的内容。网格单元格分别通过grid-area指定所属网格区域。顶部布局完成,效果图如下:

页面设计效果图

3、广告横幅布局

这个比较简单,使用了京东的广告图片进行展示。

4、Logo一行布局

.wrapper .bar{
    height: 87px;
    /*background-color: #d2aeff;*/
    display: grid;
    grid-template-columns: 242px repeat(2,auto);
    align-items: center;
}

简单起见这里仅repeat 2次平均宽度,相对更好的方式是指定网格区域,让元素左对齐,然后让元素自身margin留白。效果图如下:

页面顶部效果图

5、导航栏布局

CSS代码如下:

.wrapper .navigation{
    height: 33px;
    margin-top: 10px;
    /*background-color: #e5a957;*/
    display: grid;
    grid-template-columns: 242px auto;
    align-items: center;
}

列方向起始固定242px宽度的像素,后面自动调整,这个比较简单,效果图如下:

导航栏布局效果图

6、分类菜单一行

这个相对比之前的稍微复杂一些,因为涉及到嵌套布局。首先整体布局我们可以采取水平两个单元格,然后第二个单元格再进行二次Grid网格布局。第二个网格单元格设置垂直两行单元格,水平方向填充。

水平左右CSS主要网格布局代码如下:

.wrapper .splash{
    height: 640px;
    padding-bottom: 45px;
    /*background-color: #e56aa5;*/
    display: grid;
    grid-template-columns: 242px auto;
    grid-template-rows: 640px;
}

第二单元涉及的网格布局如下:

.wrapper .splash .ads{
    height: 640px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 380px auto;
}
.wrapper .splash .ads .gallery{
    display: grid;
    grid-template-columns: repeat(4,auto);
}

.ads代表第二个单元格,采取上下两行布局,下面需要均匀展示4张图片,可见其实现方式简单快捷。

效果图如下:

商品展示效果图

7、商品推荐Grid网格布局

这个和上一个的实现相似,直接看效果吧:

商品推荐效果图

五、网页完成最终效果

网页最终效果图

六、项目完整源码

github立即吃瓜:https://github.com/onnple/grid_shop

七、结语

项目整体开发并不难,关键地方在于灵活掌握CSS网格布局的使用,以及熟练第三方框架的使用。某些控件如果单纯原生开发的话会很费时间,像菜单、轮播、输入框、按钮样式等,我们可以利用第三方框架进行实现,另外也需要在第三方框架的基础上自定义样式。

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?