HTML+CSS项目实践五：使用纯CSS实现点击文字切换图片效果（不使用JS）

实现效果：点击文字，切换到对应的图片显示。

如：点击文字1，切换到图片1，点击文字2，切换到图片2，点击文字3，切换到图片3。

    

 

实现思路：

1、制作一个div盒子，用来做展示图片的容器。因此盒子的宽高，要和待展示的图片盒子宽高一致。

2、将待展示的内容，放在同一个盒子里。通过文字触发，控制分别展示。（使用ul-li标签）

3、制作按钮文字，并控制点击不同文字时，待展示的内容不一样。

 

实现代码：

    
    1

    
    2

    
    3


    

        
one-点击切换
        
two-点击切换
        
three-点击切换
    

思考：将自动轮播和点击切换结合在一起使用

 

扩展知识点：CSS3

1. CSS3 transition 属性
2. CSS3 :nth-child() 选择器
3. CSS3 @keyframes 规则
4. HTML 标签

 

 

参考资料：HTML+CSS项目实践一：单纯利用CSS制作图片轮播效果（不使用JS）

 

 

========================这里是结束分割线==============================