srcmini一、引言
CSS网格布局主要抓住两个核心：先确定轴线方向上的元素，然后确定对齐方式，这样开发起来就会顺畅很多。本教程主要围绕CSS网格布局进行实战开发，网格系统布局非常强大，你可以不用依赖第三方框架快速设计页面。如果你还不大了解CSS网格布局可以参考上一篇的教程：CSS网格布局入门详解。
二、女装页面设计需求分析
我们的页面设计目标主要是参考京东女装首页，虽然是模仿界面练习，但是还是需要进行基本的需求分析。一看到就马上写代码不是一个好习惯，如果还没大概想好就做，后面问题会很多，浪费不必要的时间和精力。
需求是什么？标准的需求定义在经济学中，但是它不是一个触不可及的名词，很通俗的名词，不必过多纠结它的意思，需求就是：你需要什么？需要衣、食、住、行、性需求。在这里是指页面要提供的功能。
要说明这个并不容易，要切记需求必不可少，它提供软件设计的基本参考，没需求就是圣人，什么都不用做。
下面的分析并非严格的分析，因为已经有实在的网页参考了，都是简单地直接取功能，简单粗暴。
下面开始分析，主要对下面两张截图中的内容分析，其它的就不需要了，毕竟整个页面比较复杂。京东女装首页地址：https://channel.jd.com/women.html
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网格布局的使用，以及熟练第三方框架的使用。某些控件如果单纯原生开发的话会很费时间，像菜单、轮播、输入框、按钮样式等，我们可以利用第三方框架进行实现，另外也需要在第三方框架的基础上自定义样式。
评论前必须登录！
注册