菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HOW TO

HowTo Home

Menus

图标栏 菜单图标 手风琴 选项卡 垂直选项卡 选项卡标题 全页选项卡 悬停选项卡 顶部导航 响应式顶部导航 拆分导航 带图标的导航栏 搜索菜单 搜索栏 固定侧边栏 侧边导航 响应式侧边栏 全屏导航 画布外菜单 悬停侧边导航按钮 带图标的侧边栏 水平滚动菜单 垂直菜单 底部导航 响应式底部导航 底部边框导航链接 右对齐菜单链接 居中菜单链接 等宽菜单链接 固定菜单 滚动时下拉栏 滚动时隐藏导航栏 滚动时缩小导航栏 粘性导航栏 图片上的导航栏 悬停下拉菜单 点击下拉菜单 级联下拉菜单 顶部导航中的下拉菜单 侧边导航中的下拉菜单 响应式导航栏下拉菜单 子导航菜单 向上展开菜单 巨型菜单 移动菜单 幕布菜单 折叠侧边栏 折叠侧边面板 分页 面包屑导航 按钮组 垂直按钮组 粘性社交栏 药丸导航 响应式标题

图片

幻灯片 幻灯片画廊 模态图像 灯箱 响应式图像网格 图像网格 图像画廊 可滚动图像画廊 选项卡画廊 图像覆盖淡入 图像覆盖滑动 图像覆盖缩放 图像覆盖标题 图像覆盖图标 图像效果 黑白图像 图像文字 图像文字块 透明图像文字 全页图像 图像上的表单 英雄图像 模糊背景图像 滚动时更改背景 并排图像 圆角图像 头像图像 响应式图像 居中图像 缩略图 图像边框 团队介绍 粘性图像 翻转图像 抖动图像 作品集画廊 带过滤器的作品集 图像缩放 图像放大镜 图像比较滑块 网站图标

按钮

警告按钮 轮廓按钮 拆分按钮 动画按钮 渐隐按钮 图像上的按钮 社交媒体按钮 阅读更多/更少 加载按钮 下载按钮 药丸按钮 通知按钮 图标按钮 下一/上一页按钮 导航中的“更多”按钮 块状按钮 文本按钮 圆形按钮 回到顶部按钮

表单

登录表单 注册表单 结账表单 联系表单 社交登录表单 注册表单 带图标的表单 新闻通讯 堆叠表单 响应式表单 弹出表单 内联表单 清除输入字段 隐藏数字箭头 复制文本到剪贴板 动画搜索 搜索按钮 全屏搜索 导航栏中的输入字段 导航栏中的登录表单 自定义复选框/单选按钮 自定义选择 切换开关 检查复选框 检测大写锁定 回车键触发按钮 密码验证 切换密码可见性 多步表单 自动完成 关闭自动完成 关闭拼写检查 文件上传按钮 空输入验证

Filters

筛选列表 筛选表格 筛选元素 筛选下拉菜单 排序列表 排序表格

表格

斑马条纹表 居中文档 全宽表 嵌套表 并排表 响应式表 对比表

More

全屏视频 模态框 删除模态框 时间轴 滚动指示器 进度条 技能条 范围滑块 颜色选择器 电子邮件字段 工具提示 悬停显示元素 弹出窗口 可折叠 日历 HTML 包含 待办事项列表 加载器 徽章 星级评分 用户评分 叠加效果 联系人标签 卡片 翻转卡片 个人资料卡片 产品卡片 警告 提示 笔记 标签 丝带 标签云 圆形 样式 HR 优惠券 列表组 带徽章的列表组 无项目符号的列表 响应式文本 镂空文字 发光文字 固定页脚 粘性元素 等高 清除浮动 响应式浮动 Snackbar 全屏窗口 滚动绘制 平滑滚动 渐变背景滚动 粘性标题 滚动时缩小标题 定价表 视差 纵横比 响应式 iframe 切换喜欢/不喜欢 切换显示/隐藏 切换黑暗模式 切换文本 切换类 添加类 移除类 更改类 活动元素 树状视图 移除小数 移除属性 离线检测 查找隐藏元素 重定向网页 格式化数字 悬停缩放 翻转框 垂直居中 DIV 中的居中按钮 居中列表 悬停过渡 箭头 形状 下载链接 全高元素 浏览器窗口 自定义滚动条 隐藏滚动条 显示/强制显示滚动条 设备外观 Contenteditable 边框 占位符颜色 禁用文本区域大小调整 禁用文本选择 文本选择颜色 项目符号颜色 垂直线 分隔符 文本分隔符 动画图标 倒计时 打字机 即将上线页面 聊天消息 弹出聊天窗口 分屏 客户评价 区块计数器 引语幻灯片 可关闭列表项 典型设备断点 可拖动的 HTML 元素 JS 媒体查询 语法高亮 JS 动画 JS 字符串长度 JS 指数运算 JS 默认参数 JS 随机数 JS 排序数字数组 JS 展开运算符 JS 滚动到视图 获取当前日期 获取当前 URL 获取当前屏幕尺寸 获取 iframe 元素

