您的位置：首页 > 其它

一个简单ＨＴＭＬ实现一个选项卡

2017-02-23 14:18 453 查看

<!DOCTYPE html>

<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写一个简单的前端选项卡，简单易懂

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航