这是我过年在家无聊的时候自己做的一个仿-慕课网课程选项卡，也不知道有没有人会看我的博客，就顺便把代码贴上吧。如果有写得不好的话，也没办法了，水平有限。现在先说第一个效果，上下伸缩。
<!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>
制作效果：鼠标经过：
新闻热点
疑难解答
