<html>
<head>
<meta charset="UTF-8">
<title>请在这里输入标题</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/base.css" />
<style type="text/css">
.box{
width: 200px;
height: 30px;
background: #0000FF;
color: #FFFFFF;
margin: 0 auto;
line-height: 30px;
text-align: center;
}
body{
text-align: center;
}
#ul{
display: inline-block;
background: #CCCCCC;
overflow: visible;
position: relative;
}
#ul>li{
width: 120px;
height: 40px;
float: left;
line-height: 40px;
text-align: 40px;
}
#ul>li>div{
width: 600px;
height: 300px;
background: #D92D37;
display: none;
font-size: 20px;
color: #FFFFFF;
text-align: center;
line-height: 300px;
}
#ul>li:hover>div{
display: block;
position: absolute;
left: 0px;
top: 40px;
}
#ul>.one:hover{
background: #666666;
}
#ul>.two:hover{
background: #666666;
}
#ul>.three:hover{
background: #666666;
}
#ul>.fore:hover{
background: #666666;
}
#ul>.five:hover{
background: #666666;
}
</style>
</head>
<body>
<ul id="ul">
<li class="one">
<span>1</span>
<div>第一</div>
</li>
<li class="two">
<span>2</span>
<div>第二</div>
</li>
<li class="three">
<span>3</span>
<div>第三</div>
</li>
<li class="fore">
<span>4</span>
<div>第四</div>
</li>
<li class="five">
<span>5</span>
<div>第五</div>
</li>
</ul>
<scritp></scritp>
</body>
</html>
用HTML写一个简单的前端选项卡，简单易懂