1、打开编辑器,创建一个HTML文档,并且设立基本的架构。

2、选项卡这里我们要用ul和li的架构来建造。

3、然后我们往选项卡里面添加内容查看一下结果。


4、加上label标签,这样就有选项卡名字。


5、创建一个CSS文档,并且与HTML文档关联。

6、ul {
display: flex;
}
我们可以设置一下,让选项横排。


7、input+label {
display: block;
}
input+label+div {
display: none;
position: absolute;
}
input:checked+label {
background: lightblue;
color: gold;
}
input:checked+label+div {
display: block;
}
设立选项卡基本样式。




8、label {
border: 1px solid red;
transform: rotate(45deg)
}
为标签加点样式,这样就可以做成不规则的样子了。


