用Python制作的一个十分有趣的网站

最新推荐文章于 2024-08-27 14:29:58 发布

bicart

最新推荐文章于 2024-08-27 14:29:58 发布

阅读量425

点赞数 7

文章标签： css html javascript python 人工智能开发语言计算机视觉

本文链接：https://blog.csdn.net/bicart/article/details/135538898

版权

本文使用创作助手。

这一个网站不仅介绍了bicart，而且具有一个彩蛋页面。并且具有登录和注册界面。并且它具有背景颜色，背景图片和背景音乐。而且具有图片轮换功能。并且还具有菜单导航功能。

index.html 文件：


<!DOCTYPE html>
<html>
<head>
    <title>Bicart介绍</title>
    <style>
        body {
            background-color: #f5f5f5;
            background-image: url("/static/background_image.jpg");
            background-size: cover;
            background-position: center;
        }

        .nav {
            background-color: #333;
            overflow: hidden;
        }

        .nav a {
            float: left;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }

        .nav a:hover {
            background-color: #ddd;
            color: black;
        }

        .slideshow-container {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
        }

        .mySlides {
            display: none;
        }

        .mySlides img {
            width: 100%;
            height: auto;
        }

        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
        }

        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        .prev:hover, .next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        .dot-container {
            text-align: center;
        }

        .dot {
            height: 10px;
            width: 10px;
            margin: 0 4px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        .active {
            background-color: #717171;
        }
    </style>
    <script>
        var slideIndex = 0;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");

        function showSlides() {
            var i;
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slideIndex++;
            if (slideIndex > slides.length) {
                slideIndex = 1;
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active";
            setTimeout(showSlides, 3000);
        }

        function currentSlide(n) {
            slideIndex = n;
            showSlides();
        }
    </script>
</head>
<body onload="showSlides()">
    <div class="nav">
        <a href="/">Home</a>
        <a href="/login">Login</a>
        <a href="/register">Register</a>
    </div>

    <h1>Welcome to Bicart</h1>
    <div class="slideshow-container">
        <div class="mySlides">
            <img src="/static/image1.jpg">
        </div>
        <div class="mySlides">
            <img src="/static/image2.jpg">
        </div>
        <div class="mySlides">
            <img src="/static/image3.jpg">
        </div>

        <a class="prev" onclick="currentSlide(slideIndex - 1)">&#10094;</a>
        <a class="next" onclick="currentSlide(slideIndex + 1)">&#10095;</a>
    </div>

    <div class="dot-container">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
    </div>

    <a href="/easter_egg">Easter Egg</a>
</body>
</html>

easter_egg.html 文件：

<!DOCTYPE html>
<html>
<head>
    <title>Bicart - 漂流瓶</title>
    <style>
        body {
            background-color: #f5f5f5;
            background-image: url("/static/easter_egg_background.jpg");
            background-size: cover;
            background-position: center;
        }

        .easter-egg-container {
            text-align: center;
            margin-top: 100px;
        }

        .easter-egg-container h2 {
            color: white;
            font-size: 36px;
            font-weight: bold;
        }

        .easter-egg-container p {
            color: white;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="easter-egg-container">
        <h2>漂流瓶</h2>
        <p>这是一个彩蛋界面。</p>
    </div>
</body>
</html>

这样，当您在主页点击 "Easter Egg" 按钮时，将跳转到 /easter_egg 路由，并显示漂流瓶的界面。

<!DOCTYPE html>
<html>
<head>
    <title>Register</title>
</head>
<body>
    <h3>Register</h3>
    <form action="/register" method="POST">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
</head>
<body>
    <h3>Login</h3>
    <form action="/login" method="POST">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

bicart

关注

7
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
用Python制作的一个十分有趣的网站

这一个网站不仅介绍了bicart，而且具有一个彩蛋页面。并且具有登录和注册界面。并且它具有背景颜色，背景图片和背景音乐。而且具有图片轮换功能。并且还具有菜单导航功能。这样，当您在主页点击 "Easter Egg" 按钮时，将跳转到路由，并显示漂流瓶的界面。
复制链接

扫一扫