《HTML5+CSS3网页制作》课件-模块九 综合实战项目

模块九综合实战项目任务1原生响应式站点布局网页制作CSSHTML首页头部区布局首页正文及版权布局原生响应式站点布局0201列表页布局03项目进度监控04项目心得051.掌握响应式页面的开发

2.掌握CSS3媒体查询的应用原生响应式站点布局学习目标：

1.强化责任意识，使其在开发过程中注重用户体验，培养对学生对社会责任的认识，理解优秀设计对于社会的意义。2.提高团队协作能力，使其在项目实战中，通过小组合作的形式，加强学生的沟通和协作能力，培养团队精神。

3.强化法律意识，在网页图标和字体图标的应用过程中，提醒学生注意版权问题，增强他们的法律意识。原生响应式站点布局思政目标：

首页头部区布局—需求说明1本次任务主要是用HTML5结构化元素、媒体查询、定位、浮动、伪类选择器、无序列表等知识点完成原生响应式站点的首页头部区布局，分为导航栏和主题图片两部分。电脑端的预览效果如下图所示。

2平板端导航栏中的“网站首页”和“招商加盟”被隐藏，预览效果如下图所示。首页头部区布局—需求说明1

2手机端LOGO出现在屏幕顶端，导航栏居下并只显示“公司简介”、“新闻动态”和“产品展厅”3个重要栏目，预览效果如下图所示。首页头部区布局—需求说明1

2首页头部区布局的制作思路为用header元素作为首页头部区容器，里面的导航栏用nav元素做容器，包含用h1元素包裹的LOGO图标和含有七个导航项的ul元素，使用浮动实现左右分布。主题图片用类名为banner的div元素作为容器，里面包含一个img元素作为主题图片。使用媒体查询实现响应式布局。

可以分成五步来完成：首先做好新项目创建的准备工作；其次新建index.html，制作首页头部区的HTML结构代码；接着编写基础CSS代码；随后编写导航栏和主题图片的样式；最后使用媒体查询，实现响应式布局。首页头部区布局—制作思路1

21.新项目创建的准备工作首页头部区布局—制作步骤1

22.

新建index.html，制作首页头部区的HTML结构代码首页头部区布局—制作步骤1

23.编写基础CSS代码首页头部区布局—制作步骤1

24.编写导航栏和主题图片的样式首页头部区布局—制作步骤1

25.使用媒体查询，实现响应式布局首页头部区布局—制作步骤1

首页正文及版权布局—需求说明2本次任务主要是用HTML5结构化元素、媒体查询、定位、浮动、伪类选择器、无序列表等知识点完成原生响应式站点的首页正文及版权布局，分为首页正文和底部导航及版权两部分。电脑端的预览效果如下图所示。

首页正文及版权布局—需求说明2平板端产品系列和新闻动态上下排列且各自占满整屏，产品图片放大显示，预览效果如下图所示。

首页正文及版权布局—需求说明2手机端呈现的排列结果和平板端基本相同，不同之处在于产品图片会缩小，新闻列表文本超出的部分会被截断且用省略号代替，版权区域隐藏了底部导航，直接显示版权内容，预览效果如下图所示。

首页正文及版权布局—制作思路2

首页正文及版权布局的制作思路为用main元素作为首页正文容器，包含应用类名为product的div元素定义产品系列部分，类名为news的div元素定义新闻动态部分，使用浮动实现左右分布。产品系列部分包含用h2元素包裹的两张图片（一张代表“产品系列”的标题，另一张代表“更多”的链接）和含有三个列表项的ul元素，每个列表项是一张产品图片。新闻动态部分包含用h2元素包裹的两张图片（一张代表“新闻动态”的标题，另一张代表“更多”的链接）、用p元素介绍公司的背景信息和列出了三条新闻摘要的ul元素，每条新闻包含一个日期和标题，点击标题会跳转到相应的新闻页面。

底部导航及版权用footer元素作为容器，底部导航用类名为min-bar的div为容器，包含一系列链接，指向关于公司和联系方式的相关页面。版权部分用p元素实现。使用媒体查询实现响应式布局。

可以分成三步来完成：首先制作首页正文及版权的HTML结构代码；其次编写首页正文和底部导航及版权的样式；最后使用媒体查询，实现响应式布局。

首页正文及版权布局—制作过程21.制作首页头部区的HTML结构代码

首页正文及版权布局—制作过程22.编写首页正文和底部导航及版权的样式

首页正文及版权布局—制作过程23．使用媒体查询，实现响应式布局

列表页布局—需求说明3本次任务主要是用代码复用、HTML5结构化元素、媒体查询、定位、浮动、伪类选择器、无序列表、下拉列表等知识点完成原生响应式站点的列表页布局，列表页的头部及版权区与首页是一样的，正文区是不一样的。列表区的正文分为侧边栏、产品搜索和产品列表三部分。电脑端隐藏产品搜索部分，预览效果如右图所示。

列表页布局—需求说明3平板端也隐藏产品搜索部分，并且调整侧边栏和产品列表部分的宽度来适用平板端，预览效果如右图

列表页布局—需求说明3手机端将侧边栏整体隐藏，显示产品搜索部分，同时修改产品列表的宽度，预览效果如右图所示。

列表页布局—制作思路3列表页布局的制作思路为头部及版权区与首页是一样的，直接复用首页的HTML和CSS代码即可。正文区用main元素作为容器，包含用aside元素包裹的侧边栏，应用类名为search-mobile的div元素定义的产品搜索部分和应用类名为product-list的div元素定义的产品列表部分。在电脑端和平板端不显示产品搜索部分，侧边栏和产品列表部分使用浮动实现左右分布。在手机端不显示侧边栏部分，产品搜索部分和产品列表上下排列。侧边栏部分分为产品分类和咨询搜索两部分，上下排列。产品分类用类名为product-category的div元素作为容器，h3元素作为标题，5个列表项的无序列表代表产品分类。咨询搜索部分用类名为search的div元素作为容器，同样h3元素作为标题，包裹在类名为search-items的div元素中的表单实现咨询搜索功能，表单包含两个类型为text和image的input元素。产品搜索部分用类名为search-mobile的div元素作为容器，em元素作为提示信息，包含两个类型为text和image的input元素的表单实现产品搜索功能。产品列表部分包含了应用类名为breadCrumb的div元素实现的面包屑导航、用ul元素表示的产品列表以及应用类名为paging的div元素实现的分页组件。面包屑导航用em元素突出显示提示信息，span元素包含面包屑的具体内容，指示用户当前位置产品列表。产品列表中每个列表项包含产品图片和名称，以及相关的链接。分页组件则使用a元素和select元素来实现页面导航和页码选择的功能。可以分成四步来完成：首先复用首页头部及版权区HTML和CSS代码；其次制作列表页正文部分的HTML结构代码；接着编写列表页正文部分的样式；最后使用媒体查询，实现响应式布局。

