web前端期末项目——HTML+CSS+JavaScript+jQuery+Bootstrap 瑞鹏宠物医院

最新推荐文章于 2024-06-21 19:24:17 发布

Mosquito.655

最新推荐文章于 2024-06-21 19:24:17 发布

阅读量558

点赞数 21

文章标签： html5 javascript jquery css bootstrap

本文链接：https://blog.csdn.net/qq_75060875/article/details/136006902

版权

一、作品介绍

网站功能基本齐全，10个页面构成，由HTML5+CSS+Bootstrap进行排版，JavaScript和jQuery实现动画的效果，符合大学生期末项目的基本要求（本大学生亲自制作）。

页面分为首页、登陆、全部宠物、宠物领养、宠物商城、养宠知识、关于我们、心得总结、企业资讯和在线咨询10个页面。

二、网页效果

这里仅展示部分页面效果

首页

全部宠物页面

登陆页面

宠物领养界面

养宠知识界面

三、网页代码

分类都是分好der

登陆界面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="js/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/denglu.css"/>
        <title>登陆</title>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light custom-navbar">
            <a class="navbar-brand" href="#">瑞鹏宠物医院</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item  mr-5">
                        <a class="nav-link" href="index.html">首页 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item mr-5">
                        <a class="nav-link" href="all.html">全部宠物</a>
                    </li>
                    <li class="nav-item mr-5">
                        <a class="nav-link" href="lingyang.html">宠物领养</a>
                    </li>
                    <li class="nav-item mr-5">
                        <a class="nav-link" href="shangcheng.html">宠物商城</a>
                    </li>
                    <li class="nav-item mr-5">
                        <a class="nav-link" href="zhishi.html">养宠知识</a>
                    </li>
                    <li class="nav-item mr-5">
                        <a class="nav-link" href="guanyu.html">关于我们</a>
                    </li>
                    <li class="nav-item mr-5">
                        <a class="nav-link" href="xinde.html">心得体会</a>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-5" id="xiaogou">
                    <img src="images/BG1.jpg" class="xiaogou" alt="Logo Image">
                </div>
                <div class="col-md-7">
                    <div class="card p-4">
                        <img src="images/logo.png" class="logo">
                        <form id="loginForm" onsubmit="return validateLoginForm()">
                            <div class="form-group">
                                <label for="loginAccount">账号：</label>
                                <input type="text" class="form-control" id="loginAccount" placeholder="Enter your account">
                                <small id="loginAccountError" class="error-message"></small>
                            </div>
                            <div class="form-group">
                                <label for="loginPassword">密码:</label>
                                <input type="password" class="form-control" id="loginPassword" placeholder="Enter your password">
                                <small id="loginPasswordError" class="error-message"></small>
                            </div>
                            <input type="checkbox" value="forget">忘记密码<br><br>
                            <button type="submit" class="btn btn-primary btn-block">登陆</button>
                            <br>
                            <p>其他登陆方式</p>
                            <a href="#"><img src="images\qq.png" id="one">QQ登陆</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="#"><img src="images\wx.png" id="one">微信登陆</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="#">验证码登陆</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <script src="js/jquery-3.6.1.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            function validateLoginForm() {
                var account = document.getElementById('loginAccount').value;
                var password = document.getElementById('loginPassword').value;
                var valid = true;
                if (!account) {
                    document.getElementById('loginAccountError').innerText = '请输入账号';
                    valid = false;
                } else {
                    document.getElementById('loginAccountError').innerText = '';
                }
                if (!password) {
                    document.getElementById('loginPasswordError').innerText = '请输入密码';
                    valid = false;
                } else {
                    document.getElementById('loginPasswordError').innerText = '';
                }
                if (valid) {
                    alert("登陆成功");
                    window.location.href = 'index.html';
                }
                return false;
            }
        </script>
    </body>
</html>

四、了解更多

对我的网页有兴趣的可以私信我，这个源码定价6元（相当于买个蜜雪喝喝），有哪不懂的也可以问我，这里也可以提供答辩的word文档以及PPT，具体的功能实现原理在word里写的也比较详细。

Mosquito.655

关注

21
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
web前端期末项目——HTML+CSS+JavaScript+jQuery+Bootstrap 瑞鹏宠物医院

网站功能基本齐全，10个页面构成，由HTML5+CSS+Bootstrap进行排版，JavaScript和jQuery实现动画的效果，符合大学生期末项目的基本要求（本大学生亲自制作）。页面分为首页、登陆、全部宠物、宠物领养、宠物商城、养宠知识、关于我们、心得总结、企业资讯和在线咨询10个页面。
复制链接

扫一扫