HTML实战-标签切换效果 认证专享

成为vip会员,免费看所有精品课程
  • 目录

    目录 收起>

    本课讲解内容为Tab标签切换效果,Tab标签切换效果的添加可以在网站中有更好的展示效果。

    1.Tab标签切换效果-布局实现 00:10:23

    本课时讲解Tab标签切换效果的标签布局实现,通过HTML和CSS完成基本的标签效果。包括HTML的div标签和列表标签以及CSS定位、颜色和边距等知识点。

    2.Tab标签切换效果-内容部分的添加 00:06:32

    本课时讲解Tab标签切换效果的内容部分添加,通过HTML和CSS完成内容部分添加和隐藏。包括HTML的div标签和列表标签以及CSS的字体效果、标签的显示与隐藏等知识点。

    3.Tab标签切换效果-添加JS代码 00:08:25

    本课时讲解Tab标签切换效果的JS代码实现,通过使用JSDOM操作HTML标签实现标签的切换效果,包含细节的调试。
  • 提问

    提交问题
  • 下载

  • 线路

    视频太卡?试试切换线路 √ 线路1 √ 线路2
  • 收藏

    收藏课程
  • 分享

连播

连续播放

关灯

关灯模式
视频加载太慢?

我们有两条线路可以选择,试试切换线路吧

HTML实战-标签切换效果

3课时,25分钟2014-10-29
iwen
iwen

极客学院金牌布道师

课程背景:
Tab标签切换效果是比较流行的一种网站页面布局,视觉表现为美观大方,通过标签展示内容。目前在各大网站都有存在这种效果。例如:淘宝的黄金位置使用Tab标签切换效果,网易新闻等。


核心内容:
1.标签布局。
2.内容显示与隐藏。
3.JSDOM对象控制HTML元素。


开发环境:IDEA


是否提供源码:


课程等级:初级


适合人群:具有HTML、CSS和JavaScript基础的开发者

  • 技术问答
  • 1

    Tab标签切换效果-布局实现

    10:23

    本课时讲解Tab标签切换效果的标签布局实现,通过HTML和CSS完成基本的标签效果。包括HTML的div标签和列表标签以及CSS定位、颜色和边距等知识点。

  • 2

    Tab标签切换效果-内容部分的添加

    06:32

    本课时讲解Tab标签切换效果的内容部分添加,通过HTML和CSS完成内容部分添加和隐藏。包括HTML的div标签和列表标签以及CSS的字体效果、标签的显示与隐藏等知识点。

  • 3

    Tab标签切换效果-添加JS代码

    08:25

    本课时讲解Tab标签切换效果的JS代码实现,通过使用JSDOM操作HTML标签实现标签的切换效果,包含细节的调试。

相关课程

  • HTML实战-极客学院G码兑换页面布局实现

    本课通过对页面布局的实现,掌握HTML标签的具体应用以及CSS样式的添加方式,学会HTML标签以及CSS样式在开发中的应用。

    3课时 36分钟
    初级
    4047人学习
  • HTML实战-极客学院路径图页面布局实现

    本课程通过对页面布局的实现,学习HTML标签的具体应用以及CSS样式的添加方式和JavaScript的动态效果,掌握HTML标签以及CSS样式和JavaScript在开发中的应用。

    3课时 45分钟
    初级
    14078人学习