这是我过年在家无聊的时候自己做的一个仿-慕课网课程选项卡，也不知道有没有人会看我的博客，就顺便把代码贴上吧。如果有写得不好的话，也没办法了，水平有限。现在先说第一个效果，上下伸缩。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿-慕课网课程选项卡</title>
<style>
*{padding: 0;margin:0;list-style: none;text-decoration: none;font-family:Microsoft YaHei}
nav .ul1,.ul2{margin:30px 0 0 50px;width: 800px;height: 200px;}
nav .ul1 .box{width: 225px;height: 175px;box-shadow: 0 4px 20px #ccc;position: relative;background: url(../img/01.jpg);transition: 0.2s;overflow: hidden;cursor: pointer;}
nav .ul1 li,.ul2 li{float: left; margin-right: 20px;}
nav .ul1 .text{width: 225px;height: 100px;background: #fff;position: absolute;overflow: hidden;top: 80px;transition: 0.5s}
nav .ul1 .text .top{width: 225px;height: 30px;font-size: 15px;text-indent: 1em;line-height: 30px;}
nav .ul1 .text .content{color: #999;font-size: 13px;padding:0 15px;}
nav .ul1 .math{width: 225px;height: 45px;position: absolute;color:#999;font-size: 13px;top: 130px;background: #fff}
nav .ul1 .math p{padding: 15px;}
nav .ul1 .box:hover .text{top:30px;}
nav .ul1 .box:hover{box-shadow: 0 4px 30px #B2B2B2;}
</style>
</head>
<body>
<nav>
效果一
<ul class="ul1">
<li>
<div class="box">
<div class="text">
<p class="top">HTML+CSS基础教程</p>
<p class="content">8小时带领大家步步深入学习标签>613636人在学>613636人在学>613636人在学>613636人在学</p>
</div>
<div class="math"><p>613636人在学</p></div>
</div>
</li>
<li>
<div class="box">
<div class="text">
<p class="top">HTML+CSS基础教程</p>
<p class="content">8小时带领大家步步深入学习标签>613636人在学>613636人在学>613636人在学>613636人在学</p>
</div>
<div class="math"><p>613636人在学</p></div>
</div>
</li>
<li>
<div class="box">
<div class="text">
<p class="top">HTML+CSS基础教程</p>
<p class="content">8小时带领大家步步深入学习标签>613636人在学>613636人在学>613636人在学>613636人在学</p>
</div>
<div class="math"><p>613636人在学</p></div>
</div>
</li>
</ul>
</nav>
</body>
</html>
鼠标经过：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
