菜单 搜索
首页 前端知识 JQuery实现简单网页

JQuery实现简单网页

2024-02-09 20:02:26 前端知识 前端哥 771 245 我要收藏 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
    <style>
        ul {
            list-style: none;
        }
        
        .container-fluid {
            padding-left: 0px;
            padding-right: 0px;
        }
        
        .navbar-brand {
            padding: 0 15px;
        }
        
        .navbar-brand img {
            width: 80%;
        }
        
        .navbar {
            margin-bottom: 0px;
            background-color: #00152A;
            color: white;
            border-radius: 0px;
        }
        
        .navbar-nav {
            margin-left: 20%;
        }
        
        .dropdown-menu {
            background-color: #001529;
        }
        
        .dropdown-menu img {
            width: 20%;
            margin-right: 10px;
        }
        
        #banner img {
            width: 100%;
        }
        
        #Title h2 {
            text-align: center;
            margin: 80px 0;
        }
        
        .row {
            margin-left: 0px;
            margin-right: 0px;
            text-align: center;
        }
        
        .col-md-5 {
            height: 300px;
        }
        
        #footer {
            background-color: #6F7D96;
        }
        
        #footerLeft {
            border-right: 1px white solid;
            width: 60%;
            height: 100px;
            padding-top: 35px;
        }
        
        #footerRight {
            width: 40%;
            height: 100px;
            padding-top: 10px;
        }
        
        .row a {
            text-decoration: none;
            color: white;
        }
    </style>
</head>
 
