登录  /  注册
首页 > 博客列表 > 仿造PHP中文网首页样式布局-2019年1月25日
博主信息
博文 44
粉丝 0
评论 0
访问量 34436
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
仿造PHP中文网首页样式布局-2019年1月25日
的博客
原创
516人浏览过

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录