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 提供 W3Schools Spaces 来托管您的静态网站。

使用 Spaces,您可以轻松地通过几次点击来托管您的网站。

它允许您使用 HTML、CSS 和 JavaScript 创建静态网站。


托管变得简单

与传统的托管方式相比,W3Schools Spaces 可以节省您的时间。

您无需自行设置 SSL 证书。

Spaces 默认情况下是安全的。

托管网站的复杂性被隐藏了。

您可以快速启动和运行您的文件。

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


安全网站

W3Schools 为您处理安全问题。

您的 Space 运行在 HTTPS 协议上。

每个 Space 都具有 SSL 证书。

SSL 证书是一个小文件,它以多种方式保护您的 Space

  • 它保护用户数据安全
  • 它防止网站攻击
  • 加密的网站流量
  • 验证网站所有权

用户更有可能信任并访问安全的网站。

HTTPS 协议中的 S 代表安全。

它使您的流量加密并安全。


我如何开始?

通过几个步骤开始

  • 创建您的帐户
  • 创建您的 Space
  • 添加您的文件
  • 预览您的网站

这些步骤将在以下部分中解释。


创建您的 W3Schools 帐户

要创建帐户,您需要 注册

使用电子邮件和密码注册。

W3Spaces sign-up form image

W3Schools Spaces 注册表单


创建您的 Space

创建您的帐户并前往 Spaces

在右上角有一个名为“创建 Space”的按钮。

单击该按钮将带您进入 Space 创建页面。

Create a space

创建 Space 图片

您可以从空白 Space 开始,也可以选择 模板

让我们选择空白 Space 选项并单击“继续”。


命名您的 Space

选择空白 Space 选项可以让您命名 Space。

所以给您的 Space 取一个酷炫的名字。

Create a space name

命名您的 Space 图片

您的 Space 名称是 Space URL 的一部分。

单击“继续”按钮继续。


预览您的 Spaces

为您的 Space 选择一个名称将带您进入 Spaces 概述。

概述是您 Spaces 的摘要。

您在摘要中看到的内容是

  • Space 名称
  • Space URL
  • 访问者数量
  • 数据使用情况
  • 存储使用情况
  • 文件数量
  • 其他操作按钮

Spaces 概述可以帮助您查看每个 Space 的流量。

Spaces summary

Spaces 概述图片


上传您的文件

要上传您的文件,首先,您必须打开您的 Space 文件管理器页面。

您可以通过单击“上传文件”按钮来上传您的文件。

“上传文件”按钮位于 Spaces 概述页面的右侧。

Space page

Spaces 文件管理器图片

您可以使用“新建文件”按钮创建一个新文件。

请注意,您的主页文件必须命名为 **index.html**。

文件名 **index** 是浏览器将搜索作为您网站起始页的内容。


预览您的网站

您的 Space URL 是您的 Space 名称和 **w3spaces** 子域的组合。

例如,如果您的 Space 名称为 **jane-doe**,则您的 Space URL 为 **jane-doe.w3spaces.com**。

您可以与他人分享您的 Space URL。


您做到了!

恭喜!

您已成功托管您的静态网站。


想了解如何从头开始制作网站吗?阅读我们关于如何从头开始制作网站的文章。

开始阅读 »

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.