前端学习总结【103天】：CSS——两种不用JavaScript实现tab切换的方法

时间：2023-03-31 12:31:18 CSS

1、overflow方法：控制大小，使用overflow:hidden剪掉多余部分。一个两个

第一

第二

.tab{宽度：300px；高度：300px；}.nav{高度：30px}.content{高度：270px；填充底部：50px；border-bottom:实心20px红色；溢出：隐藏；}。cont{高度：270px；}#the1{背景：绿色；}#the2{背景：蓝色；}Tips：overflow的范围是width和padding，不包括margin和border。2、radio大法思路：利用radio和label配合，组合：勾选，这样当label被点击时，控制内容部分的显示。

一piece

275万买昌平小区铁三居
总价20万买房
200万内购五环三房
北京首个零首付楼盘

第二个

新中式冷色调暖色调
深圳房价暴跌，8W一平
800万买沙井三居
宝安房价均价900W

*{边距：0;填充：0；}.tab{宽度：300px；高度：150px；左边距：30px；顶部边距：30px；边框：1px实心#eee；位置：相对；溢出：隐藏；}input[type='radio']{显示：无；}input[type='radio']:checked~div[class^='mod']{display:block;}input[type='radio']:checked~label{背景：橙色；}.tab标签{位置：绝对；宽度：60px；高度：30px；行高：30px；文本对齐：居中；边框：1px实心#eee；}.label-1{左：0；顶部：0；}.label-2{左：60px；顶部：0；}[class^='mod']{p定位：绝对；顶部：40px；左：20px；显示：无；}

上一篇：[css]vue中textarea的光标设置

下一篇：使用css3实现骰子动画

前端学习总结【103天】：CSS——两种不用JavaScript实现tab切换的方法相关文章