列表页布局—制作过程3复用首页头部及版权区2.

制作列表页正文部分的HTML结构代码，预览效果上部分如左图所示，预览效果下部分如右图所示。

列表页布局—制作过程33.

编写列表页正文部分的样式

列表页布局—制作过程34.使用媒体查询，实现响应式布局，在电脑端的预览效果如左图所示，在平板端的预览效果如中图所示，在手机端的预览效果如右图所示。

项目进度监控4任务计划工时实际工时完成进度（百分比）责任人备注首页头部布局

首页正文及版权布局

列表页布局

项目心得5

从收获、问题、解决思路、知识点不足、功能扩展等方面写项目心得。小结首页头部区布局首页正文及版权布局列表页布局项目进度监控、项目心得模块九综合实战项目任务2移动端商城网站布局网页制作CSSHTML知识准备——移动端商城网站布局首页头部移动端商城网站布局0201首页轮播图03首页导航栏04首页正文标题05首页正文内容首页数码产品及标签栏移动端商城网站布局0706商品分类页08购物车09购物车交互功能10商品列表页商品详情页移动端商城网站布局1211商品详情页交互功能13项目进度监控14项目心得151.掌握移动端视口设置、重置浏览器默认样式、网页图标、精灵图、字体图标

2.掌握移动端网站布局的应用

3.掌握浏览器开发者工具的使用移动端商城网站布局学习目标：

1.强化责任意识，使其在开发过程中注重用户体验，培养对学生对社会责任的认识，理解优秀设计对于社会的意义。2.提高团队协作能力，使其在项目实战中，通过小组合作的形式，加强学生的沟通和协作能力，培养团队精神。

3.强化法律意识，在网页图标和字体图标的应用过程中，提醒学生注意版权问题，增强他们的法律意识。移动端商城网站布局思政目标：

知识准备——移动端视口设置1

视口在网页设计与浏览体验中扮演着至关重要的角色，它是浏览器用于展示页面内容的实际屏幕区域，其大小随设备类型的不同而有所差异。

视口分为布局视口、视觉视口和理想视口。

知识准备——移动端视口设置1移动端的视口设置是一项通过在网页文档头部嵌入meta元素来进行精确控制的功能，以适应不同移动设备屏幕尺寸和分辨率的需求。Viewportmeta元素的设置仅适用于移动端浏览器，对传统的PC端浏览器并不起作用。<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>属性名取值描述widthdevice-width或正整数定义视口的宽度，单位为像素，一般为device-width：表示宽度为设备屏幕的宽度heightdevice-width或正整数定义视口的高度，单位为像素，一般不用写initial-scale[0.0-10.0]定义初始缩放值，一般设置为1.0minimum-scale[0.0-10.0]定义放大最大比例，它必须小于或等于maximum-scale设置maximum-scale[0.0-10.0]定义缩小最小比例，它必须大于或等于minimum-scale设置user-scalableyes/no定义是否允许用户手动缩放页面，默认值yesinteractive-widgetresizes-visual、resizes-content或overlays-content指定交互式UI组件（如虚拟键盘）对页面视口的影响

知识准备——移动端视口设置1优化网页内容的布局与尺寸设置，以适应广泛设备的显示需求，成为提升用户体验的关键。以下为几项核心设计原则：（1）避免固定宽度的大尺寸元素（2）实现内容的自适应布局（3）利用CSS媒体查询优化不同屏幕尺寸的体验（4）注意绝对定位元素的尺寸控制

知识准备——重置浏览器默认样式1

重置浏览器默认样式的在英文里被称为CSSReset，主要原因是现在的浏览器很多，并且每个浏览器都有自己的默认样式，这样就会导致一个页面在多个浏览器下显示产生差异，所以我们需要做一些处理使网页在每个浏览器下的显示效果一致。为什么要重置浏览器默认样式

知识准备——重置浏览器默认样式1怎样进行重置浏览器默认样式

每当开始一个新项目，第一步就是应当重置浏览器默认样式，并把它们写到一个CSS文件中去，这个CSS文件没有统一的命名，常见的命名有Normalize.css、reset.css、base.css和style.css。现成的重置浏览器默认样式文件网络上很多，也能很方便地获取大型网站的重置浏览器默认样式文件。直接使用现成的重置浏览器默认样式文件会导致后期各种离奇bug的发生，滥用不如不用，最好还是自己写一个重置浏览器默认样式文件，并且要明白每一个样式都是用来做什么的。

知识准备——重置浏览器默认样式1怎样进行重置浏览器默认样式

升级到了2.0版本，它的重置样式是非常通用的。例如，元素没有任何默认颜色或背景设置。这个自2011年后就没再更新，但也能给我们提供一些思路。

reset.css官方地址：/eric/tools/css/reset/

知识准备——重置浏览器默认样式1怎样进行重置浏览器默认样式移动端CSS初始化推荐使用normalize.css官网地址：http://necolas.github.io/normalize.css保留有用的浏览器默认值，而不是删除它们为更多的HTML元素规范化样式纠正和常见的浏览器不一致的错误通过细微的改进来提高可用性和使用注释和详细的文档解释代码设计目标：

现代的、兼容html5的CSS重置替代方案，是研究团队花了100多个小时深入研究现代浏览器样式之间差异后的作品，被Twitter,GitHub,Bootstrap等许多有名的公司以某种形式使用.可在HTML元素的默认样式中提供更好的跨浏览器一致性。

知识准备——重置浏览器默认样式1几个实用的重置样式

来看一下margin和padding值的重置，以前是这样重置的，现在变成这样的。使用前者可以简单方便的一次性重置所有HTML网页元素的浏览器样式，代码少，控制量大，为什么又换成后者呢？主要原因是这样效率会低很多，因为它重置了所有元素的样式，包括不需要重置的元素。而且通配符，需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大的加重了网站运行的负载，会使网站加载的时候需要很长一段时间。

