官网选项卡切换---发发老师

 

目标是要实现点击选项卡,后切换图片.

前端布局三步骤:

选项卡 用  Tab

给Tab 添加样式 : 宽 高 背景 外边距  

通过 margin 调整元素的位置到合适的地方

类名选择器: 用符号"  点 "  .tab {  }

标签选择器:  用标签的名字   body{   }

< span > 标签存放没有意义的文本内容

块元素, 如  div   

行内元素 如: span.

对行内元素设置宽高 无效.

将 行内元素  转换为块元素 :  display:block;

再实现 纵向排列的 span 变成 横向排列.    方法:  

font-size : ""  清除 display: inline-block 产生的空白节点.

文本放中间两行代码实现: 水平 和垂直

文本对齐方式;  

下面开始引入图片

background-imge:url()

去除背景图片的重复.

背景位置在 X Y轴 向上的位移.

代码简化:

背景的单例写法  

背景的复例写法

再实现把鼠标放上去后改变 字体, 大小颜色等属性.

再实现: 鼠标放上去后, 下面图片区更换图片的效果.

nth-child () 是个高级选择器,用来选择 指定的子元素.

图片变换渐变效果. transition

(完整代码待续)

思路总结:

1  画出一个 盒子 ,设置到合理的位置.

2 在盒子里添加 span 内容. ,将几个span 转化为  块元素. 实现横向排列. 同时,设置相关的属性.(字体,颜色, 居中方式, 清除空白节点)

3 在图片区 引入图片.并设置相关属性: 位置,大小,取消背景重复.

4实现特效: 鼠标悬停下 字体大小 颜色 的变化.

5实现图片的切换: 使用到 nth-child(n)    和   transition