网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容 知识问答

前端如何制作不规则的选项卡

时间:2025-11-05 05:29:31

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)

}

为标签加点样式,这样就可以做成不规则的样子了。

前端如何制作不规则的选项卡

前端如何制作不规则的选项卡

前端如何制作不规则的选项卡

© 2025 五度知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com