知识准备——重置浏览器默认样式1几个实用的重置样式

重置浏览器默认样式需要我们不断学习，不断积累，不断总结，才能让它不断优化提升。

知识准备——网页图标1

网页图标是网页设计中不可或缺的元素之一，它们能够通过简洁而富有表现力的方式传达信息和功能，优秀的网页图标不仅可以增加页面的视觉吸引力，还可以提升用户体验和导航效果。

实现网页图标主要采用三种技术手段：图片图标、CSS精灵图以及字体图标。1

将一个图标制作成一张小图片，再将若干小图片保存在站点文件夹中，通过img元素或background背景属性引入到网页。知识准备——网页图标1图片图标1缺点：

加大HTTP的请求次数，增加服务器的响应时间。

在移动端使用，还要考虑2倍屏、3倍屏问题。

放大时会失真，影响浏览感受。

传统的图片图标虽然有很好的兼容性，但是弊端较多，不适宜广泛使用。1知识准备——网页图标1图片图标1Fatkun图片批量下载工具知识准备——网页图标1图片图标1浏览器开发者工具知识准备——网页图标1图片图标2将网页中众多小图标合并到一张大图上，利用CSS的背景定位（`background-position`）特性，精准选取并展示所需图标部分，以此克服传统图片方式存在的性能瓶颈。优势：

（1）减少HTTP请求。（2）优化带宽使用。局限：

（1）精确定位要求高。

（2）文件体积问题。（3）图像质量损失。（4）维护难度。知识准备——网页图标1精灵图2Fatkun图片批量下载工具知识准备——网页图标1精灵图2浏览器开发者工具知识准备——网页图标1精灵图

展示的是图标，本质属于字体。优势：

（1）基于矢量特性的字体图标，能够任意缩放而不损失画质。

（2）可以很随意的改变颜色、产生阴影、透明效果、旋转等。

（3）字体文件的体积很小，服务器的响应时间更为快速。

（4）字体图标展现了卓越的跨平台兼容能力，广泛适用于各类浏览器用。注意事项：

字体图标不能替代精灵图，它只是对工作中图标部分技术的提升和优化。

如果遇到一些结构和样式比较简单的小图标，就用字体图标。

如果遇到一些结构和样式复杂一点的小图片，就用精灵图。知识准备——网页图标1字体图标3Fatkun图片批量下载工具知识准备——网页图标1字体图标3浏览器开发者工具知识准备——网页图标1字体图标1background属性精灵图的原理知识准备——精灵图11值说明CSSbackground-color指定要使用的背景颜色1background-position指定背景图像的位置1background-size指定背景图片的大小3background-repeat指定如何重复背景图像1background-origin指定背景图像的定位区域3background-clip指定背景图像的绘画区域3background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。1background-image指定要使用的一个或多个背景图像1精灵图的原理知识准备——精灵图11精灵图的原理知识准备——精灵图11精灵图的原理知识准备——精灵图12通过图像处理软件：通过前端打包工具：通过在线生成工具：如何制作精灵图知识准备——精灵图12如何制作精灵图知识准备——精灵图13<body>

<ul>

<li>

<div>

<h5></h5>

<p>品类齐全，轻松购物</p>

</div>

</li>

<li>

<div>

<h5></h5>

<p>多仓直发，极速配送</p>

</div>

</li>

<li>

<div>

<h5></h5>

<p>正品行货，精致服务</p>

</div>

</li>

<li>

<div>

<h5></h5>

<p>天天低价，畅选无忧</p>

</div>

</li>

</ul></body>第一步：用HTML构建出来基本结构如何使用精灵图知识准备——精灵图13第二步：添加基本CSS样式如何使用精灵图知识准备——精灵图13第二步：添加基本CSS样式如何使用精灵图知识准备——精灵图13第三步：运用背景属性把精灵图中的图标正确显示如何使用精灵图知识准备——精灵图13第三步：运用背景属性把精灵图中的图标正确显示如何使用精灵图知识准备——精灵图11推荐网站：

Icomoon字库http://icomoon.io

阿里iconfont字库/阿里妈妈MUX倾力打造的矢量图标管理、交流平台。

设计师将图标上传到iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。IcoMoon成立于2011年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。知识准备——字体图标的生成1账户与项目创建1创建账号并登录到Iconfont-阿里巴巴矢量图标库知识准备——字体图标的生成1账户与项目创建1从首页上的“资源管理”菜单中选择“我的项目”菜单项进入我的项目页面，在该页面的右侧，单击紫蓝色的“新建图标库”按钮。创建项目知识准备——字体图标的生成1账户与项目创建1在出现的新建项目对话框中填写相应信息，在这里需要注意的是字体格式的选择，根据前端项目的需要勾选需要的字体格式，单击“新建”按钮就可以实现新建一个项目，新建的项目如图所示。创建项目账户与项目创建知识准备——字体图标的生成12Iconfont网站已有2774多万个图标，其数量还在不断增加，根据需要可以从已有的图标中选取。导航至Iconfont的“素材库”，选择“图标库”，进入到图标库页面，图标库分为：“所有图标库”、“官方图标库”、“多色图标库”和“单色图标库”。选取或自制图标并加至购物车知识准备——字体图标的生成1选取或自制图标并加至购物车知识准备——字体图标的生成12在图标库页面右上部的“搜索”框内输入“教育”关键字，可以快速找到和关键字教育相关的图标。选取或自制图标并加至购物车知识准备——字体图标的生成12

把鼠标移到要选择的图标上，在弹出的菜单中单击”添加入库“菜单项，就把选择的图标添加到购物车了。选取或自制图标并加至购物车知识准备——字体图标的生成12SVG格式的图标设计师直接保存其他格式的图片选取或自制图标并加至购物车知识准备——字体图标的生成1选取或自制图标并加至购物车知识准备——字体图标的生成1如果在Iconfont网站上找不到需要的字体图标，就需要自制字体图标了。2Convertiohttps://convertio.co/zh/—文件转换器选取或自制图标并加至购物车知识准备——字体图标的生成12把学院BMP格式的logo转换成SVG格式BMP格式SVG格式Convertio选取或自制图标并加至购物车知识准备——字体图标的生成12

