3.3 案例：企业内容展示页面制作

3.3.1 案例展示

淮安优博文化传播有限公司需要在主页上展示最新发布、合作伙伴和最新课程3个栏目。现根据需求实现的页面效果如图3-14所示。

3.3.2 案例分析

本案例基于基本的Bootstrap基本框架，分析图3-14可以看出，“最新发布”栏目在PC端为4栏，而在平板计算机上为两栏，所以可以使用4个“class="col-sm-6 col-md-3"”来实现，在手机端页面中4个栏目独立成行，同时要求图片为响应式展示。

“合作伙伴”栏目在PC端为6栏，而在平板计算机上为2栏，所以可以使用6个“class="col-sm-6 col-md-2"”来实现，在手机端页面中6个栏目独立成行，同时要求图片为响应式图片展示。“最新课程”栏目与“合作伙伴”栏目功能一样，可以直接复制使用。

具体分为如下步骤4步。

第1步：创建基本样式表。

第2步：编写“最新发布”栏目的HTML结构与CSS代码。

第3步：编写“合作伙伴”栏目的HTML结构与CSS代码。

第4步：编写“最新课程”栏目的HTML结构与CSS代码。

3.3.3 案例实现

第1步：基于Bootstrap框架基础编写基本样式表。

依据基于Bootstrap模板创建网页的方法编写基本样式表，代码如下。

第2步：编写“最新发布”栏目的HTML结构与CSS代码。

根据页面效果的需求，先完成基本的结构设计，代码如下。

然后，根据页面效果的需求，给外层的<div>元素编写CSS类.commodity-show，代码如下。

根据需要，使用“<div class="col-sm-6 col-md-3"></div>”实现页面在PC、平板计算机与手机上的栅格布局，在PC上呈现4列，在平板计算机上呈现2列，在手机上呈现单列。

使用“<img class="img-responsive"src="图片路径 "/>”实现图片的自适应响应展示。

根据需要，在“<div class="col-sm-6 col-md-3"></div>”中添加“最新发布”栏目的具体内容，代码如下。

完成“最新发布”栏目的内容，预览效果如图3-15所示。

第3步：编写“合作伙伴”栏目预览的HTML结构与CSS代码。

根据图3-14所示的页面效果，下面开始编写“合作伙伴”栏目的HTML和CSS代码。

根据需要，使用“<div class="col-sm-6 col-md-2"></div>”实现页面PC、平板计算机与手机上的栅格布局，在平板计算机上呈现2列，在手机上呈现1列，在PC上呈现6列。

使用“<img class="img-responsive"src="图片路径 "/>”实现图片的自适应响应展示。

基本的结构设计代码如下。

然后，根据页面效果的需求，给logo层的div编写CSS类. user-logo-container样式和图片的user-logo样式，代码如下。

完成“合作伙伴”栏目的HTML和CSS代码，预览效果如图3-16所示。

第4步：编写“最新课程”栏目的HTML结构与CSS代码。

根据图3-14所示的页面效果，下面开始编写“最新课程”栏目的HTML和CSS代码。

根据需要，使用“<div class="col-sm-6 col-md-3"></div>”实现页面PC、平板计算机与手机上的栅格布局，在平板计算机上呈现2列，在手机上呈现1列，在PC上呈现4列。

基本的结构设计代码如下。

完成“最新课程”栏目的内容，预览效果如图3-17所示。

3.3.4 案例拓展

另外，还可以给网页添加顶部的logo和底部的版权信息，页面效果如图3-18所示。

顶部logo区域的HTML结构设计代码如下。

底部footer区域的HTML结构设计代码如下。

两个部分所需的CSS样式文件代码如下。