Other_3.仿-慕課網(wǎng)課程選項卡_效果1（上下伸縮）

2024-04-27 15:14:27

字體：大中小

供稿：網(wǎng)友

這是我過年在家無聊的時候自己做的一個仿-慕課網(wǎng)課程選項卡，也不知道有沒有人會看我的博客，就順便把代碼貼上吧。如果有寫得不好的話，也沒辦法了，水平有限。現(xiàn)在先說第一個效果，上下伸縮。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>仿-慕課網(wǎng)課程選項卡</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基礎(chǔ)教程</p><p class="content">8小時帶領(lǐng)大家步步深入學(xué)習(xí)標(biāo)簽>613636人在學(xué)>613636人在學(xué)>613636人在學(xué)>613636人在學(xué)</p></div><div class="math"><p>613636人在學(xué)</p></div></div> </li><li><div class="box"><div class="text"><p class="top">HTML+CSS基礎(chǔ)教程</p><p class="content">8小時帶領(lǐng)大家步步深入學(xué)習(xí)標(biāo)簽>613636人在學(xué)>613636人在學(xué)>613636人在學(xué)>613636人在學(xué)</p></div><div class="math"><p>613636人在學(xué)</p></div></div> </li><li><div class="box"><div class="text"><p class="top">HTML+CSS基礎(chǔ)教程</p><p class="content">8小時帶領(lǐng)大家步步深入學(xué)習(xí)標(biāo)簽>613636人在學(xué)>613636人在學(xué)>613636人在學(xué)>613636人在學(xué)</p></div><div class="math"><p>613636人在學(xué)</p></div></div> </li></ul></nav></body></html>

制作效果：