单击网站中间的“选择文件”按钮，在弹出的“打开”对话框中选择学院的logo，并单击打开按钮。选取或自制图标并加至购物车知识准备——字体图标的生成12

上传成功后再在页面中选择要转换的格式“SVG”，然后单击“转换”按钮。选取或自制图标并加至购物车知识准备——字体图标的生成1

转换完成后，单击右侧的“下载”按钮就完成了学院bmp格式的logo转换成SVG格式了。选取或自制图标并加至购物车知识准备——字体图标的生成1

用账号登录Iconfont网站，单击右上角的“上传”图标进入上传页面。在上传图标页面将图标SVG文件拖拽至框内上传或单击“上传图标”按钮，选择并上传生成的SVG格式的学院logo。选取或自制图标并加至购物车知识准备——字体图标的生成1

上传完成后，填写名称、标签，单击“去除颜色并提交”或“保留颜色并提交”按钮，静等网站审核。选取或自制图标并加至购物车知识准备——字体图标的生成1

审核通过后，单击“资源管理”菜单中的“我的图标”菜单项，在“我上传的图标”页面找到上传成功的图标，把鼠标移到该图标上，在弹出的菜单中单击”添加入库“菜单项，就把图标添加到购物车了。选取或自制图标并加至购物车知识准备——字体图标的生成1

单击网页右上角的“购物车”图标，导航到购物车页面，购物车里有自己创建的图标和从库里选择的图标。单击下面的“添加至项目”按钮，选择加入的项目“test”,单击“确定”按钮就把购物车中的图标添加到了项目中并跳转到“我的项目”页面。选取或自制图标并加至购物车知识准备——字体图标的生成1

通过单击“资源管理”菜单中的“我的项目”也能快速切换到“我的项目”页面。在我的项目页面，单击“下载至本地”按钮，就可以把项目中的字体图标下载到本地。选取或自制图标并加至购物车知识准备——字体图标的生成111

解压缩从iconfont网站下载至本地的压缩文件后，会得到一个如图所示的文件夹，里面很多文件，文件类型也不尽相同，要想搞明白这些文件的作用，我们先认识一下字体格式。字体图标压缩包中文件的简介知识准备——字体图标的应用11

对于已经创建的项目，可以通过单击“我的项目”页面上“项目设置”按钮，在弹出的“项目设置”对话框中重新选取字体格式。字体图标压缩包中文件的简介知识准备——字体图标的应用11

细心的同学会发现，如果我们先选择了彩色，那么WOFF2和TTF会自动勾选上，同时EOT和SVG变成不可选状态，此时WOFF和SVG都是可选状态。字体图标压缩包中文件的简介知识准备——字体图标的应用11

如果单独选择彩色去保存时，会提示“请再选择一种字体格式”

。字体图标压缩包中文件的简介知识准备——字体图标的应用11

为搞清楚这些字体格式与压缩包中文件的关系，我进行了多次项目设置，选取不同的字体格式，然后重新单击“下载至本地”按钮。通过比较分析文件个数、类型和文件名，查看压缩包中iconfont.css文件的内容并去运行生成的demo_index网页文件。字体图标压缩包中文件的简介知识准备——字体图标的应用11字体格式与所生成文件的对应关系：字体格式所生成文件名字WOFF2iconfont.woff2WOFFiconfont.woffTTFiconfont.ttfEOTiconfont.eotSVGiconfont.svg字体图标压缩包中文件的简介知识准备——字体图标的应用11

选中Base64时不会生成单独的文件，Base64会对同时选择的WOFF2、WOFF和TTF字体加密，加密时只能加密一个，优先级顺序从高到低为WOFF2、WOFF和TTF，也就是说TTF只有在没有WOFF2和WOFF时才能被加密，Base64的体现形式在iconfont.css文件中，如图所示，

这是删除很多中间内容后的，从头和尾部信息我们可以看出，这是对WOFF2字体格式进行加密的，需要注意的时Base64不支持对SVG和EOT加密。字体图标压缩包中文件的简介知识准备——字体图标的应用11

彩色字体格式也没对应的单独文件，它的主要作用是在三种应用字体图标的方式下都能显示多色图标。

如果不选择WOFF2、WOFF和TTF中的任意一个，在Unicode引用和font-class引用方式下，字体图标不能正常显示。字体图标压缩包中文件的简介知识准备——字体图标的应用12

字体图标应用的三种方式，这三种方式是Unicode引用、font-class引用和Symbol引用。

在应用三种方式之前，先在前端项目中建两个文件夹，CSS文件夹和js文件夹，把压缩包中的iconfont.css文件拷贝到CSS文件夹，把iconfont.js文件拷贝到js文件夹，只需要这两个文件我们就能正确应用字体图标了。iconfont.css文件用来支持Unicode引用和font-class引用，iconfont.js文件用来支持Symbol引用。字体图标应用的三种方式知识准备——字体图标的应用1知识准备——字体图标的应用12

然后在网页文件的head中，正确引入iconfont.css文件和iconfont.js文件，代码如图所示。<link

rel="stylesheet"

href="css/iconfont.css"><script

src="js/iconfont.js"></script>字体图标应用的三种方式知识准备——字体图标的应用12

Unicode引用方式只需挑选相应图标并获取字体编码，在项目需要使用图标的位置添加诸如i，span等类似的标签，为标签添加类名iconfont，标签内容为字体编码。<span

class="iconfont"></span>

font-class引用方式只需挑选相应图标并获取类名，在项目需要使用图标的位置添加诸如i，span等类似的标签，为标签添加两个类名。一个固定的是iconfont，另一个是要使用图标对应的类名。<span

class="iconfonticon-hbzylogo"></span><svg

class="icon"

aria-hidden="true">

<use

xlink:href="#icon-education-1-copy

"></use>

</svg>

Symbol引用方式挑选相应图标并获取类名，应用于页面。字体图标应用的三种方式知识准备——字体图标的应用13

应用实例是在基于选择了WOFF2、WOFF、TTF、EOT、SVG和Base64字体格式的基础上下载的图标字体库，解压缩后的文件夹如图所示。在iconfont.css文件中，WOFF2字体格式用Base64进行了加密。字体图标应用的实例知识准备——字体图标的应用13

