html加css样式，不用js实现切换内容，直接上测试代码！

1<html>
2	<head>
3<style>
4        /* 清样式，如果是项目中，不推荐使用通配符来清样式，建议使用标签清样式，通配符清样式会增加页面压力 */
5        *{
6            margin:0;
7            padding:0;
8        }
9        /* 宽度为屏宽的一半，高度为屏高的一半，然后居中 */
10        .box{
11            width:50vw;
12            height:50vh;
13            margin:0 auto;
14        }
15        /* 清除li样式 */
16        ul,li{
17            list-style: none;
18        }
19        /* 将ul相对定位，目的是让内容的div绝对定位时相对ul定位，否则会相对body定位 */
20        /* ul弹性盒，目的是让li横着排，也可以将li浮动或者转行内块 */
21        ul{
22            position:relative;
23            display:flex;
24        }
25        /* 将三个li宽度平分，高度60px */
26        li{
27            flex:1;
28            height:60px;
29        }
30        /* input隐藏 */
31        input{
32            display:none;
33        }
34        /* 设置input的下一个节点label的样式 */
35        input+label{
36            display:block;
37            width:100%;
38            height:100%;
39            background:#ccc;
40            font-size:18px;
41            text-align: center;
42            line-height: 60px;
43            color:#333;
44        }
45        /* 设置div内容的基础样式 隐藏内容div*/
46        input+label+div{
47            display:none;
48            position: absolute;
49            left:0;
50            top:60px;
51        }
52        /* input选中状态时候对应的label的样式 */
53        input:checked+label{
54            background: #333333;
55            color:#fff;
56        }
57        /* input选中时候显示对应的div */
58        input:checked+label+div{
59            display:block;
60        }
61    </style>
62</head>
63<body>
64<div class="box">
65        <ul>
66            <li>
67                <input type="radio" name="check" id="active1" checked><label for="active1">第一页</label>
68                <div>第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页</div>
69            </li>
70            <li>
71                <input type="radio" name="check" id="active2"><label for="active2">第二页</label>
72                <div>第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页</div>
73            </li>
74            <li>
75                <input type="radio" name="check" id="active3"><label for="active3">第三页</label>
76                <div>第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页第三页</div>
77            </li>
78        </ul>
79    </div>
80</body>
81</html>

html加css样式，不用js实现切换内容，直接上测试代码！

评论区

相关推荐