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页面切换的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

自学 Html5 要多久

Html怎么改变鼠标形状

详解Html实现在线预览word、excel、pdf等文件的功能(附代码)

Html的空格代码怎么写?教你如何使用空格nbsp代码

Html col标签怎么用

link标签是什么意思?

Html frame标签怎么用

Html px、em、pt长度单位

Html如何设置文本域大小

关于Html colgroup标签的用法你知道哪些?colgroup用法和col的详细介绍

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




打赏

取消

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

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

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

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

评论

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