HTML+CSS+JS 实现登录注册界面

文章目录

    • 案例一 滑动样式
    • 案例二 滑动样式
    • 案例三 动态样式
    • 案例四 普通样式
    • 案例五 滑动样式
    • 案例六 普通样式
    • 具体怎么获取呢？

案例一 滑动样式

login.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Login</title><link rel="stylesheet" href="default.css">
</head>
<body>
<div class="page"><div class="panel"><div class="panel_visible"><!--注册表单--><div class="panel_content"><h1 class="panel_title">  Sign Up </h1><form class="form"><label class="form_label" for="username">Username</label><input class="form_input" type="text" id="username" name="username"><label class="form_label" for="password">Password</label><input class="form_input " type="password" id="password" name="password"><label class="form_label" for="truename">True Name</label><input class="form_input" type="text" id="truename" name="fullname"><button class="form_btn" type="button" value="Submit">Submit</button><button class="form_toggle js-formToggle" type="button">Or, Sign In</button></form></div><!--登录表单--><div class="panel_content panel_content-overlay js-panel_content "><h1 class="panel_title">  Sign In </h1><form class="form"><label class="form_label" for="usernameIn">Username</label><input class="form_input" type="text" id="usernameIn" name="usernameIn"><label class="form_label" for="passwordIn">Password</label><input class="form_input " type="password" id="passwordIn" name="passwordIn"><button class="form_btn" type="button" value="Submit">Sign In</button><br><button class="form_toggle js-formToggle" type="button">Or, Sign Up</button></form></div></div><div class="panel_back js-imageAnimate"><img class="panel_img" src="login.jpg" style="width: 235px;height: 457px"  /></div></div></div>
<script src="main.js"></script>
</body>
</html>

main.js

var toggleBtns = document.querySelectorAll('.js-formToggle');
for(var i = 0; i < toggleBtns.length; i++){toggleBtns[i].addEventListener("click",toggleForm);
}var firstClick = true;function toggleForm(){if(!firstClick){document.querySelector('.js-imageAnimate').classList.toggle("animate");document.querySelector('.js-imageAnimate').classList.toggle("animateOut");document.querySelector('.js-panel_content').classList.toggle("animate");document.querySelector('.js-panel_content').classList.toggle("animateOut");}else{firstClick = false;document.querySelector('.js-imageAnimate').classList.add("animate");document.querySelector('.js-panel_content').classList.add("animate");}
}

背景图：


default.css

body, html{font-family: Ariel, sans-serif;width:100%;height:100%;margin:0;padding:0;display:inline-block;
}
.page{display:flex;flex-flow:row;flex-wrap:nowrap;align-items:center;justify-content:center;width:100%;height:100%;background-color: #0f95b0;
}
.panel{display:inline-block;position:relative;
}.panel_visible{position:relative;overflow: hidden;
}
.panel_title{margin-top: .5em;margin-bottom: 1.2em;
}.panel_content{padding: 20px;background-color: white;z-index:10;position:relative;
}
.panel_content-overlay{position:absolute;top:0;left:100%;height:100%;
}.panel_content.animate{animation: movePanel 2s forwards ;
}@keyframes movePanel{0%, 30%{transform: translateX(0%);}35%, 100%{transform: translateX(-100%);}}
.panel_content.animateOut{animation: movePanelOut 2s forwards ;
}
@keyframes movePanelOut{0%, 30%{transform: translateX(-100%);}35%, 100%{transform: translateX(0%);}
}
.panel_back{position:absolute;z-index:0;top:50%;left: 0;width:110%;transform: translate(70%,-50%);
}.panel_back.animate{animation: move 2s forwards ;
}@keyframes move{
0%{transform: translate(70%,-50%);z-index:0;
}
15%{transform: translate(140%,-50%);z-index:10;
}
75%{transform: translate(-120%,-50%);z-index:10;
}
100%{transform: translate(-50%,-50%);z-index:0;
}
}
.panel_back.animateOut{transform: translate(-50%,-50%);animation: moveOut 2s forwards ;
}
@keyframes moveOut{
0%{transform: translate(-50%,-50%);z-index:0;
}
15%{transform: translate(-120%,-50%);z-index:10;
}
75%{transform: translate(140%,-50%);z-index:10;
}
100%{transform: translate(70%,-50%);z-index:0;
}}
.panel_img{width:100%;display:block;
}/* Form */
.form{box-sizing:border-box;
}
.form_label{display:block;color: #3D3D3D;font-weight: 600;margin-bottom: 5px;
}
.form_input{border-radius: 3px;background-color: #f2f2f2 ;box-shadow: 0px 2px 2px #D6D6D6;border:none;padding: 2%;margin-bottom: 15px;width: 250px;box-sizing:border-box;position:relative;
}
.form_input:focus{box-shadow: none;outline-color: #0f95b0;
}.form_input::after{/*   TODO: make this after portion work */content: "👁️";position:absolute;top: 0;left: 0;height: 50px;width: 50px;background-color: red;
}
.form_btn{margin-top: 1.2em;margin-bottom: 2em;display:block;width:100%;background-color: #0f95b0;color: white;border:none;padding: .6em;text-transform: uppercase;font-weight: 500;font-size: 1.1em;border-radius: 3px;cursor: pointer;
}.form_toggle{background-color: transparent;border: none;padding: 0;margin:0;font-size: 1.1em;box-sizing: border-box;border-bottom: 1px solid transparent;cursor: pointer;
}
.form_toggle:hover{border-bottom: 1px solid #0f95b0;
}
.form_toggle:focus{outline: none;border-bottom: 1px solid #0f95b0;
}

