3.3 案例：企业内容展示页面制作
3.3.1 案例展示
淮安优博文化传播有限公司需要在主页上展示最新发布、合作伙伴和最新课程3个栏目。现根据需求实现的页面效果如图3-14所示。
图3-14 网站页面整体效果
a) PC宽屏状态下的页面效果 b) 平板计算机上的页面效果
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-15 “最新发布”栏目预览效果
a) PC宽屏状态下的页面效果 b)手机上的页面效果
第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所示。
图3-16 “合作伙伴”栏目预览效果
a) 平板计算机上的页面效果 b)手机上的页面效果
第4步：编写“最新课程”栏目的HTML结构与CSS代码。
根据图3-14所示的页面效果，下面开始编写“最新课程”栏目的HTML和CSS代码。
根据需要，使用“<div class="col-sm-6 col-md-3"></div>”实现页面PC、平板计算机与手机上的栅格布局，在平板计算机上呈现2列，在手机上呈现1列，在PC上呈现4列。
基本的结构设计代码如下。
完成“最新课程”栏目的内容，预览效果如图3-17所示。
图3-17 “最新课程”栏目预览效果
3.3.4 案例拓展
另外，还可以给网页添加顶部的logo和底部的版权信息，页面效果如图3-18所示。
图3-18 网站响应式页面效果
a) 平板计算机下网页顶部的logo区域效果 b) 平板计算机底部的footer区域效果
顶部logo区域的HTML结构设计代码如下。
底部footer区域的HTML结构设计代码如下。
两个部分所需的CSS样式文件代码如下。
