tab栏切换
文章图片
tab栏切换.jpg
- 锐客网 * {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
}
li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: pink;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 360px;
background-color: yellow;
text-align: center;
font: 700 150px/360px "simsun";
}
.show {
display: block;
}
.current {
background-color: yellow;
}
- 鞋子
- 袜子
- 帽子
- 裤子
- 裙子
鞋子
袜子
帽子
裤子
裙子
- 鞋子
- 袜子
- 帽子
- 裤子
- 裙子
鞋子
袜子
帽子
裤子
裙子
- 鞋子
- 袜子
- 帽子
- 裤子
- 裙子
鞋子
袜子
帽子
裤子
裙子推荐阅读
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- tableView|tableView 头视图下拉放大 重写
- IDEA|IDEA 创建工程
- 数据库总结语句
- Android超简单实现沉浸式状态栏
- Android实现主页底部菜单中间tab图案凸起
- www和https://又被Chrome地址栏隐藏了
- 前端代码|前端代码 返回顶部 backToTop
- linux定时任务contab
- Python专栏|数据分析的常规流程