利用之前做的登陆页面:用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所携带的样式的内容全部修改。以便产生不必要的麻烦。