# Web编程实践 **Repository Path**: renyiying/web-programming-shi-jian ## Basic Information - **Project Name**: Web编程实践 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-04-19 - **Last Updated**: 2026-04-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # CSS框架基础实践 - 商品展示 2022年10月23日 ## 1. 项目分析 ​ 商品展示网站以大众时尚为经营理念，以快捷、实惠、潮流为市场定位，让时尚走进消费者身边。使用 Bootstrap 框架完成本网站响应式首页 index.html 的开发（示例中的基础素材都给大家提供）。 ### 1.1 项目展示 ​ 本项目支持 PC 端和移动端屏幕的自适应，可以使用任意一款移动端设备来查看页面效果，没有特定要求。在开发过程中使用Chrome的开发者工具，测试页面在普通 PC 端与移动端 iPhone 6/7/8 模拟环境下的页面效果。 PC端的页面效果如下： ![1665308236728](css框架基础实践图片/PC端顶部的效果.png) **首页上部 PC 端效果** ![1665309456843](css框架基础实践图片/潮流穿搭风格.png) **首页中部 PC 端效果** ![1665309657720](css框架基础实践图片/潮流穿搭新闻.png) **首页下部 PC 端效果** | ![1665309818505](css框架基础实践图片/首页上部移动端效果.png) | ![1665310079583](css框架基础实践图片/首页中部移动端效果.png) |![1665310185001](css框架基础实践图片/首页下部移动端效果.png) | | :------------------------------------------------------: | :----------------: | :----------------: | | 首页上部移动端效果 | 首页中部移动端效果 | 首页下部移动端效果 | ### 1.2 项目的目录结构 ​ 项目完成后的参考目录如下： ![1665311088329](css框架基础实践图片/项目完成后的参考目录结构) bootstrap-4.6.1-dist 是 Bootstrap v4 的生产文件夹； css/font-awesome.min.css 是字体图标样式文件 css/style.css 是自己编写的 index.html 用到的样式文件（任务1样式表文件） fonts 是字体库夹 images 是网站中用到的图片文件夹 js 是 jQuery 库文件夹 index.html 是要完成的首页文件（任务1页面） ## 2. 前期准备 ​ 在制作网页时，可以通过元素样式中的 margin 或 padding 属性设置元素间距，其中的 margin 用于设置元素的外边距，它影响元素与其相邻外部元素之间的距离；padding 用于设置元素的内边距，它影响元素与其内部子元素之间的距离。Bootstrap中提供了一组简写的 class 名，用来设置间距大小和某侧的边距值。 ### 2.1 设置元素间距 #### 2.1.1 设置内外边距值 ​ Bootstrap 中使用 margin 的简写 .m-* 来设置外边距，使用 padding 的简写 .p-* 来设置内边距。 * 号允许的值如下表所示： | 类名 | 描述 | | :----------------- | :-------------------------------- | | .m-0 或 .p-0 | 设置边距为0 | | .m-1 或 .p-1 | 设置 margin 或 padding 为 0.25rem | | .m-2 或 .p-2 | 设置 margin 或 padding 为 0.5rem | | .m-3 或 .p-3 | 设置 margin 或 padding 为 1rem | | .m-4 或 .p-4 | 设置 margin 或 padding 为 1.5rem | | .m-5 或 .p-5 | 设置 margin 或 padding 为 3rem | | .m-auto 或 .p-auto | 设置 margin 或 padding 为 auto | #### 2.2.2 设置某侧的边距值 ​ Bootstrap 中提供了 t、b、l、r、x、y 缩写来设置元素某一侧的间距，分别表示上边距、下边距、左边距、右边距、x 轴的间距（左边距和右边距）、y 轴的间距（上边距和下边距），间距值可以选择 0~5 和 auto。下面以 margin 为例，使用其中的一个值，来对某一侧的外边距进行详细说明，具体如下表所示： | 类名 | 描述 | | -------- | ---------------------------------------------------------- | | .mt-5 | { margin-top: 3rem !import; } | | .mb-5 | { margin-bottom: 3rem !import; } | | .ml-5 | { margin-left: 3rem !import; } | | .mr-5 | { margin-right: 3rem !import; } | | .mx-5 | { margin-left: 3rem !import; margin-right: 3rem !import; } | | .my-5 | { margin-top: 3rem !import; margin-bottom: 3rem !import; } | | .mr-auto | { margin-right: auto !import; } | ### 2.2 设置字体图标 ​ Bootstrap不提供默认的图标，而是把图标库独立出来，在这里选择使用第三方开源图标库 Font Awesome，其提供了可缩放矢量字体图标，并且可以通过 CSS 代码来设置字体的大小、颜色、阴影等，具有良好的兼容性。 ​ 首先进入 Font Awesome 官网，http://www.fontawesome.com.cn/ ![1665302951462](css框架基础实践图片/FontAwesome官网.png) ​ 选择 “下载旧版 v4.7” 下载，下载后，把 zip 文件解压到本地，解压后的文件目录如下： ![1665303520041](css框架基础实践图片/fontAwesomeV4.7的解压目录.png) ​ 把 css 目录下的 font-awesome.min.css 拷贝到自己项目的 css 目录下，把 fonts 文件夹拷贝到自己的项目下，与 css 目录同级。 ### 2.3 页面初始化 ​ 进入Bootstrap 官网，从文档页面 https://v4.bootcss.com/docs/getting-started/introduction/ 中出初始模板，编写 index.html 初始代码，示例代码如下： ```html Hello, world!

Hello, world!

``` ​ 因为官网使用的 css 与 js 库都是网络路径，因此这里直接修改为本地路径，修改的界面代码如下： ```html 潮流穿搭商品展示 ``` ​ 因为 Bootstrap5 中一些样式做了修改，因此这里内容介绍都以 Bootstrap4 为准。 ### 2.4 页面结构 ​ 页面由 导航栏、轮播图、潮流穿搭技巧模块、潮流穿搭风格模块、潮流穿搭新闻模块、合作伙伴和著作权声明模块组成，整体结构如下所示： | 导航栏(