字体图标库里添加了三个字体图标，一个是单色图标、一个多色图标，这两个都是从网站图标库选择的，另一个是自建图标。实例通过表格的形式对这三个字体图标进行了比较。在默认情况下，对应的HTML代码和运行结果如图所示。字体图标应用的实例知识准备——字体图标的应用13

新增一个类选择器jianbian,并应用到这九个字体图标上，运行结果如图所示，类选择器jianbian的渐变色和64像素字体大小效果在Unicode引用和font-class引用方式下起到了效果，而Symbol引用方式下的单个字体图标显示效果不受影响。字体图标应用的实例知识准备——字体图标的应用13

然后，再新增一个类选择器color,去替换jianbian应用到这九个字体图标上，运行结果如图所示，类选择器color的红色和64像素字体大小效果在Unicode引用和font-class引用方式下起到了效果，而Symbol引用方式下的字体图标显示效果不受影响。字体图标应用的实例知识准备——字体图标的应用13

最后，再新增一个类选择器shadow,去替换color应用到这九个字体图标上，运行结果如图所示，类选择器shadow的阴影和64像素字体大小效果在Unicode引用和font-class引用方式下起到了效果，而Symbol引用方式下的字体图标显示效果不受影响。字体图标应用的实例知识准备——字体图标的应用13

通过刚才的实例，可以看到，Unicode引用和font-class引用方式下的字体图标可以轻松地像字体一样去应用CSS改变样式，Symbol引用方式下的字体图标不能直接应用CSS改变样式，但也支持应用CSS改变样式，如图所示，

不过有点复杂，有兴趣的同学可以自己去探究一下。字体图标应用的实例知识准备——字体图标的应用11本次任务主要是利用流式布局、精灵图、重置浏览器默认样式和移动端视口设置等知识点完成移动端商城首页头部的制作，预览效果如图所示，第一个图是在iPhonese下的显示效果，第二个图是在NokiaN9下的显示效果。要求能适应不同尺寸的移动端。首页头部—需求说明22

首页头部的制作思路为首先做好新项目创建的准备工作；其次在项目中新建首页index.html，并在文件头部设置meta标签中的视口“viewport”，用于适配移动端；接着在项目中CSS文件夹中新建reset.css文件，并写入用于重置浏览器默认值的相关CSS代码。最后制作首页头部，整个头部区采用固定定位方式将头部固定在页面顶部。头部区左侧容器为logo，搜索模块居中，右侧为用户登录区域，搜索模块会随着移动设备的宽度不同而发生变化，两端的模块不发生变化。首页头部—制作思路231.新项目创建的准备工作

在计算机中建立项目文件夹及常用的css、js和images三个文件夹，并把图片资源放到images中，然后在VSCode中导入项目。首页头部—制作过程23

2.新建首页并适配移动端

在项目中新建首页index.html，并在文件头部设置meta标签中的视口“viewport”，用于适配移动端。首页头部—制作过程233.重置浏览器默认值

在项目中CSS文件夹中新建reset.css文件，并写入用于重置浏览器默认值的相关CSS代码。首页头部—制作过程234.制作首页头部

整个头部区采用固定定位方式将头部固定在页面顶部。头部区左侧容器为logo，搜索模块居中，右侧为用户登录区域，根据运行效果图可以知道，搜索模块会随着移动设备的宽度不同而发生变化，两端的模块不发生变化。首页头部—制作过程23

在index.html文件的body中创建首页头部的HTML结构如图所示。保存后运行效果如图所示。首页头部—制作过程23

在CSS文件夹中创建样式文件index.css，并在index.html文件的head中添加对index.css和reset.css两个文件的链入。首页头部—制作过程23

打开index.css文件，依次编写样式，现在移动端大部分是根据iPhone6的参数来进行设计的，它的物理分辨率为750乘以1134，逻辑分辨率为375乘以480，也是它的开发尺寸，DPR为2。所以设计师设计出来的设计图宽度为750px，这就是我们把max-width的值设置为750px的原因。首页头部—制作过程23

头部的三个图标都来源于一张750乘以920的精灵图，它就是一个二倍图。根据测量精灵图的数据去设计模块的宽和高，位置信息将用于定位，在这里需要注意，测得的数据都要除以2。首页头部—制作过程23

在这里我们采用流式布局进行设计，头部区左侧容器为logo，搜索模块居中，右侧为用户登录区域，两头根据精灵图的测量数据固定大小，中间部分根据适配设备的宽度减去两端的宽度及适当间距后确定。最后整个头部区采用固定定位方式将头部固定在页面顶部。根据这些信息不难写出头部的基础样式，如图所示：首页头部—制作过程23

这里需要解释的是：由于精灵图里面的图标在项目中大量使用，每次都使用精灵图中的图标都需要四行代码，并且三行都是一样的，出于代码优化的考虑，我们用到了属性选择器，下面的类选择器icon-logo和icon-login的编写就能很好体现出来这种用法的优势。中间的搜索模块的图片是通过伪元素before实现的，伪元素是个行内元素，设置绝对定位后，就能设置宽和高并悬浮在原来的位置上面，后面的元素占据了它的原来位置，这是中间模块背景图的实现原理。在这里，伪元素无法复用属性选择器中的代码，只能把完整的四句都写出来。首页头部—制作过程23

把这些样式应用到元素后，运行结果如图所示。首页头部—制作过程23

在这基础上，设置左模块和中间模块左浮动，右模块右浮动，运行效果如图：

我们发现中间部分的宽度和我们预想的不一样，我们给input新增样式如图样式。首页头部—制作过程23

运行结果就和预期效果很接近了：首页头部—制作过程23

只需通过增加padding和margin属性，并调整其值就可以了。固定定位是通过给header选择器新增固定定位和left和right偏移量实现的；我们去测试超链接的时候，发现超链接实现不了，通过开发者工具可以看到，a的尺寸是0*0,原因是a是行内元素，里面没内容，它就没大小。首页头部—制作过程23

可以通过把a元素设置成块元素，这样它会和父元素的宽度一样，再设置height值为100%，这样它就占据父元素的整个空间。完成这些功能后的完整CSS代码如图：首页头部—制作过程23

保存后运行就实现了我们的预期目标。首页头部—制作过程23

