HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

HOWTO 问题指引

常用问题指引与实用方法

Menus 菜单

图标栏 菜单图标 可折叠内容 选项卡 垂直选项卡 选项卡标题 整页选项卡 悬停选项卡 顶部导航栏 响应式顶部导航 带有图标的导航栏 搜索菜单 搜索栏 固定侧边栏 侧边导航 响应式侧边栏 全屏覆盖导航 画布外菜单 侧边导航按钮 带图标的侧边栏 水平滚动菜单 垂直菜单 底部导航 响应式底部导航 底部边框导航链接 右对齐菜单按钮 居中的顶部导航 等宽导航栏链接 固定菜单 向下滑动滚动条 隐藏滚动菜单 在滚动上缩小导航菜单 粘性/附加导航栏 图像导航栏 可悬停的下拉菜单 可点击的下拉菜单 级联下拉列表 下拉导航栏 下拉侧边栏 带有下拉菜单的响应式导航栏 子导航 下拉菜单 超级菜单 移动导航菜单 窗帘菜单 折叠侧边栏 折叠侧面板 CSS 分页 CSS 面包屑 按钮组 垂直按钮组 粘性社交栏 胶囊导航 响应式标题

Images 图像

幻灯片 幻灯片库 模态图像 灯箱 响应式图像网格 图像网格 选项卡图像库 图像悬停覆盖 图像叠加幻灯片 图像叠加缩放 图像叠加标题 图像叠加图标 添加图像效果 黑白图像 在图像上放置文本 图像上的文本块 带有透明文本的图像 整页图像 表单图像 主图像 背景图像模糊 更改滚动背景 并排对齐图像 圆形图像 头像图片 响应式图像 居中图像 缩略图 为图像添加边框 团队展示图像页面 粘滞图像 翻转图像 摇动图像 作品集图库 带有过滤功能的作品集图库 图像缩放 图像放大镜 图像比较滑块

Buttons 按钮

警报按钮 轮廓按钮 拆分按钮 动画按钮 淡化按钮 图像上的按钮 社交媒体按钮 阅读更多/更少按钮 加载按钮 下载按钮 胶囊按钮 通知按钮 图标按钮 Next/prev 按钮 导航栏中的更多按钮 全宽（块）按钮 文本按钮 圆形按钮 滚动返回顶部按钮

Form 表单

登录表单 报名表单 结帐表单 联系表单 社交登录表单 注册表单 带有图标的表单 邮件通讯表单 堆叠表单 响应式表单 弹出式表单 内联表单 清除输入字段 隐藏输入数字中的箭头 将文本复制到剪贴板 动画搜索表单 搜索按钮 全屏搜索 菜单中的输入字段 菜单中的登录表单 自定义复选框 自定义选择框 切换开关 选中复选框时显示文本 检测大写键锁定 回车触发按钮单击 密码验证 切换密码可见性 多步骤表单 在输入字段上创建自动完成 关闭输入字段的自动完成 禁用表单的拼写检查 文件上传按钮 空字段的 JS 验证

Filters 过滤/搜索

过滤/搜索列表 过滤/搜索表格 过滤元素 过滤/搜索下拉菜单 对列表进行排序 对表格进行排序

Tables 表格

斑马条纹表格 居中表格 响应式表格 创建比较表格

更多

全屏视频 模态框 删除确认模态 时间线 滚动指示器 进度条 技能栏 范围滑块 工具提示 在悬停时显示元素 弹出窗口 折叠 CSS 日历 HTML 包含 待办事项列表 加载器 星级评分 用户评分 叠加 联系人名片 卡片 翻转卡片 个人资料卡 产品卡片 警报 标注消息 注意事项 标签 圆/圆点 HR 元素的样式 优惠券 列表组 不带项目符号的列表 响应式文本 剪切文本 发光文本 固定页脚 粘性元素 等高的列 清除浮动 响应式浮动 屏幕底部弹出窗口 全屏窗口 滚动绘图 平滑滚动 滚动背景渐变 滚动标题 调整滚动页眉的大小 响应式价格表 视差滚动 纵横比 响应式 Iframes 框架 切换喜欢/不喜欢 切换隐藏/显示 切换暗/亮模式 切换/交换文本 切换类 添加一个类 删除一个类 添加 Active 活动类到当前元素 树形视图 从对象中删除属性 在线离线检测 检查元素是否隐藏 重定向到另一个网页 悬停时放大 3D 翻转框 垂直居中元素 在 DIV 中居中一个按钮 悬停过渡 CSS 箭头 CSS 形状 下载链接 全高元素 浏览器窗口 自定义滚动条 隐藏滚动条 始终显示滚动条 设备外观 移除 Contenteditable 边框 更改占位符颜色 更改文本选择颜色 更改列表项目符号颜色 垂直线 分隔线 动画图标 倒数计时器 打字效果 即将推出页面 聊天样式 弹出聊天窗口 分屏 推荐样式 计数器 报价幻灯片 可关闭的列表项 典型的设备断点 可拖动的 HTML 元素 使用 JavaScript 进行媒体查询 创建语法高亮 JS 动画 JS 获取字符串的长度 JS 设置默认参数 获取当前 URL 获取当前屏幕尺寸 获取 iframe 元素

Website 制作网站示例

制作网站 使用 W3.CSS 制作网站 使用 Bootstrap 制作网站 使用 Bootstrap4 制作网站 制作 HTML 书籍网站 网站居中 网站联系人页面 网站关于页面 设置标头样式 示例网站

Grid 网格布局

2 列布局 3 列布局 4 列布局 扩展网格 列表网格视图 混合列布局 响应式列卡 响应式锯齿形布局 博客布局

Google

Google 图表 Google 字体

转换器

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


HOWTO 常用问题指引与实用方法

W3Schools 中的 HTML、CSS 和 JavaScript 代码片段。

幻灯片

1 / 4
Caption Text
2 / 4
Caption Two
3 / 4
Caption Three
4 / 4
Caption Four
❮ ❯

Learn How To »


登录表单


× Avatar
Remember me
Forgot password?

Learn How To »


折叠

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn How To »


悬停下拉菜单

Link 1 Link 2 Link 3

Learn How To »

点击下拉菜单

Link 1 Link 2 Link 3

Learn How To »


页面导航



Learn How To »


固定侧边栏

Learn How To »


模态框

×

Modal Header

Hello World!

Modals are awesome!

Go Back To W3 How TO Examples

Modal Footer

Learn How To »


模态图像

Snow
×

Learn How To »


灯箱（模态图片库）

×

❮ ❯
Nature and sunrise
Snow
Mountains and fjords

Learn How To »


幻灯片画廊

1 / 6
2 / 6
3 / 6
4 / 6
5 / 6
6 / 6
❮ ❯

The Woods
Cinque Terre
Mountains and fjords
Northern Lights
Nature and sunrise
Snowy Mountains

Learn How To »


图像悬停叠加

Avatar
Hello World

Learn How To »


选项卡

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Learn How To »


垂直选项卡

Learn How To »


选项卡图片库

Nature
Snow
Lights
Nature ×
Nature

Learn How To »


警报按钮

Learn How To »


轮廓按钮

Learn How To »


顶部导航

Home News Contact

Learn How To »


响应式顶部导航

调整浏览器窗口大小以查看效果:

Learn How To »


全屏导航

Learn How To »


导航栏中的登录表单

Home About Contact

Learn How To »


更改滚动背景

Learn How To »