<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 14px;
}
ul li{
list-style:none;
}
#menu{
width: 552px;
line-height: 30px;
overflow: hidden;
background:#eee;
}
#menu li{
float: left;
width: 90px;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-top: 2px solid #eee;
text-align: center;
cursor: pointer;
}
#menu .active{
border-left-color: #ccc;
border-right-color: #ccc;
border-top-color: blue;
cursor: pointer;
background:#fff;
}
#content{
width: 552px;
}
#content>div {
display: none;
padding: 10px;
overflow: hidden;
}
#content>div img{
float: left;
width:255px ;
height: 96px;
margin-right: 10px;
}
#content>div .title{
padding: 2px 0;
仿京东选项卡效果
最新推荐文章于 2024-01-04 18:27:18 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)