本次任务主要是利用弹性布局、animation和margin-left取负值等知识点完成移动端商城轮播图的制作，轮播图由三张图循环轮流播放，在下一周期反向播放。预览效果如图所示，分别是第一幅图、第二幅图和第三幅图的显示效果。首页轮播图—需求说明2

主要思路是用一个div作为容器，里面用img元素放置要轮播的图片，把div的display属性设置为flex后，三张图片就像拼接在一起一样，如图所示，然后制作关键帧，关键帧里面通过修改margin-left的值来实现轮播，最后给该div添加animation属性，就完成了轮播图的制作。3首页轮播图—制作思路2可以分成四步来完成：首先制作轮播图的HTML结构代码；其次编写基础CSS代码；接着应用弹性布局。最后编写关键帧并实现动画。3首页轮播图—制作思路3

1.制作轮播图的HTML结构代码整个首页分成五个大的模块，从上到下依次是头部、轮播图、导航栏、正文和标签栏。头部和标签栏分别固定在页面的头部和尾部。轮播图、导航栏和正文这三个模块整体放在一个类名为container的div中，每一部分再用一个div进行布局。轮播图用类名为carousel的div进行布局。轮播图div中再放置一个类名为banner-box且包含三个img元素的div。3首页轮播图—制作过程32.编写基础的CSS代码第1步中图的上部被首页头部遮盖了一部分，主要原因是首页头部是固定定位，可以通过给类名为container的div设置首页头部高度的上内边距解决。给类选择器container添加最大宽度、水平居中、上内边距，给类选择器banner-box添加width值为100%，就可以解决轮播图被遮盖问题。3首页轮播图—制作过程3保存后运行效果如图：3首页轮播图—制作过程33.应用弹性布局在类选择器banner-box中新增display属性，并设置值为flex。类名为banner-box的div的布局就改成了弹性布局，在电脑端的运行效果如下图所示。3首页轮播图—制作过程34.编写关键帧并实现动画根据需求编写关键帧，并通过给类选择器banner-box添加animation属性实现动画。CSS代码如图所示：3首页轮播图—制作过程3

保存后的运行结构在移动端没上面问题，切换到电脑端如图所示。3首页轮播图—制作过程3

通过给类选择器carousel添加overflow属性并设值为hidden，让盒子外的内容不可见。3首页轮播图—制作过程3再次运行，发现电脑端和移动端都能正确实现了。3首页轮播图—制作过程1

本次任务主要是利用流式布局、精灵图和无序列表等知识点完成移动端商城导航栏的制作，导航栏中的四个导航项在导航栏中均匀分布，并要求能自适应不同尺寸的移动端设备。预览效果如图所示，第一个图是在iPhone6下的显示效果，第二个图是在NokiaN9下的显示效果。4首页导航栏—需求说明2首页导航栏的制作思路为用一个nav元素作为容器，里面用ul元素的四个列表项放置每个导航项，每个li元素用精灵图中的图标作为背景，li元素中内嵌一个a元素作为导航。每个导航项的背景图在上，文字在下效果是通过给a元素设置上内边距来实现的，上内边距是根据精灵图中图标的高度设置的。每个li元素的宽度根据精灵图中图标的大小设置，高度是由a元素内容的默认高度和上内边距决定的。然后使用百分比设置li元素的外边距，使其达到自适应的效果。

可以分成四步来完成：首先制作导航栏的HTML结构代码；其次编写基础CSS代码；接着通过精灵图技术添加背景；最后设置外边距，达到自适应效果。4首页导航栏—制作思路3

1.制作导航栏的HTML结构代码在类名为container的div中，轮播图的下面添加一个nav元素，nav元素中添加一个包含四个列表项的无序列表，每个列表项事先应用上以icon开头的类名，为添加背景做准备，每个列表项都包含一个a元素，代码如下：4首页导航栏—制作过程3

保存运行后的效果图为:

第一眼看到这个运行结果肯定很多人会疑惑，我想疑惑点有两个，一个是li元素是块元素，怎么四个列表项都显示到一行了；另一个是怎么已经有背景图片了。主要原因是我们给每个li元素添加了以icon开头的类名，在首页头部制作中编写的属性选择器中已经设置了display属性，并设置其值为inline-block。4首页导航栏—制作过程32.编写基础的CSS代码以第一个图标为例，用画图工具查看精灵图中所需图标的大小信息，如图所示。

第一个图标的大小信息为91乘以92像素，可以得到我们制作的图标宽度和高度都是46像素。4首页导航栏—制作过程3

结合刚才的制作思路，我们编写出如图所示的的基础CSS代码。

在nav选择器中，导航栏的背景是白色，内容水平居中，设置上下内边距为5px。由于a元素是行内元素，如果想设置上内边距属性，需要同时设置成块元素。4首页导航栏—制作过程3保存后运行效果如图：4首页导航栏—制作过程33.通过精灵图技术添加背景以第一个图标为例，用画图工具查看精灵图中所需图标的位置信息，如图所示。

第一个图标的位置坐标为49，230，可得到位置值为-25px

-115px，同理可以得到其他三个图标的的位置值。4首页导航栏—制作过程3

在index.css文件中添加如图所示的四个类选择器，用来添加背景图标。4首页导航栏—制作过程3保存后运行效果如图：4首页导航栏—制作过程34.设置外边距为达到自适应效果，以总宽度为375像素为例，来算一下外间距取的百分比，四个图片的自身宽度为46乘以4为184，总宽度减去184后还剩191，以能分配的宽度为50%为例，四个图标水平方向上8个外边距，平均下来6.2%左右。再结合要适应各种移动端设备，需要取一个比6.2%小的值。这里用5%去测试一下，给navli选择器新增个margin属性，让上下方向为0，左右为5%，CSS代码如下：4首页导航栏—制作过程3

保存后运行，并在不同移动端设备上测试一下，这是在iphone6上的效果：4首页导航栏—制作过程3

这是在在NokiaN9下的运行效果。4首页导航栏—制作过程1

