html如何实现tab页面切换


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<style type="text/css">

        *{margin: 0;padding: 0;}

        .wrap{

            margin: 20px auto;

            width: 403px;

            height: 600px;

            border:1px solid brown;

            position: relative;

        }

        label{

            width: 100px;

            height: 30px;

            float: left;

            text-align: center;

            line-height:30px;

            border-right: 1px solid brown;

            border-bottom: 1px solid brown;

        }

        label:nth-of-type(4){

            border-right: none;

        }

        label span{

            cursor: pointer;

        }

        label div{

            width: 403px;

            height: 568px;

            position: absolute;

            left: 0;

            top: 31px;

            background: #eeeeee;

            display: none;

        }

        label input{

            width: 0;

        }

        input:checked+div{

            display: block;

        }

    </style>

相关学习推荐:html视频教程

以上就是html如何实现tab页面切换的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

Html blockquote标签怎么用

Html的<nav>标签功能

关于Html主体的一些问题探讨

Html iframe标签怎么使用?Html iframe标签的使用实例介绍

Html学习笔记一

Html 表格太宽溢出父容器的解决方法

如何解决Html打开乱码问题

Html中的include标签是什么?Html include实现配置解析

Html代表什么

Html5新机制:postmessage实现安全跨域通信(代码)

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...