效果图：
在这里插入图片描述在这里插入图片描述

案例二 滑动样式

style.css

*{padding: 0;margin:0;box-sizing: border-box;font-family: 'Poppins',sans-serif;
}/* 设置整个表单参数 (父盒子)*/section {position: relative;min-height: 100vh;background: lightblue;display: flex;justify-content: center;align-items: center;padding: 20px;
}section .container {position: relative;width: 800px;height: 500px;background: #fff;box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);overflow: hidden;
}section .container .user{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;
}/* 更改图片  （左侧）*/
section .container .imgBx{position: relative;width: 50%;height: 100%;/* background: #fff; */transition: .5s;
}section .container .user .imgBx img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;
}/* 右侧表单盒子 */section .container .user .formBx {position: relative;width: 50%;height: 100%;background: #fff;display: flex;justify-content: center;align-items: center;padding: 40px;transition: .5s;
}/* h2 */section .container .user .formBx form h2{font-size: 18px;font-weight: 600;text-transform: uppercase;/*大小*/letter-spacing: 2px;/* 间距*/text-align: center;width: 100%;margin-bottom: 10px;color: #555;
}/* 表单文字属性 */section .container .user .formBx form input{position: relative;width: 100%;padding: 10px;background: #f5f5f5;color: #333;border: none;outline:none;box-shadow:none;margin: 8px 0;font-size: 14px;letter-spacing:1px;font-weight: 300;
}/* 为登录设置样式 */section .container .user .formBx form input[type="submit"]{max-width: 100px;background: #677eff;color:#fff;cursor:pointer;font-size: 14px;font-weight: 500;letter-spacing: 1px;transition: .5s;
} /* 没有账号时 */section .container .user .formBx form .signup{position: relative;margin-top: 20px;font-size: 12px;letter-spacing: 1px;color: #555;text-transform: uppercase;font-weight: 300;
}section .container .user .formBx form .signup a{font-weight: 600;text-decoration: none;color: #677eff;
}
section .container .singupBx {pointer-events: none;
}section .container.active .singupBx {pointer-events: initial;
}section .container .singupBx .formBx {left: 100%;
}section .container.active .singupBx .formBx {left: 0;
}section .container .singupBx .imgBx {left: -100%;
}section .container.active .singupBx .imgBx {left: 0;
}section .container .singinBx .formBx {left: 0;
}section .container.active .singinBx .formBx {left: 100%;
}section .container .singinBx .imgBx {left: 0;
}section .container.active .singinBx .imgBx {left: 100%;
}@media (max-width: 991px) {section .container {max-width: 400px;}section .container .imgBx {display: none;}section .container .user .formBx {width: none;}
}