本次任务主要是利用float布局、精灵图和行内元素等知识点完成移动端商城首页栏目标题的制作，由左右两部分组成，左面部分用精灵图中的图标做背景，右边为一个超链接。并要求能自适应不同尺寸的移动端设备。预览效果如图所示。5首页正文标题—需求说明2首页正文标题的制作思路为用一个类名为products的div元素作为容器，里面嵌套一个类名为hd的div,同时也作为后面要制作的栏目内容的容器。在类名为hd的div中添加两个行内元素em和a,区别于首页头部的块元素布局，用行内元素实现布局。通过给a元素设置右浮动属性使其达到自适应的效果。可以分成四步来完成：首先制作首页正文栏目标题的HTML结构代码；其次编写基础CSS代码；接着通过精灵图技术添加背景；最后设置浮动，达到自适应效果。5首页正文标题—制作思路31.制作首页正文标题的HTML结构代码在类名为container的div中，导航栏部分的下面添加一个类名为products的div元素，在该div中添加一个包含em元素和a元素的类名为hd的div，并给em元素应用类选择器icon-book，代码如下：5首页正文标题—制作过程3

保存运行后的效果图为:5首页正文标题—制作过程32.编写基础的CSS代码用画图工具查看精灵图中所需图标的大小信息，并结合图标在标题栏中的位置关系，由于这一部分左右两部分都有文字，可以通过行高属性控制标题栏的高度。编写的基础CSS代码如下：5首页正文标题—制作过程3保存后运行效果如图：5首页正文标题—制作过程33.通过精灵图技术添加背景利用精灵图技术，添加类选择器icon-book，用来添加背景图标，代码如下：5首页正文标题—制作过程3保存后运行效果如图：5首页正文标题—制作过程34.设置浮动，达到自适应效果背景图片和标题重叠，可以通过给em元素添加左内边距解决。然后给a元素添加右浮动属性，CSS代码如下：5首页正文标题—制作过程3

保存后运行，并在不同移动端设备上测试一下，这是在iphone6上的效果：5首页正文标题—制作过程3

这是在在NokiaN9下的运行效果。5首页正文标题—制作过程通过这个例子，主要收获是，用两个行内元素实现标题栏的左右两部分，左边的em元素是通过display属性取值为inline-block变成行内块元素的；右边的a元素是通过float属性脱离源文档流的位置并变成行内块元素了。读者也可以用首页头部制作的思路来实现这个模块。5首页正文标题—制作过程1

本次任务主要是利用弹性布局和伪类选择器等知识点完成移动端商城首页正文栏目内容的制作，由左右两部分组成，左面又分成上下两部分，上面是一个图片超链接，下面又分成左右两部分，也都是图片超链接。整个模块的右边也是个图片超链接。并要求能自适应不同尺寸的移动端设备。预览效果如图所示。6首页正文内容—需求说明2首页正文栏目内容的制作思路为在类名为products的div元素里的正文栏目标题代码的下面，创建一个类名为book-list的div,再在类名为book-list的div中创建两个div,一个是类名为left-list，用于栏目内容的左部布局，一个是类名为right-list，用于栏目内容的右部布局。左部上半部分内创建一个图片超链接，下半部内创建一个类名为book的span元素，span元素里面再创建两个图片超链接；右部是一个整体，里面创建一个图片超链接。整体的左右两部分和左部下面的两部分都用弹性布局达到自适应的效果。可以分成三步来完成：首先制作首页正文栏目内容的HTML结构代码；其次进行弹性布局，达到自适应效果；最后添加边框线，调整图片内边距实现预期效果。6首页正文内容—制作思路31.制作首页正文栏目内容的HTML结构代码在类名为products的div中，根据制作思路分析编写HTML结构代码，代码如下：6首页正文内容—制作过程3

保存运行后的效果图为:6首页正文内容—制作过程32.进行弹性布局，达到自适应效果首页正文内容的重点是布局，在布局好了的基础上，才能进一步美化，左右部分的实现是通过把类名为book-list的div设置成弹性容器，左右两部分所在的div就是弹性项，给弹性项设置flex属性可以调整这两部分的宽度比例。同理把类名为book的span设置为弹性容器，里面的两个a元素就是弹性项，也通过flex属性调整宽度比例。在这里，需要知道的是块元素和行内元素都能作为弹性容器或弹性项。编写出的弹性布局代码如下：6首页正文内容—制作过程3保存后运行效果如图：

从运行效果看，简单的两个弹性布局，整体效果就已经很接近了，剩下的就是调整间距和设置分割线了。6首页正文内容—制作过程33.添加边框线，调整图片内边距实现预期效果灵活使用内边距属性、图片的width属性、边框属性来实现和预期一样的效果。编写的CSS代码如下：6首页正文内容—制作过程3

保存后运行，并在不同移动端设备上测试一下，这是在iphone6上的效果：6首页正文内容—制作过程1

本次任务主要是利用弹性布局、浮动定位、精灵图和伪类选择器等知识点完成移动端商城首页数码产品及标签栏的制作，分为数码产品、底部段落文本和标签栏三部分，标签栏上的“首页”栏目为激活状态，鼠标经过、悬停到某个栏目上时，栏目的标签栏文本颜色发生变化，标签栏固定在整个页面底部。并要求能自适应不同尺寸的移动端设备。预览效果如图所示。7首页数码产品及标签栏—需求说明2首页数码产品及标签栏的制作思路为“数码产品”栏目的布局方法与“书籍资料”栏目的布局方法相同。底部标签栏可以参考导航栏的布局方法，固定到底部可以参考首页头部的实现方式。底部段落文本的制作比较简单，用p元素加简单样式即可。需要注意的是，标签栏中的“首页”栏目需要添加激活状态、鼠标悬停或经过样式。

分成三步来完成：首先是“数码产品”栏目的制作；其次是底部段落文本的制作；最后是标签栏的制作。7首页数码产品及标签栏—制作思路31.数码产品的制作数码产品和书籍资料的制作基本一样，但是数码产品右部上下两部分的实现方式和书籍资料左部上下两部分的实现方式不一样。虽说它们的上下两部分都是用行内元素span或a布局的，但是书籍资料左部上下两部分是通过给下面的span元素设置成弹性容器来实现的，而数码产品右部上下两部分是通过把下面的a元素设置成块元素来保证上下两部分不会出问题的。7首页数码产品及标签栏—制作过程3爱钻研的读者把设置成块元素的那行代码在开发者工具中勾选掉后，也没见布局发生变化，如图所示。7首页数码产品及标签栏—制作过程3为这位读者的主动探索和思考的精神而鼓掌，这位读者的观察没问题，其原因是所用的图片素材尺寸比较大。在这位读者所做工作的基础上，在iPhone6/7/8模拟设备下观察把img元素的width属性值一直调小，当调整到88像素后，本来上下布局的两张图片就变成了左右布局，如图所示。主要原因是图片太大时，它足以占据一行，当选用的图片的宽度不大或切换到大宽度的移动设备上时，布局就发生了改变。7首页数码产品及标签栏—制作过程3

