实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h2 {
text-align: center;
}
.box {
width: 537px;
height: 548px;
border: 1px solid #ccc;
background-color: white;
margin:20px auto;
}
.box>ul {
margin: 0;
padding: 0;
list-style-type: none;
background-color: #f8f8f8;
overflow: hidden;
}
.box>ul li {
width: 90px;
height: 36px;
float: left;
/*border-top: 1px solid #ccc;*/
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
line-height: 36px;
text-align: center;
}
/*ul与span同级*/
.box>ul+span {
/*border: 1px solid #ccc;*/
padding: 5px;
float:right;
margin-top: -36px;
}
.box>ul+span>a {
/*将下划线去除*/
text-decoration: none;
}
.box li.active {
border-top:3px solid orangered;
border-bottom: none;
}
.box div{
display: none;
margin-top: 20px;
text-align: left;
}
.box div ul {
list-style-type: none;
margin: 0;
padding: 40p
}
.box div ul li a{
list-style-type: none;
text-decoration: none;
}
</style>
</head>
<body>
<h2>仿PHP中文网选项卡</h2>
<div class="box">
<!-- 把头部先用div包裹起来 -->
<ul>
<li class="active">技术文章</li>
<li>网站源码</li>
<li>原生手册</li>
<li>推荐博文</li>
</ul>
<span><a href="">加载更多>></a></span>
<div style="display: block;">
<ul>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
<li><a href="">js教程 | 使用Vue构建可重用的分页</a><span>2018-03-30</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
<li><a href="">html教程 | html快速入门基础知识 必学</a><span>2018-03-30</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
<li><a href="">CSS教程 | CSS布局快速入门基础知识必学</a><span>2018-03-30</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
<li><a href="">PHP教程 | PHP之PDO对象常用方法-MySql参考手册</a><span>2018-03-30</span></li>
</ul>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