First.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录</title><link rel="stylesheet" href="css/style.css"><link rel="shortcut icon" href="img/favicon.ico">
</head>
<body><section><!-- 登录 --><div class="container"><div class="user singinBx"><div class="imgBx"><img src="img/1.jpg" alt=""></div><div class="formBx"><form action=""><h2>登录</h2><input type="text" name="" placeholder="用户名"><input type="password" name="" placeholder="密码"><input type="submit" name="" value="登录"><p class="signup">没有账号？<a href="#" onclick="topggleForm();">注册</a></p></form></div></div><!-- 注册 --><div class="user singupBx"><div class="formBx"><form action=""><h2>注册</h2><input type="text" name="" placeholder="用户名"><input type="email" name="" placeholder="邮箱地址"><input type="password" name="" placeholder="密码"><input type="password" name="" placeholder="再次输入密码"><input type="submit" name="" value="注册"><p class="signup">已有账号？<a href="#" onclick="topggleForm();">登录</a></p></form></div><div class="imgBx"><img src="img/2.jpg" alt=""></div></div></div></section><script type="text/javascript">function topggleForm(){var container = document.querySelector('.container');container.classList.toggle('active');}</script>
</body>
</html>

img图片：
favicon.ico
在这里插入图片描述
1.jpg
在这里插入图片描述
2.jpg
在这里插入图片描述
效果图：
在这里插入图片描述
在这里插入图片描述

案例三 动态样式

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="./style.css"><script src="https://cdn.staticfile.org/vue/2.6.9/vue.js"></script>
</head><body><div id='app' class="container"><img src="./1.jpeg" /><div class="panel"><div class="content login"><div class="switch"><span :class='{"active": active === "login"}' @click='go("login")'>登陆</span><span>/</span><span :class='{"active": active === "register"}' @click='go("register")'>注册</span></div><div class='form' id="fromLogin"><template v-if='active === "register"'><div class="input"><input type="text" name="email" id='email' /><label for="email">邮箱</label></div><div class="input"><input type="text" name="Username" id="username" /><label for="username">用户名</label></div><div class="input"><input type="password" name="Password" id="Password" /><label for="Password">密码</label></div><div class="input"><input type="password" name="repeat" id="Passwordrepeat" /><label for="Passwordrepeat">重复密码</label></div></template><template v-if='active === "login"'><div class="input"><input type="text" name="Username" id="username" /><label for="username">用户名</label></div><div class="input"><input type="password" name="Password" id="Password" /><label for="Password">密码</label></div></template><span>忘记?</span><button type="submit">登陆</button></div></div></div></div>
</body><script>
var vue = new Vue({el: '#app',data: {active: 'login'},methods: {go (type) {this.active = type}},beforeMount () {}
})
</script></html>

style.css

* {margin: 0;padding: 0;
}body {height: 100vh;display: flex;justify-content: center;align-items: center;font-family: miaowu;background: linear-gradient(45deg, rgb(80, 150, 250), rgb(245, 189, 253)) fixed;
}.container {position: relative;width: 70rem;
}.container img {width: 70rem;
}.switch span {color: #ccc;font-size: 1.4rem;cursor: pointer;
}.switch span.active {color: rgb(181, 154, 254);
}.panel {width: 30%;margin: 10rem 0 0;position: absolute;right: 0;top: 0;display: flex;justify-content: center;
}.form {width: 12rem;margin: 3rem 0 0;
}.form .input {position: relative;opacity: 1;height: 2rem;width: 100%;margin: 2rem 0;transition: .4s;
}.input input {outline: none;width: 100%;border: none;border-bottom: .1rem solid rgb(181, 154, 254);position: relative;line-height: 35px;background: transparent;z-index: 1;
}.input label {position: absolute;left: 0;top: 20%;font-size: 1.2rem;color: rgb(129, 101, 207);transition: .3s;
}   .input input:focus ~ label {top: -50%;font-size: .9rem;
}.form span {display: block;color: rgb(110, 89, 167);font-size: .8rem;cursor: pointer;
}.form button {border: none;outline: none;margin: 2.5rem 0 0;width: 100%;height: 3rem;border-radius: 3rem;background: linear-gradient(90deg, rgb(181, 154, 254), rgb(245, 189, 253));box-shadow: 0 0 8px rgb(181, 154, 254);cursor: pointer;color: white;font-family: miaowu;
}#live2dcanvas {border: 0 !important;
}