它所对应的代码如图所示。

真正理解了背后的原理，我们换成去把上面的部分设置成块元素，效果是一样的，参考代码如图所示。存运行后的效果图为:7首页数码产品及标签栏—制作过程32.底部段落文本的制作底部段落文本制作过程比较简单，对应的HTML结构代码如下：所对应的CSS代码如图所示。7首页数码产品及标签栏—制作过程33.标签栏的制作标签栏和导航栏的制作基本是一样的，标签栏比导航栏多了个激活状态、鼠标悬浮或经过时的状态和固定到整个页面底部。这三个不一样的地方实现起来也很简单。激活状态是通过给标签栏中的每个标签项都同时编写了两个类选择器，一个是激活状态下的类选择器，一个是普通状态下的类选择器，再根据需要在HTML结构代码中应用不同的类选择器；以标签栏中第一个标签项为例，对应的CSS代码如下：7首页数码产品及标签栏—制作过程3

鼠标经过或悬停在每个标签项上时，标签项的文本字体颜色不一样的实现也很简单，是通过超链接伪类实现的。所对应的CSS代码图所示。7首页数码产品及标签栏—制作过程3

标签栏始终固定到整个页面底部的制作是通过把标签栏的定位模式设置成固定定位，并通过设置bottom、left和right这三个边偏移属性的值来实现的，所对应的CSS代码图所示。7首页数码产品及标签栏—制作过程1

本次任务主要是利用代码复用、浮动定位、流式布局、精灵图和伪类选择器等知识点完成移动端商城商品分类页的制作，分为头部导航栏、正文商品和品牌列表和底部标签栏三部分，预览效果如图所示。8商品分类页—需求说明2商品分类页的制作思路为复用首页的部分代码，实现商品分类页的制作。

可分成三步来完成：首先与首页共用reset.css文件及底部标签栏；其次采用浮动定位方式布局头部导航栏；最后采用流式布局布局正文商品和品牌列表。8商品分类页—制作思路31.与首页共用reset.css文件及底部标签栏将index.html页面另存为category.html;在category.html文件中保留head元素区代码并将引入的index.css修改为category.css，将header元素和.container容器内的所有代码删掉，将footer元素栏中的”首页”列表项的类选择器改为“icon-home”，“分类”列表项的类选择器改为“icon-category-active”，编写的HTML结构代码如下：8商品分类页—制作过程3在category.css样式表文件中，保留精灵图的共用属性选择器、8商品分类页—制作过程3在category.css样式表文件中，保留精灵图的共用属性选择器、底部标签栏CSS代码、8商品分类页—制作过程3在category.css样式表文件中，保留精灵图的共用属性选择器、底部标签栏CSS代码、header选择器和.container类选择器，8商品分类页—制作过程3在category.css样式表文件中，保留精灵图的共用属性选择器、底部标签栏CSS代码、header选择器和.container类选择器，要把标签栏的文本激活样式从“首页”项修改成“分类”项，只需把伪类选择器:first-child修改为：nth-child(2)就可以了，8商品分类页—制作过程3在category.css样式表文件中，保留精灵图的共用属性选择器、底部标签栏CSS代码、header选择器和.container类选择器，要把标签栏的文本激活样式从“首页”项修改成“分类”项，只需把伪类选择器:first-child修改为：nth-child(2)就可以了，对应的CSS代码如图所示，第一步完成后的运行效果如图所示。8商品分类页—制作过程32.采用浮动定位方式布局头部导航栏头部导航栏左侧为右箭头图标超链接，中间为页面标题，右侧为搜索图标及“找品牌”超链接。与首页头部使用块元素进行布局不同，商品分类页头部导航栏使用三个行内元素来实现布局，在header元素内用两个span元素布局头部导航栏的左右两部分，它们的图标是使用来自精灵图的背景图像实现的；中间部分用em元素来布局。编写的HTML结构代码如下：<spanclass="icon-backback"><ahref="index.html"></a></span><em>分类</em><spanclass="icon-sbsearch-brand"><ahref="#">找品牌</a></span>结合精灵图的知识很容易编制出CSS代码如下：.icon-back{background-position:-160px-5px;}.icon-sb{background-position:-187px-6px;}

保存并浏览网页，效果如图所示。与目标预期效果差别较大。

8商品分类页—制作过程3

（1）解决左侧部分的问题左侧部分显示不出来的原因是元素a内没内容，可以通过把a元素设置为块元素，同时把右箭头图标的宽高作为a元素的宽高，对应的CSS代码如下：.backa{display:block;width:12px;height:25px;}保存后再次查看运行效果，发现右箭头图标出现了，并且能够实现导航到首页，效果如图所示。

再通过给span元素设置左浮动、上和左外边距，上外边距的值等于头部导航栏的高度减去子元素a的高度后的一半。对应的CSS代码如下：header.back{float:left;margin-left:10px;margin-top:13px;}保存后再次查看运行效果，发现左侧部分的目标效果已经实现，如图所示。

8商品分类页—制作过程3

（2）解决右侧部分的问题通过设置右浮动、修改背景图像在垂直方向上的位置、设置左内边距、右外边距来实现右侧部分的目标效果，背景图像在垂直方向上的位置的改变量等于头部导航栏的高度减去搜索图标高度后的一半，左内边距的值主要是由搜索图标宽度决定的，对应的CSS代码如下：.icon-sb{background-position:-187px8px;}header.search-brand{float:right;padding-left:20px;margin-right:10px;}保存后再次查看运行效果，发现右侧部分的目标效果已经实现，如图所示。

8商品分类页—制作过程3

（3）实现页面标题居中在父元素header是固定定位的基础上，给em元素设置成绝对定位、top、left、bottom、right都设置为0，margin设置为auto，设置成绝对定位的行内元素通过设置宽高属性就能实现在父元素中的垂直水平居中。本例中由于父元素header设置了行高和自身高度一样，top、bottom和hei