应用 CSS 3 – 构建6个专业网页

你将会学到的

• 将现有的网页设计分解为网页友好的元素
• 通过从外到内的方式实现 HTML 布局
• 使用 CSS 和迭代方法设置 HTML 元素的样式
• 使用 CSS 最佳实践来完善现有样式

课程内容

介绍

第1部分-创建电子商务产品列表页面

• 参考专柜Figma主题
• 导航菜单HTML
• 确认CSS与核心样式链接
• 添加导航图标
• 扩大导航元素
• 完成导航菜单和微标
• 添加英雄图片
• 主体布局
• 正文内容和相对宽度
• 页脚链接布局和样式
• 完成页脚

第2部分-构建包含客户评论的产品详细信息页面

• 参考专柜产品页面
• 产品页面设计概述
• 产品详细信息的HTML容器
• 产品信息HTML
• 设置画廊图像的样式
• 产品详细信息的布局样式
• 按钮和标签样式
• 产品菜单和评论HTML
• 审核表单HTML
• 产品菜单CSS
• 审核表格样式
• CSS总结和结论

第3部分-制作播客剧集列表页面

• 参考Flowbase主题
• Flowbase设计概述
• 主题和资源下载
• 导航菜单布局和样式
• 按钮样式和Hero HTML
• Hero布局和标题样式
• 设置英雄描述和元数据的样式
• 主按钮布局和样式
• 按钮和标题
• 最新剧集设计概述
• 剧集列表HTML
• 最新剧集和类型过滤器样式
• 剧集描述和标签样式
• 主持人和最新剧集风格
• 页脚HTML
• 页脚样式

创建一个引人注目的关于页面

• 参考Flowbase关于页面
• 设计概述和Copypasta
• 页眉HTML和CSS
• 历史和统计HTML
• HTML创始人和赞助商
• 统计样式
• 关于和历史风格
• 创始人及主要主持风格
• 赞助商部分样式
• 联系表格HTML
• 联系表格CSS
• 盒子尺寸和包装

开发餐厅菜单页面

• 参考FoodZero餐厅主题
• FoodZero设计概述
• 标题HTML
• 菜单HTML结构
• 完成HTML菜单
• 预订和页脚HTML
• 字体和按钮样式
• 顶部导航栏的样式
• 完成英雄
• 微调菜单布局
• 完成菜单
• 预订方式
• 设计时事通讯表单的样式
• 版权容器样式

撰写定制博客文章

• 参考FoodZero中的博客文章（带侧边栏）设计
• 设计概述及代码携带
• 资源下载
• 英雄容器HTML
• 文章布局HTML
• 侧边栏HTML
• 评论列表HTML
• 新评论表单HTML
• 英雄容器样式
• 主要文章布局
• 文章内容风格
• 元数据样式
• 搜索栏和侧边栏布局
• 侧边栏部分样式
• 最近的帖子和标签
• 上一篇和下一篇文章
• 造型帖子评论
• 新的评论表单样式

额外讲座

• 额外讲座（Discord 和其他链接）

说明

• 您是否尝试过无法提供有用代码的入门课程？也许您从概念上学到了这些信息，但它们并没有弥合与实践的差距。那么本课程适合您。它包含了我在财富500强公司和小型初创公司9 年多的专业Web开发经验中学到的有关实现专业设计的精炼技术。
• 您不仅将了解现代网页中使用的常见布局模式，还将获得6个设计精美的网页，您可以将它们用于从自定义博客主题到社区中当地餐馆的菜单等项目。最后，您可以将这些技术应用到需要更细粒度的CSS知识的大型项目中。
• 本课程分为6个部分，每个主要页面一个：
• 第 1 部分- 向您介绍一个电子商务主题，其中显示产品及其价格的图库。
• 第 2 部分- 这建立在电子商务主题的基础上，这次是一个包含客户评论和其他元素的单一产品。前两部分是围绕称为列表详细视图模式的常见前端模式构建的。
• 第 3 部分- 本课程最高级的部分（您可以在最后返回到此部分），第 3 部分展示了如何为播客应用程序实现播客剧集列表及其名称和封面图像。
• 第 4 部分- 如何为您的网站或博客编写专业、引人注目的“关于”页面。
• 第 5 部分- 涵盖长篇餐厅菜单，其中包含开胃菜、主菜和甜点等不同的常见风格部分。
• 第 6 部分- 实现带有侧边栏和评论部分的自定义博客文章主题设计。
• 为了在本课程中取得成功，建议您牢牢掌握HTML 5。即使讲座中解释了常见的样式和样式技术，如果您对 CSS 有非常基本的了解，这也会有所帮助。

此课程面向哪些人

• 如果您希望将 CSS 技能提升到一个新的水平，并将您学到的知识应用到看起来专业设计的实用网页中，那么本课程适合您
• 您想提高 Web 开发技能