背景图：
在这里插入图片描述

效果图：
在这里插入图片描述

在这里插入图片描述

案例四 普通样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>login</title><style>body {/* 设置边距，可以设置四个方向，分别是 上 右 下 左  */margin: 0; /* 填充  也是可以设置四个方向，同上 */padding: 0;/* 设置字体风格 */font-family: sans-serif;/* 设置背景颜色 */background: lightsteelblue;}.box {width: 300px;padding: 40px;/* 绝对定位，通过这个可以使元素放在页面的任何一个位置上 */position: absolute;/* 以下三行代码实现了块元素在百分比下居中 可以参考： https://www.cnblogs.com/knuzy/p/9993181.html */top: 50%;left: 50%;transform: translate(-50% , -50%);/* 设置登陆界面的背景颜色 */background-color: cornflowerblue;/* 规定标签中元素属性为 text 的居中 */text-align: center;}.box h1 {color: #349;/* 控制文本大小写 */text-transform: uppercase;font-size: 500;}/* 选中输入账号密码的框框 */.box input[type="text"],.box input[type="password"] {border: 0;background: none;display: block;/* 第一个参数定上下 20px 第二个auto自动适配 */margin: 20px auto;/* 文本居中 */text-align: center;/* 设置边框大小和颜色 */border: 2px solid #3498db;/* 两个参数分别对应 高 和 宽 */padding: 14px 10px;/* 设置边框为宽 */width: 200px;/* 边框对应的属性分别有三个 https://www.w3school.com.cn/cssref/pr_outline.asp */outline: none;color: white;/* 边框的半径 更圆润*/border-radius: 24px;/* 设置动画的过渡时间 */transition: 0.25s;}/* 设置变化后的界面 */.box input[type="text"]:focus,.box input[type="password"]:focus {width: 280px;border-color: #2ecc71;}.box input[type="submit"] {border: 0;background: none;display: block;margin: 20px auto;text-align: center;border: 2px solid #2ecc71;padding: 14px 40px;outline: none;color: black;border-radius: 24px;transition: 0.25s;}.box input[type="submit"]:hover { background: #2ecc71;}</style>
</head>
<body><!-- 表格元素 相关属性可参考： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form  --><from class="box" action = "login.html" method="post"><h1 >codestep</h1><input type = "text" name = "" placeholder="Username" ><input type = "password" name = "" placeholder="Password"><input type="submit" value = "Login"></from>
</body>
</html>

效果图：
在这里插入图片描述

案例五 滑动样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Login</title><style>* {font-family: 'montserrat', sans-serif;}body {margin: 0;padding: 0;background: #333;}.login-box {position: absolute;top: 0;left: -100%;width: 100%;height: 100vh; /* vh 视口高度 viewport height 百分比单位*/background-image: linear-gradient(45deg,#9fbaa8,#31354c); /*设置颜色渐变 方向(0deg垂直向上) 起点颜色 终点颜色*/transition: 0.4s; /*过度效果  property duration timing-function delay 默认属性:all 0 ease 0*/}.login-form {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /*定义 2D 转换8 */color: white;text-align: center;}.login-form h1 {font-weight: 400;margin-top: 0;}.txtb {display: block;box-sizing: border-box;width: 240px;background: #ffffff28;border: 1px solid white;padding: 10px 20px;color: white;outline: none;margin: 10px 0;border-radius: 6px;text-align: center;}.login-btn {width: 240px;background: #2c3e50;border: 0;color: white;padding: 10px;border-radius: 6px;cursor: pointer;}.hide-login-btn {color: #000;position: absolute;top: 40px;right: 40px;cursor: pointer;font-size: 30px;opacity: 0.7;transform: rotate(45deg); /*定义 2D 转换8 */}.show-login-btn {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: white;border: 2px solid;padding: 10px;cursor: pointer;}.showed {left: 0;}</style>
</head>
<body>
<div class="show-login-btn">-> Show Login Form
</div><div class="login-box"><div class="hide-login-btn">+</div><form action="index.html" method="POST" class="login-form"><h1>Welcome</h1><input class="txtb" type="text" name="" placeholder="Username" /><input class="txtb" type="password" name="" placeholder="Password" /><input class="login-btn" type="submit" name="" value="Login" disabled /></form>
</div>
<script type="text/javascript">function hasClass(element, clssname) {return element.className.match(new RegExp('(\\s|^)' + clssname + '(\\s|$)'))}function addClass(element, clssname) {if (!this.hasClass(element, clssname)) element.className += ' ' + clssname}function removeClass(element, clssname) {if (hasClass(element, clssname)) {var reg = new RegExp('(\\s|^)' + clssname + '(\\s|$)')element.className = element.className.replace(reg, ' ')}}function toggleClass(element, clssname) {if (hasClass(element, clssname)) {removeClass(element, clssname)} else {addClass(element, clssname)}}var loginBox = document.getElementsByClassName('login-box')var showBtn = document.getElementsByClassName('show-login-btn')var hideBtn = document.getElementsByClassName('hide-login-btn')showBtn[0].addEventListener('click', function() {toggleClass(loginBox[0], 'showed')})hideBtn[0].addEventListener('click', function() {toggleClass(loginBox[0], 'showed')})
</script>
</body>
</html>

效果图：
在这里插入图片描述
在这里插入图片描述

案例六 普通样式

login.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" href="css/style.css" /><link rel="stylesheet" href="css/iconfont.css" /><title>登录界面</title></head><body><div id="bigBox"><h1>LOGIN</h1><div class="inputBox"><div class="inputText"><span class="iconfont icon-nickname"></span><input type="text" placeholder="Username" /></div><div class="inputText"><span class="iconfont icon-visible"></span><input type="password" placeholder="Password" /></div></div><input class="loginButton" type="button" value="Login" /></div></body>
</html>

style.css

body
{margin: 0;padding: 0;background-image: url(../img/bglogin.png);	/* 背景图片 */background-repeat: no-repeat;	/* 背景图片不重复 */
}#bigBox
{margin: 0 auto;	/* login框剧中 */margin-top: 200px; /* login框与顶部的距离 */padding: 20px 50px;	/* login框内部的距离(内部与输入框和按钮的距离) */background-color: #00000090;	/* login框背景颜色和透明度 */width: 400px;height: 300px;border-radius: 10px;	/* 圆角边 */text-align: center;	/* 框内所有内容剧中 */
}#bigBox h1
{color: white;	/* LOGIN字体颜色 */
}#bigBox .inputBox
{margin-top: 50px;	/* 输入框顶部与LOGIN标题的间距 */
}#bigBox .inputBox .inputText
{margin-top: 20px;	/* 输入框之间的距离 */
}#bigBox .inputBox .inputText span
{color: white;	/* icon颜色 */
}#bigBox .inputBox .inputText input
{border: 0;	/* 删除输入框边框 */padding: 10px 10px;	/* 输入框内的间距 */border-bottom: 1px solid white;	/* 输入框白色下划线 */background-color: #00000000;	/* 输入框透明 */color: white;	/* 输入字体的颜色 */
}#bigBox .loginButton
{margin-top: 30px;	/* 按钮顶部与输入框的距离 */width: 150px;height: 25px;color: white;	/* 按钮字体颜色 */border: 0; /* 删除按钮边框 */border-radius: 20px;	/* 按钮圆角边 */background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);	/* 按钮颜色 */
}

iconfont.css

@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1591106386397'); /* IE9 */src: url('iconfont.eot?t=1591106386397#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPkAAsAAAAACCgAAAOVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEDIM4ATYCJAMMCwgABCAFhG0HPBsEB1GUDUqS7IckiWBsgSKJ5iIQA3MI4geKAwAAlgIQD19j7f3dvUMtQRJNHn26aJJEYoiEToIQxUIheSdEpnsms/x+7VRC3R1ElWSaNOmT7YvvDbzSSY3SaIQIoTG0rs5YPKzkCKMdmFhnZl8Ihekb28ETv33fz7o4nDbF5zc4pzmmRl2AcUABjb0swQJKkHuIV7u0w15PoF6fKeXl/dOLUktBuwXiMPBUqZVSKTXZoVaolowt4kxdbTpJfpz6349fEyEhqWS078rBni1tfpx/3fAd/w7XLgJ7PAP4SWSMKynEbqlpRzUMjauqV0W1+uSqIqSxvP//+CxNUDX/8EiCqKKZjWCYCNNJsW1WLL5Bzlmzb65zFXW4U/ImqTtRmqq8rTVL84YCiXK964MkBwBChhC37GSmaAaSZCIxivE4l2FIEkKCE4+PJJNjXMSMJhepAICiEKKrGWaMhIBoAYhLZOh2Bu7SzZGtAqIe0SYcGUlQiUgCUTVo/TnJjVvc95HI5Yi3TFFIQg4HkA28Mz+KSzM0xiMcdSST3vj0UzjDecQXy46LKNurEblFc0L3gGbB7yd2/6rYfSSsEoO2lVGueUc76Qd5FBr4XjBRXGr52LLO3SgfmellnsiUfeLOjkZD4cMQHi4vxEFvmweWxo5OZvix0VJYMQTybB2X8TbsGqooxPqHm3j4sdDQ2N6Fh17hMYUVnLuDgqKukpbs4WGWHRlWt5QUdhL9OpNfZny4NlGbb7prFux5BkrDntnR4Yvm72lYnjz7vL23GnzeXB3LWuqPt09ct8c9GsyblVq+Zb7y8lN/4+H2amVv2PFX2y3g/ef9DBVFu3RqJVqzfyG7ZUnRuFSdi8KyWYY7O/KbDAlkCDr/xNbur7+lSyk2hFqBjZDU6IWsVj+yYMehosEUVNWag3pjDiY36MCqotRh1AdAaPUFSbNXyFr9IAv2Fyq6/UNVa/Ch3lbo52wwGJudLkYlaEG/QGCylCytdILsM/QeYsVJro+7QnaBF+Zn5rLRA0yRxxjgHr0FEQLiLIF92AzjOIOcsxCNzPgi+cbsLJW9aMZkSaljCUOKQBbQXoCAkUmRW1l0cp8/gzwPYgrXFFXpryDmBLWDeTPmWiAPRGmromu5xHnkWSAEAYRlEmAfDCg2QxmQl7cKIUPM8HsEchtmSTlqK5qZX5I83yqoR4/JkSJHUXMcuEDH2NoLTJSqBEslAAAA') format('woff2'),url('iconfont.woff?t=1591106386397') format('woff'),url('iconfont.ttf?t=1591106386397') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('iconfont.svg?t=1591106386397#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-visible:before {content: "\e6a2";
}.icon-nickname:before {content: "\e6a0";
}

