Menu
×
   ❮     
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
     ❯   

如何操作

如何操作主页

菜单

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

图片

幻灯片 幻灯片库 模态图片 灯箱 响应式图片网格 图片网格 图片库 可滚动图片库 标签库 图片叠加淡入 图片叠加滑动 图片叠加缩放 图片叠加标题 图片叠加图标 图片效果 黑白图片 图片文本 图片文本块 透明图片文本 全页面图片 图片上的表单 英雄图片 模糊背景图片 滚动时更改背景 并排图片 圆角图片 头像图片 响应式图片 居中图片 缩略图 图片周围的边框 认识团队 粘性图片 翻转图片 摇晃图片 作品集库 带过滤功能的作品集 图片缩放 图片放大镜 图片比较滑块 网站图标

按钮

警报按钮 轮廓按钮 分割按钮 动画按钮 淡入淡出按钮 图片上的按钮 社交媒体按钮 阅读更多阅读更少 加载按钮 下载按钮 药丸按钮 通知按钮 图标按钮 下一个/上一个按钮 导航中的更多按钮 块按钮 文本按钮 圆形按钮 滚动到顶部按钮

表单

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

过滤器

过滤列表 过滤表格 过滤元素 过滤下拉菜单 排序列表 排序表格

表格

斑马线表格 居中表格 全宽表格 嵌套表格 并排表格 响应式表格 比较表格

更多

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

网站

创建免费网站 制作网站 制作静态网站 托管静态网站 制作网站 (W3.CSS) 制作网站 (BS3) 制作网站 (BS4) 制作网站 (BS5) 创建并查看网站 创建链接树网站 创建投资组合 创建简历 制作餐厅网站 制作商业网站 制作网络书籍 居中网站 联系部分 关于页面 大标题 示例网站

网格

2 列布局 3 列布局 4 列布局 扩展网格 列表网格视图 混合列布局 列卡片 之字形布局 博客布局

谷歌

谷歌图表 谷歌字体 谷歌字体搭配 谷歌设置分析

转换器

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

博客

获得开发人员职位 成为前端开发人员 雇用开发人员

如何 - 创建免费网站


使用 W3Schools Spaces 构建和托管您的网站。

只需点击几下,即可开始使用您的免费网站。

您需要的一切都在浏览器中。

它易于使用 - 试试吧!

免费开始 »

使用 W3Schools Spaces 创建您的第一个网站

W3Schools Spaces 是一个个人空间,您可以在其中构建和实验代码,并托管自己的网站。

使用 W3Schools Spaces,您可以使用 HTML、CSS 和 JavaScript 构建。

直接在浏览器中编辑代码。

上传和托管您的文件和图像。

立即开始扩展您的在线影响力!


为什么要使用 W3Schools Spaces 构建?

Spaces 由 Web 开发人员为 Web 开发人员打造。

  1. 界面简单易用。
  2. 直接在浏览器中托管和编辑您的文件。
  3. 免费模板。

它是 **免费** 的,您可以立即开始使用,无需输入您的信用卡。


编辑和预览代码

编辑器易于使用 - 这有助于您专注于最重要的事情。

使用不同的预览选项检查网站的响应能力。

实时预览网站上的更改!


随时随地构建

在云中托管您的文件和图像。

通过创建包含文件夹的结构来保持井井有条。

您需要的一切都在浏览器中。


免费模板

浏览并使用我们的响应式网站模板。

修改、保存、分享并在您的项目中使用它们。

模板由W3.CSS提供支持



我需要了解什么才能开始?

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

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

如果您不知道如何编码,请不要担心。最重要的是尽早动手实践。学习编码的最佳方法是通过实践。今天就开始构建吧!


让我们分几步开始

您已经拥有 W3Schools 帐户了吗?如果是,请跳过第一步


第一步:注册帐户

要使用 Spaces,您需要注册并获取您的帐户。

让我们开始设置吧!

前往W3Schools 个人资料 - 点击“注册”并输入您的电子邮件和密码,然后点击“免费注册”按钮。

请记住,验证您电子邮件中的帐户。如果在收件箱中找不到验证电子邮件,请检查垃圾邮件过滤器。

在我们的文章中获取有关如何注册的更多信息 - 如何注册


第二步:从模板或 HTML 骨架开始

前往W3Schools Spaces

选择其中一个选项,然后点击“继续”按钮。

不要太担心这个决定。您可以随时重置您的 Space 并重新开始。


第三步:为您的 Space 命名

通过给它一个很棒的名字来个性化您的 Space。

您不能在名称中使用特殊字符,例如 (#、!或:)。唯一例外是连字符 (-)

该名称将是您与他人分享以查看您网站的链接。例如:yourname.w3spaces.com


第四步:进入您的 Space

很棒!您已经进入了仪表板。

在仪表板中,您可以概览您的 Spaces 和使用情况。

通过点击 Space 行的某个位置或点击行内右侧三个点的按钮来进入您的Space及其文件概览

使用免费计划,您只能拥有一个 Space。但是,您可以随时升级以获得更多 Space。


第五步:编辑代码或上传文件

这就是魔法发生的地方!

开始编辑代码上传文件

  • 通过点击要编辑的文件右侧的“笔图标”来编辑代码。
  • 通过点击“新建文件”按钮来创建新文件。
  • 通过点击“上传文件”按钮来上传文件。

第六步:发布您的网站并与他人分享

这是构建您的在线形象的开始。

学习、测试、构建并使用您的 Space 上线。

创建您的网站并与他人分享。

注意:带有 .w3spaces.com 扩展名的 Space 名称是您可分享的链接。有关如何分享您的 Space 的更多信息,请阅读本文档如何分享我的 Space?


W3Schools Spaces

W3Schools Spaces

使用 W3Schools Spaces 构建您自己的网站。

免费开始



×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.