网站

创建免费网站 制作网站 制作静态网站 托管静态网站 制作网站 (W3.CSS) 制作网站 (BS3) 制作网站 (BS4) 制作网站 (BS5) 创建和查看网站 创建 Link Tree 网站 创建作品集 创建简历 制作餐厅网站 制作商务网站 制作 WebBook 居中网站 联系部分 关于页面 大标题 示例网站

Grid

2 列布局 3 列布局 4 列布局 展开式网格 列表网格视图 混合列布局 列卡片 锯齿布局 博客布局

Google

Google Charts Google Fonts Google Font 配对 Google 设置分析

Converters

转换重量 转换温度 转换长度 转换速度

博客

获得开发人员工作 成为前端开发人员 聘请开发人员

如何创建作品集

作品集对于获得关注至关重要。

创建作品集是提升在线形象的好方法。

作品集用于展示您的技能和项目。

它可以帮助您找到工作、获得自由职业机会或实习机会。

免费创建我的作品集 »

什么是作品集

作品集可以有与简历相同的目的。大多数简历都是用文字书写,而作品集是为了展示,所以它是视觉化的,带有图像,并且通常比简历更详细。

这是一个可以展示您工作经验并突出您最引以为傲的项目的地方。

您的在线作品集可以通过链接与公司、招聘经理和招聘人员分享,让他们注意到您。

这关乎展示并让他人了解您作为专业人士的身份。


为什么创建作品集

这是提升在线形象和获得关注的好方法。

它可以用于找工作或吸引客户购买您的服务。

将其放在网上作为网站。使全世界的人都能找到您。

作品集的设计将给读者留下关于您是谁的印象。确保它以良好且体面的方式呈现!


作品集是为谁准备的

创建作品集对您的职业生涯可能很重要。

在寻找工作、自由职业机会或向新客户展示您的技能时,这会很有帮助。

通常使用作品集的典型角色包括但不限于以下专业人士:

  • 软件开发人员
  • UX 设计师
  • 平面设计师
  • 摄影师
  • 营销专业人士
  • 建筑师
  • 作家

听说过 W3Schools 网站空间吗?您可以在这里从零开始创建作品集,或使用模板。

立即免费开始 ❯

* 无需信用卡


作品集中最重要的部分是什么

有许多不同的方法来创建作品集。

如何创建取决于您是哪种类型的专业人士、您为谁构建它以及您为何要创建它。

您必须 尝试、失败并学习 才能找到适合您的作品集类型!

以下总结了一些对所有类型作品集都至关重要的部分:

1. 英雄部分。

英雄部分是人们进入您的作品集时首先看到的内容。

它显示在您的徽标和菜单下方。

英雄部分帮助读者了解您提供什么、为什么应该与您合作,以及您提供的服务所带来的价值。

它通常包含一个号召性用语按钮,如“联系我”、“预约会议”或类似的。

hero section

2. 关于我部分。

给读者一个关于您自己的简短总结。

包括您的教育、工作经验、项目和兴趣等主题。

帮助读者了解您的热情所在以及您的超能力(您擅长的事情)。

请记住保持简短和简洁。

about section

3. 项目部分。

列出您参与过的项目。最常用的方式是按日期排序列表,但在某些情况下,按其他逻辑方式排序也是有意义的。

为每个项目添加详细信息,包括您的角色、您做了什么以及项目的结果。

添加图片来展示您所构建的内容是加分项!展示您引以为豪的项目。

work experience section

4. 联系我部分。

让读者知道如何以及在哪里可以联系到您。

添加您的联系方式和其他联系渠道,例如您的 GitHub 个人资料、LinkedIn、YouTube 等。

contact me section

作品集示例

查看一些作品集示例。

您可以在 W3Schools 网站空间中加载作品集模板。只需点击几下即可开始发布您的作品集。

发布我的作品集 ❯

* 无需信用卡

黑白作品集模板