效果图：
在这里插入图片描述

具体怎么获取呢？

鉴于小伙伴们没有csdn积分，我把代码压缩成了一个压缩包，放在了gitee上面，需要的请点击下载
点击下载

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/531001.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

html+css 小案例（一）

html+css 小案例（一）

文章目录点击下载index.html <!DOCTYPE html> <html lang"ch"> <head><meta charset"UTF-8"><title>Demo_Test</title><link rel"stylesheet" href"css/Dec.css"> </head> <body…
阅读更多...
HTML+CSS+JS 表白代码

HTML+CSS+JS 表白代码

文章目录案例一 爱你到天昏地暗案例二 带有音乐的表白代码案例三 带有图片旋转的表白案例源码案例一 爱你到天昏地暗 <html> <style type"text/css"> <!-- .STYLE1 {font-size: medium} --> </style> <center><br><br>…
阅读更多...
Linux常用命令与基本操作、填空题、简答题

Linux常用命令与基本操作、填空题、简答题

文章目录基本知识点基本操作叙述什么是shell?重启虚拟机网络分区查看当前进程查看主机名重启关机查看IP地址文件搜索挂载查看网络配置linux系统中Vi的三种模式磁盘分区查看硬盘信息df&#xff0c;fdisk&#xff0c;lsblk区别进程用户用户信息查看用户密码信息修改密码添加用户…
阅读更多...
客户端与服务器（C/S架构与B/S架构）、AJax学习

