5.3 案例：使用CSS模块化开发网页

（1）案例前提

掌握CSS模块化开发技术、了解CSS架构模式和CSS模块化方案。

（2）案例目标

使用CSS模块化开发实现一个简单的网页案例。

（3）案例实现

① 在项目文件通过“npm install -g sass”命令来进行全局安装scss文件。

② 在项目文件夹中新建“index.html”，作为网站首页，示例代码如下：

③ 在项目文件夹中新建“css”文件夹，在该文件夹下新建“index.css”和“style.scss”，作为项目样式文件，示例代码如下：

实现的效果图如图5-3-1所示：

创作说明

名称：编程指南-CSS案例开发从学到用完美实践

版本：2024年

网站：http://www.51xueweb.cn

撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆

指导审核：阮晓龙