![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/layui/css/layui.css">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<script src="static/layui/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Document</title>
<style>
*{margin: 0px;padding: 0px;}
body{background: #f3f5f7;}
.layui-this{background: #363c41;}
a{text-decoration: none;}
.header_logo a{background-image: url(http://www.php.cn/static/images/logo.png);display: block;height: 60px;width:140px;background-size: 100%}
.container{width: 1200px;margin-top:30px;}
.menu-list li{color: #ccc;height: 60px;font-size: 16px;cursor: pointer;padding-left: 30px;line-height: 60px;}
.banne-top li{float: left;height: 60px;line-height: 60px;margin-right: 30px;font-size: 16px;}
#diy-vodeo li *{border-radius: 8px;width: 217px;color: black;text-decoration:none;text-align: center;}
#diy-vodeo li {height: 172px;width: 217px;float: left;margin-left: 10px;box-shadow: 0 5px 10px 0 rgba(0,0,0,0.1);position: relative;margin-bottom: 20px;}
</style>
</head>
<body>
<div class="container-fluid" style="height:60px;background: black">
<div class="layui-col-md3 header_logo" style="height:60px;">
<a href=""></a>
</div>
<ul class="layui-nav" lay-filter="" style="background: black;width: 900px;position: absolute;left: 170px;;">
<li class="layui-nav-item layui-this"><a href="">首页</a></li>
<li class="layui-nav-item"><a href="">视频教程</a></li>
<li class="layui-nav-item"><a href="">社区问答</a></li>
<li class="layui-nav-item"><a href="">技术文章</a></li>
<li class="layui-nav-item"><a href="">编程词典</a></li>
<li class="layui-nav-item"><a href="">特色课程</a></li>
<li class="layui-nav-item"><a href="">菜鸟学堂</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
</div>
<div class="container " style="height:510px;margin-top:30px;background-color:#fff;border-radius:8px;box-shadow:0 12px 24px 0 rgba(7,17,27,0.2);padding: 0px;">
<div class="layui-row">
<div class="layui-col-md2">
<div class="layui-col-md12" style="background-color:#2b333b;width:216px;height:510px;z-index: 2;border-radius:8px 0px 0px 8px;">
<ul class="menu-list" style="padding:15px 0px;">
<li>php开发</li>
<li>前端开发</li>
<li>服务端开发</li>
<li>移动开发</li>
<li>数据库</li>
<li>服务器运维</li>
<li>在线工具箱</li>
<li>常用类库</li>
</ul>
</div>
</div>
<div class="layui-col-md10">
<div class="layui-row">
<div class="layui-col-md12">
<ul class="banne-top" style="margin-left:50px;position: absolute;">
<li>PHP头条</li>
<li>独孤九剑</li>
<li>学习路线</li>
<li>在线工具</li>
<li>趣味课堂</li>
<li>社区问答</li>
<li>课程直播</li>
<div style="height:40px;width:260px;background: #f1f0f0;position: relative;left: 660px;top:10px;"></div>
</ul>
</div>
<div class="layui-row">
<div class="layui-col-md12" style="width:1000px;top:60px;">
<div class="layui-carousel" id="test1">
<div carousel-item>
<div><img src="http://www.php.cn/static/images/banner.jpg" alt=""></div>
<div><img src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""></div>
<div><img src="https://img.php.cn/upload/article/000/000/003/5b49b0e610f26951.jpg" alt=""></div>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div style="margin-top:60px;padding: 10px 30px;">
<div class="layui-col-md3"><img src="http://www.php.cn/static/images/index_yunv.jpg" alt=""></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<img src="http://www.php.cn/static/images/index_ad222.jpg" alt="" style="border-radius:8px;">
</div>
</div>
<div class="container" style="height:646px;background-color:white;border-radius: 8px;">
<div class="layui-row">
<h4 style="text-align: center;padding:20px; ">php入门精品课程</h3>
</div>
<div class="layui-row">
<div class="layui-col-md12">
<ul id="diy-vodeo">
<li style="height:362px;width:217px;"><img src="http://www.php.cn/static/images/index_learn_first.jpg" alt=""></li>
<li style="border-radius: 8px;"><a href="">
<img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<div class="intro" style="height:42px;background:white;position: absolute;top:90px;padding-top: 15px;">编程学习方法分析直播公益课</div>
<div style="height:40px;background:white;color:#ccc;font-size:12px;text-align: left;position: absolute;top: 132px;padding: 0px 20px;">8648人在看</div>
</a></li>
<li style="border-radius: 8px;"><a href="">
<img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<div class="intro" style="height:42px;background:white;position: absolute;top:90px;padding-top: 15px;">编程学习方法分析直播公益课</div>
<div style="height:40px;background:white;color:#ccc;font-size:12px;text-align: left;position: absolute;top: 132px;padding: 0px 20px;">8648人在看</div>
</a></li>
<li style="border-radius: 8px;"><a href="">
<img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<div class="intro" style="height:42px;background:white;position: absolute;top:90px;padding-top: 15px;">编程学习方法分析直播公益课</div>
<div style="height:40px;background:white;color:#ccc;font-size:12px;text-align: left;position: absolute;top: 132px;padding: 0px 20px;">8648人在看</div>
</a></li>
<li style="border-radius: 8px;"><a href="">
<img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<div class="intro" style="height:42px;background:white;position: absolute;top:90px;padding-top: 15px;">编程学习方法分析直播公益课</div>
<div style="height:40px;background:white;color:#ccc;font-size:12px;text-align: left;position: absolute;top: 132px;padding: 0px 20px;">8648人在看</div>
</a></li>
<li style="border-radius: 8px;"><a href="">
<img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<div class="intro" style="height:42px;background:white;position: absolute;top:90px;padding-top: 15px;">编程学习方法分析直播公益课</div>
<div style="height:40px;background:white;color:#ccc;font-size:12px;text-align: left;position: absolute;top: 132px;padding: 0px 20px;">8648人在看</div>
</a></li>
<li style="border-radius: 8px;"><a href="">
<img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<div class="intro" style="height:42px;background:white;position: absolute;top:90px;padding-top: 15px;">编程学习方法分析直播公益课</div>
<div style="height:40px;background:white;color:#ccc;font-size:12px;text-align: left;position: absolute;top: 132px;padding: 0px 20px;">8648人在看</div>
</a></li>
<li style="border-radius: 8px;"><a href="">
<img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<div class="intro" style="height:42px;background:white;position: absolute;top:90px;padding-top: 15px;">编程学习方法分析直播公益课</div>
<div style="height:40px;background:white;color:#ccc;font-size:12px;text-align: left;position: absolute;top: 132px;padding: 0px 20px;">8648人在看</div>
</a></li>
<li style="border-radius: 8px;"><a href="">
<img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<div class="intro" style="height:42px;background:white;position: absolute;top:90px;padding-top: 15px;">编程学习方法分析直播公益课</div>
<div style="height:40px;background:white;color:#ccc;font-size:12px;text-align: left;position: absolute;top: 132px;padding: 0px 20px;">8648人在看</div>
</a></li>
<li style="border-radius: 8px;"><a href="">
<img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<div class="intro" style="height:42px;background:white;position: absolute;top:90px;padding-top: 15px;">编程学习方法分析直播公益课</div>
<div style="height:40px;background:white;color:#ccc;font-size:12px;text-align: left;position: absolute;top: 132px;padding: 0px 20px;">8648人在看</div>
</a></li>
<li style="border-radius: 8px;"><a href="">
<img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<div class="intro" style="height:42px;background:white;position: absolute;top:90px;padding-top: 15px;">编程学习方法分析直播公益课</div>
<div style="height:40px;background:white;color:#ccc;font-size:12px;text-align: left;position: absolute;top: 132px;padding: 0px 20px;">8648人在看</div>
</a></li>
<li style="border-radius: 8px;"><a href="">
<img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<div class="intro" style="height:42px;background:white;position: absolute;top:90px;padding-top: 15px;">编程学习方法分析直播公益课</div>
<div style="height:40px;background:white;color:#ccc;font-size:12px;text-align: left;position: absolute;top: 132px;padding: 0px 20px;">8648人在看</div>
</a></li>
<li style="border-radius: 8px;"><a href="">
<img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<div class="intro" style="height:42px;background:white;position: absolute;top:90px;padding-top: 15px;">编程学习方法分析直播公益课</div>
<div style="height:40px;background:white;color:#ccc;font-size:12px;text-align: left;position: absolute;top: 132px;padding: 0px 20px;">8648人在看</div>
</a></li>
<li style="border-radius: 8px;"><a href="">
<img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<div class="intro" style="height:42px;background:white;position: absolute;top:90px;padding-top: 15px;">编程学习方法分析直播公益课</div>
<div style="height:40px;background:white;color:#ccc;font-size:12px;text-align: left;position: absolute;top: 132px;padding: 0px 20px;">8648人在看</div>
</a></li>
</ul>
</div>
</div>
</div>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//…
});
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
,width: '100%' //设置容器宽度
,height: '330px' //设置容器宽度
,arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
});
$("#diy-vodeo>li>a").hover(function () {
// over
$(this).find(".intro").stop().animate({
height: "90px",
top:"40px"
}, 500 );
}, function () {
// out
$(this).find(".intro").stop().animate({
height: "42px",
top:"90px"
}, 500 );
}
);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