客户端与服务器（C/S架构与B/S架构）、AJax学习

文章目录HTTP请求与服务器客户端与服务器1.C/S架构与B/S架构2.web资源介绍3.资源访问流程HTTP协议1.什么是协议&#xff1f;2.什么是HTTP协议3.HTTP组成部分4.请求的发送方式什么是Ajax技术Ajax可以做什么&#xff1f;伪造AjaxHTTP请求与服务器 客户端与服务器 1.C/S架构与B/…
阅读更多...
前端必会技巧

前端必会技巧

文章目录点击输入框提示信息防止别人盗取视频设置输入边框透明按钮跳转a标签如何具有bootstra按钮样式formData的使用boostrap上传样式jq获取input标签的值jq获取最近一个td标签的值css设置几个div中的图片保持在一条水平线使div居中canvas 网页背景 粒子鼠标跟随磁力登录界面添…
阅读更多...
linux基础必备

linux基础必备

文章目录Linux系统中常用目录结构Linux下如何从普通用户切换到root用户Linux系统常用命令Linux系统文件中相关指令Linux查看开机自启动服务Linux常见服务列表Linux关闭某些服务&#xff08;临时关闭&#xff09;Linux关闭服务开机自启动Linux中在屏幕输入一句话Linux查看系统进…
阅读更多...
Hadoop搭建集群中输入hdfs namenode -format格式化节点时，提示：hdfs: command not found 解决办法