深色作品集模板

人物作品集

我的作品集模板


我需要了解什么才能创建自己的作品集?

HTML、CSS 和 JavaScript 是创建网站的基础语言。

仅使用这三者,您就能走很远!

  1. 使用 HTML 创建结构。 您需要学习的第一件事是 HTML,它是创建网页的标准标记语言。
  2. 学习 HTML ❯
  3. 使用 CSS 设置样式。 下一步是学习 CSS,用漂亮的颜色、字体等设置网页的布局。
  4. 学习 CSS ❯
  5. 使用 JavaScript 使其具有交互性。 在学习了 HTML 和 CSS 之后,您应该学习 JavaScript 来为您的用户创建动态和交互式的网页。
  6. 学习 JavaScript ❯


如何一步一步创建作品集

按照步骤从头开始创建您的作品集。


准备工作

决定使用哪个代码编辑器并设置您的环境。

W3Schools 创建了一个易于使用的代码编辑器,称为 W3Schools 网站空间。注册即可轻松上手。

免费开始 ❯

创建您的 index.html 文件。这样您就可以开始输入代码了。

一切准备就绪。出发!


第一步:添加 HTML 骨架

输入 HTML 骨架代码,这是您网站的起点。它构成了代码的结构,并确保其在互联网上得到正确显示。

请阅读此处了解如何创建基本的 HTML 骨架: 如何创建 HTML 骨架


第二步:添加导航栏

导航栏是网站内容的一份简短概述。

它是访问者首先看到的内容之一。

它有助于访问者查找和导航网站内容。创建结构良好的导航非常重要。这样您的访问者就能找到他们想要的东西。

以下是创建顶部导航栏的示例: 如何创建顶部导航栏


第三步:添加英雄部分

英雄部分与导航栏一起,是人们看到您作品集的第一部分。

它应该包含关于几件事的简短信息,例如:

  • 您是谁?
  • 您提供什么?
  • 您的职业是什么?
  • 人们为什么要与您合作?
  • 您应该采取哪些行动?

使用第一人称写作,并保持简短简洁

英雄部分首选的其他内容包括:

  • 引人注目的图形,可以是背景,也可以是文本旁边的图像。
  • 一个操作按钮,可以链接到您作品集中的内容或另一个网站的内容。

以下是创建英雄部分的示例: 如何创建英雄图像


第四步:添加“关于我”部分

在此部分,您可以发挥创意。这可以帮助您脱颖而出。

在这里您可以个性化内容,并更深入地撰写关于您自己的信息。

此部分可包含的内容有:

  • 您的介绍
  • 您作为专业人士的身份
  • 您的教育
  • 您的技能
  • 您的工作经验(当前和/或过去)
  • 您的爱好
  • 您的目标和抱负

某种程度上,您可以将“关于我”部分视为简历的简短摘要。

您可以随意用第一人称写作。

个性化并让人们了解您这个人可能会引起更多关注。

以下是创建“关于我”部分的示例: 如何创建“关于我”部分


第五步:添加工作经验部分

工作经验部分突显了您一路走来积累的经验、知识和能力。

在这里您可以添加:

  • 指向您项目的链接,附有项目名称和/或关于项目内容的简短描述。
  • 指向您撰写过的博客帖子的链接,附有标题和/或关于其内容的简短描述。
  • 您的专业奖项或成就。
  • 突出您的工作和成就,是创造机会的一种方式。
  • 视觉表示,如图像或图形。

第六步:添加联系部分

联系部分是让您的访问者能够与您取得联系的部分。

您应该始终提供一种让访问者联系您的方式,无论是通过联系表单还是写下您的联系信息,例如:

  • Address
  • 邮箱
  • 电话号码
  • 例如 GitHub 个人资料、LinkedIn 个人资料、YouTube 个人资料等。

以下是创建基本联系部分的示例: 如何创建联系部分


第七步:添加页脚部分

页脚可能被视为一个次要部分,但它是每个网站的重要组成部分。

它关乎根据您的网站目标和访问者的需求展示关键信息。

通常包含关于版权的技术信息,但也可以包含其他信息,例如:

  • 指向“隐私政策”页面的链接
  • 指向“使用条款”页面的链接
  • 联系信息
  • 网站导航链接
  • 社交网络链接
  • 指向您商店的链接

以下是如何构建页脚部分的示例: 如何创建页脚部分


W3Schools Spaces

W3Schools Spaces

使用 W3Schools 网站空间构建和发布您自己的作品集。

免费开始



×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持