Other_3.仿-慕课网课程选项卡_效果1（上下伸缩）
2017-02-08 15:19
323 查看
这是我过年在家无聊的时候自己做的一个仿-慕课网课程选项卡，也不知道有没有人会看我的博客，就顺便把代码贴上吧。如果有写得不好的话，也没办法了，水平有限。现在先说第一个效果，上下伸缩。
<!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>
制作效果：
鼠标经过：
<!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>
制作效果：
鼠标经过：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js插件 回到顶部效果（参考慕课网York老师相关课程）
- Other_1.利用JS伸缩变动导航栏宽度的效果。
- Other_2.利用JQ伸缩变动导航栏宽度的效果。
- 慕课网课程学习--信息排列效果
- Tab选项卡切换效果，mooc教程
- css实现内容上下左右居中的效果
- yahoo首页伸缩效果代码
- javascript图片文字上下滚动效果
- JS实现图片滚动（无缝、平滑、上下左右滚动）效果
- 轻松实现jquery选项卡切换效果
- 键盘弹出和消失View的上下移动效果
- js选项卡切换效果
- JS+Flash图片轮换/切换--上下滑动效果
- 阻尼效果总结（上下左右拉动橡皮筋效果）
- Android ObjectAnimator 无限循环播放，实现上下左右浮动效果
- 一个简单的网页选项卡效果菜单
- JavaScript 无缝上下左右滚动加定高定宽停顿效果javascript
- 首页通知上下翻滚效果的实现
- 自定义布局实现左右或者上下翻页效果（借助Scroller类）
- 【备忘】2017年最新JAVA-ACE-架构师系列视频课程- RocketMQ（上下集）下载