html下拉列表+网页更换背景实现的换肤功能

最新推荐文章于 2024-03-01 15:59:57 发布

原创最新推荐文章于 2024-03-01 15:59:57 发布 · 1.3k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

html 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用HTML和JS创建一个具备可更换壁纸功能的静态登录页面。通过添加按钮图标和背景图片，并利用JavaScript控制显示与隐藏下拉菜单及更换壁纸。

利用之前做的登陆页面：用html实现一个静态登陆页面-可根据需求更改样式

一、准备按钮图标和背景图片

按钮图标我们去inconfont上找一个自己喜欢的，iconfont上可以找到各种适应于自己项目的小图标，很推荐使用。下载图片放入到自己能通过路径访问到的地方（我这里为了方便就直接放入到网页文件同一目录当中）。
壁纸需要用于更换的下载自己喜欢的壁纸就行了。
在这里插入图片描述

二、页面中加入可更换壁纸的下拉列表

我们在页面的右上角放上一个图片按钮用于打开我们的下拉列表。
在没有点击按钮之前，下拉列表是隐藏的，有需要用到display:none这个样式，在点击之后，利用js将display:none这个样式取消掉。
效果如下：
在这里插入图片描述

代码如下：

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style-type: none;
        }

        body {
            background: url('./bgc1.png') no-repeat;
            background-size: 100%;
            font-family: '宋体';
        }

        a {
            text-decoration: none;
        }

        .login {
            width: 500px;
            height: 300px;
            background-color: rgba(150,143,172,0.3);
            margin: 150px 100px;
            text-align: center;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 2px 2px 5px #000; /*阴影效果*/
        }

        .fstInput, .sndInput {
            width: 250px;
            height: 25px;
            color: rgb(61,54,64);
            text-align: center;
            outline: none;
            margin: 15px;
            background-color: rgba(0, 0, 0, 0.0);
            border: 0;
            border-bottom: 2px solid black;
            transition: 1s; /*宽度变化的过度时间*/
        }

        /* 过度动画，点击输入账号密码框之后会使输入框的下边框扩大 */
        .fstInput:focus, .sndInput:focus {
            width: 300px;
            border-bottom: 2px solid gray;
        }

        .register {
            display: block;
            margin-top: 10px;            
        }

        .btn {
            width: 100px;
            height: 30px;
            border-radius: 15px;
            border: 0;
            background-color: rgb(153,139,152);
        }

        .changeWallpaper {
            position: fixed;
            right: 0;
            top: 0;
        }

        .changeWallpaper .img-open-ul img{
            width: 35px;
            height: 35px;
            position: fixed;
            right: 0;
        }
        
        .changeWallpaper .ul {
            margin-top: 40px;
            /* display: none; */
            transition: 0.5s;
            
        }

        .changeWallpaper ul li img{
            width: 200px;
            height: 100px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="changeWallpaper">
        <div class="img-open-ul">
            <img src="./wallpaper.png" alt="" onclick="openChange()">
        </div>
        <div class="ul" style="display: none;">
            <ul>
                <li><img onclick="changePaper(0)" src="bgc.png" alt=""></li>
                <li><img onclick="changePaper(1)" src="bgc1.png" alt=""></li>
                <li><img onclick="changePaper(2)" src="bgc2.png" alt=""></li>
                <li><img onclick="changePaper(3)" src="bgc3.png" alt=""></li>
            </ul>
        </div>
    </div>
    <div class="login">
        <form action="">
            <h2>遇事不决，可问春风</h2>
            <span><input class="fstInput" type="text" placeholder="请输入账号"></span><br>
            <span><input class="sndInput" type="password" placeholder="请输入密码"></span><br>
            <span class="register">还没有账号？<a href="">立即注册</a></span><br>
            <span><input class="btn" type="button" value="登陆"></span>
        </form>
    </div>

    <script>
        var images = ["./bgc.png", "./bgc1.png", "./bgc2.png", "./bgc3.png"]
        function openChange() {

            var ul = document.querySelector(".ul");
            if (ul.style.display === "none") {
                ul.style.display = ""
            } else {
                ul.style.display = "none"
            }
            
        }

        function changePaper(index) {
            document.body.style.cssText =  'background: url(' + this.images[index] + ') no-repeat; background-size: 100%; font-family: ' + '宋体;'
        }
    </script>
</body>
</html>

三、问题说明

在使用js代码来控制样式时，例如document.body.style.background = …
这样修改的样式会是行内样式，定义在body {} 里面的样式没有被修改，行内样式优先级大于类样式，当两种样式同时带有url时，会优先使用行内样式，所以我最后选择使用document.body.style.cssText，来直接把body所携带的样式的内容全部修改。以便产生不必要的麻烦。