Hadoop搭建集群中输入hdfs namenode -format格式化节点时，提示：hdfs: command not found 解决办法

分析原因&#xff1a; hadoop的安装路径没有加入到当前路径中 解决办法&#xff1a; 方法1&#xff1a; 进入hadoop的安装目录&#xff0c;在执行hadoop命令时在前面加上&#xff1a;./bin ./sbin 方法2: 进入/etc/profile文件中添加hadoop的安装路径 sudo vim /etc/profile添…
阅读更多...
Linux高级编程实验（30个）

Linux高级编程实验（30个）

文章目录1&#xff09;输出Linux下的c也不是太难嘛&#xff01;在linux下编辑&#xff0c;编译&#xff0c;运行2&#xff09;编写一个简单地c语言程序,根据输入的两个整数求平均值并且在终端输出&#xff0c;通过gcc编译器得到它的汇编程序文件。3&#xff09;编写一个c语言程…
阅读更多...
登录界面验证码的实现

登录界面验证码的实现

文章目录Javaweb实现验证码前端后台Springboot添加验证码项目结构依赖控制类前端页面效果图Javaweb实现验证码 前端 添加样式 <meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0, minimum-scale1.…
阅读更多...
Javaweb MVC设计模式、Modle发展史、项目分层和三层架构

Javaweb MVC设计模式、Modle发展史、项目分层和三层架构

文章目录MVC设计模式MVC的目的MVC举例jspservletjavabean模式MVC的优点MVC的缺点Modle 发展史项目分层三层架构MVC设计模式 MVC模式&#xff08;Model-View-Controller&#xff09;是软件工程中的一种软件架构模式&#xff0c;把软件系统分为三个基本部分&#xff1a;模型&…
阅读更多...
HTML表格和HTML表单

HTML表格和HTML表单