<body>
    <div class="container-fluid">
        <nav class="navbar navbar-default navbar-inverse">
            <!-- <div class="container-fluid"> -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="./images/yyK9chi9HAaT5rrFSyk9zfwfqJOaOJV5lB3eDeZs5mu5KzZkwGXjoKvFNU78HQOmQRk4EdiYVYPk71ybn0JGMGAwfOJ3_aRqk_cm.png" alt=""></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">首页</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">产品 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#"><img src="./images/Z.jpg" alt=""> Egret Engine</a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/e_aKKIq8_MeeU63wXZ4DLr0Iuzue03aEO_EVJt8FooOktimIqXWDJCsNPtfMt9aLYOIQIyqx4c_n_L8R8BBgCviaVGB9UJ0AAAAA.png" alt=""> Egret Pro</a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/2Q__.jpg" alt=""> Egret Native</a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/2Q__ (1).jpg" alt=""> Egret UI Editor</a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/Z (1).jpg" alt=""> DragonBones</a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/9k_.jpg" alt=""> Lakeshore</a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/Z (2).jpg" alt=""> Egret Feather</a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/2Q__ (2).jpg" alt=""> Texture Merger</a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/9k_ (1).jpg" alt=""> Res Depot</a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/9k_ (2).jpg" alt=""> Egret Inspector</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">开发者中心</a></li>
                    <li><a href="#">案例</a></li>
                    <li><a href="#">社区</a></li>
                    <li><a href="#">关于我们</a></li>
                </ul>
            </div>
            <!-- </div> -->
        </nav>
        <div id="banner">
            <img src="./images/productbanner_d1b29a78268519f5d3e41b8147e89756.jpg" alt="">
        </div>
        <div id="Title">
            <h2>产品中心</h2>
        </div>
        <section class="row">
            <div class="col-md-5 col-xs-5 col-xs-offset-1 col-md-offset-1  ">
                <a href="#"><img src="./images/Z.jpg" alt=""></a>
                <div>
                    <h4>Egret Engine</h4>
                    <p>Egret Engine 是一款使用 TypeScript 编写的 HTML5 游戏引擎，包含渲染、声音、用户交互、资源管理等诸多功能
                    </p>
                </div>
                <div><button>了解更多</button></div>
            </div>
            <div class="col-md-5 col-xs-5 col-xs-offset-1 col-md-offset-1">
                <a href="#"><img src="./images/e_aKKIq8_MeeU63wXZ4DLr0Iuzue03aEO_EVJt8FooOktimIqXWDJCsNPtfMt9aLYOIQIyqx4c_n_L8R8BBgCviaVGB9UJ0AAAAA.png" alt=""></a>
                <div>
                    <h4>Egret Pro</h4>
                    <p>Egret Pro 是一款以游戏设计师为中心的游戏创作工具
                    </p>
                </div>
                <div><button>了解更多</button></div>
            </div>
            <div class="col-md-5 col-xs-5 col-xs-offset-1 col-md-offset-1">
                <a href="#"><img src="./images/2Q__.jpg" alt=""></a>
                <div>
                    <h4>Egret Native</h4>
                    <p>Egret Native 可以将白鹭引擎制作的游戏发布成原生项目，有完善的资源缓存策略和热更新机制。
                    </p>
                </div>
                <div><button>了解更多</button></div>
            </div>
            <div class="col-md-5 col-xs-5 col-xs-offset-1 col-md-offset-1">
                <a href="#"><img src="./images/2Q__ (1).jpg" alt=""></a>
                <div>
                    <h4>Egret UI Editor</h4>
                    <p>Egret UI Editor 是一款针对白鹭项目的可视化UI编辑器。
                    </p>
                </div>
                <div><button>了解更多</button></div>
            </div>
            <div class="col-md-5 col-xs-5 col-xs-offset-1 col-md-offset-1">
                <a href="#"><img src="./images/Z (1).jpg" alt=""></a>
                <div>
                    <h4>DragonBones</h4>
                    <p>DragonBones 是一款开源免费的移动游戏骨骼动画解决方案。
                    </p>
                </div>
                <div><button>了解更多</button></div>
            </div>
            <div class="col-md-5 col-xs-5 col-xs-offset-1 col-md-offset-1">
                <a href="#"><img src="./images/9k_.jpg" alt=""></a>
                <div>
                    <h4>Lakeshore</h4>
                    <p>Lakeshore 是一款免费无需编程的游戏创作工具，通过Lakeshore可以轻松实现自己的游戏创作梦想。
                    </p>
                </div>
                <div><button>了解更多</button></div>
            </div>
            <div class="col-md-5 col-xs-5 col-xs-offset-1 col-md-offset-1">
                <a href="#"><img src="./images/Z (2).jpg" alt=""></a>
                <div>
                    <h4>Egret Feather</h4>
                    <p>Egret Feather 是一款粒子编辑器，各个参数的组合塑造千变万化的效果，为游戏添姿添彩。
                    </p>
                </div>
                <div><button>了解更多</button></div>
            </div>
            <div class="col-md-5 col-xs-5 col-xs-offset-1 col-md-offset-1">
                <a href="#"><img src="./images/2Q__ (2).jpg" alt=""></a>
                <div>
                    <h4>Texture Merger</h4>
                    <p>Texture Merger 是一款纹理集打包工具，能批量将零散碎图合并为大图纹理集，提升游戏性能。
                    </p>
                </div>
                <div><button>了解更多</button></div>
            </div>
            <div class="col-md-5 col-xs-5 col-xs-offset-1 col-md-offset-1">
                <a href="#"><img src="./images/9k_ (1).jpg" alt=""></a>
                <div>
                    <h4>Res Depot</h4>
                    <p>Res Depot 是 Egret 游戏的可视化资源管理工具，能够轻松高效地管理海量游戏素材和配置文件资源。
                    </p>
                </div>
                <div><button>了解更多</button></div>
            </div>
            <div class="col-md-5 col-xs-5 col-xs-offset-1 col-md-offset-1">
                <a href="#"><img src="./images/9k_ (2).jpg" alt=""></a>
                <div>
                    <h4>Egret Inspector</h4>
                    <p>Egret Inspector 是一款供 Chrome 开发者使用的插件，能够帮助开发者可视化地调试 Egret 项目。
                    </p>
                </div>
                <div><button>了解更多</button></div>
            </div>
        </section>
        <div id="footer" class="row">
            <div id="footerLeft" class="col-md-7 col-sm-12">
                <ul class="nav navbar-nav ">
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">产品下载</a></li>
                    <li><a href="#">技术支持</a></li>
                    <li><a href="#">加入我们</a></li>
                </ul>
            </div>
            <div id="footerRight" class="col-md-5 col-sm-12">
                <ul>
                    <li><a href="#">技术支持：support@egret.com</a></li>
                    <li><a href="#">官方技术客服微信号：egretengine</a></li>
                    <li><a href="#">市场合作：marketing@egret.com</a></li>
                    <li><a href="#">商务合作：bd@egret.com</a></li>
                </ul>
            </div>
        </div>
 
 
 
 
        <script src="js/jquery-3.6.0.js"></script>
        <script src="bootstrap/js/bootstrap.js"></script>
 
 
</body>
 
</html>
复制

效果图：

 

 

转载请注明出处或者链接地址：https://www.qianduange.cn//article/1641.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

css3之animation 提交按钮简单的动画

2024-02-23 11:02:53

css3实现页面元素抖动效果

2024-02-23 11:02:53

CSS样式变换效果及动画

2024-02-23 11:02:51

实现 抽屉效果 css3

2024-02-23 11:02:47

纯CSS，利用before、after伪元素实现的几种链接hover效果一：旋转下划线加链接文字上闪效果

2024-02-23 11:02:46

【jQuery】如何在页面初始化时，默认选中指定值的单选按钮

2024-02-23 11:02:13

xhr、jQuery、axios、fetch、vue-resource简单了解和对比

2024-02-23 11:02:11

基于javaweb mysql的jsp servlet美食商城管理系统(java jsp bootstrap jquery mysql)

2024-02-23 11:02:04

jQuery (JavaScript)进阶使用

2024-02-23 11:02:59

CSS样式

2024-02-23 11:02:49

广告位招租：QQ85750956
大家推荐的文章
1

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
2

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
3

移动端css布局大全

2024-02-06 15:02:421000
4

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
5

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
6

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
7

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
8

尚硅谷css3笔记

2024-02-13 10:02:44998
9

如何利用浏览器测试跨域

2024-02-11 10:02:28998
10

【JS逆向】某麻将游戏数据生成JS加密逆向分析探索！

2024-02-22 10:02:34997

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！