HTML 表格 表格由 <table> 标签来定义每个表格均有若干行&#xff08;由 <tr> 标签定义&#xff09;&#xff0c;每行被分割为若干单元格&#xff08;由 <td> 标签定义&#xff09; 字母 td 指表格数据&#xff08;table data&#xff09;&#xff0c;即数据…
阅读更多...
解决虚拟机没有ens33网卡的问题

解决虚拟机没有ens33网卡的问题

话不多说&#xff0c;直接操作 解决办法 1.在终端中输入: sudo vim /etc/network/interfaces进入interfaces文件后&#xff0c;然后输入以下代码&#xff0c;然后保存退出 auto ens33 iface ens33 inet dhcp 2.重启虚拟机 输入ifconfig命令&#xff0c;成功启动ens33网卡
阅读更多...
Springboot分层图解

Springboot分层图解

阅读更多...
HDFS上传文件命令报错org.apache.hadoop.ipc.RemoteException(java.io.IOException)

HDFS上传文件命令报错org.apache.hadoop.ipc.RemoteException(java.io.IOException)

作为作者&#xff0c;强烈不建议进行格式化hadoop&#xff0c;毕竟开发数据是最为重要的&#xff01; Hadoop 3.1 hdfs dfs -put /源文件路径 /目的文件路径解决方案 第一步&#xff1a;停止主节点&#xff08;Master&#xff09;和子节点服务&#xff08;Slave&#xff09; …
阅读更多...
图（Graph）的学习

图（Graph）的学习

文章目录图的认识图的概念无向图有向图简单图完全图子图连通、连通图、连通分量边的权和网加权图邻接和关联路径简单路径、简单回路环顶点的度、入度和出度割点&#xff08;关节点&#xff09;桥(割边)距离有向树图的表示邻接列表邻接矩阵图的遍历深度优先遍历广度优先遍历生成…
阅读更多...
并查集（Disjiont Set）

并查集（Disjiont Set）

并查集 并查集的最大作用是检测一个图上面存不存在环。 无向图&#xff0c;六个顶点 显然 1-2-4-3连成一个环 #include<stdio.h> #include<stdlib.h>#define VERTICES 6void initialise(int parent[]){int i;for(i0;i<VERTICES;i){parent[i]-1; }}int find_…
阅读更多...
采用Kruskal算法生成最小生成树，并采用并查集的合并优化和查询优化。

采用Kruskal算法生成最小生成树，并采用并查集的合并优化和查询优化。

文章目录最小生成树1.什么是图的最小生成树&#xff08;MST&#xff09;?2.最小生成树用来解决什么问题&#xff1f;Kruskal&#xff08;克鲁斯卡尔&#xff09;算法算法描述图解最小生成树 1.什么是图的最小生成树&#xff08;MST&#xff09;? 用N-1条边连接N个点&#x…
阅读更多...
Java连接Mysql数据库（JDBC）

Java连接Mysql数据库（JDBC）

文章目录导入包con、stmt、rs 三者存在一定的关系getInt和getStringinput.nextInt();简单使用讲解ResultSet和StatementPreparedStatement的用法JDBC连接代码更多样例导入包 import java.sql.Connection; import java.sql.DriverManager; import java.sql.statement; import j…
阅读更多...
Linux编程考前测试题

Linux编程考前测试题

文章目录选择题多选题判断题填空题简答题编程题选择题 1:当打开vi文本编辑器编辑文件时&#xff0c;vi处于&#xff08;A&#xff09;模式 A: 命令模式 B: 编辑模式 C: 实模式 D: 虚模式 2:下列有关fork&#xff08;&#xff09;函数返回值说法错误的是&#xff08;D&#xf…
阅读更多...
MySQL考试复习（知识点、练习题）

MySQL考试复习（知识点、练习题）

文章目录数据库的管理技术的三个阶段发展的三个阶段数据库的锁数据库设计的基本步骤事务的四大特性什么是视图如果关系模式设计不好&#xff0c;可能带来哪几个问题数据库管理系统的主要功能有哪些数据库系统中的常见故障有哪些简述SQL语言的组成说明关系模型有哪三类完整性规则…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023