搜索到
117
篇与
的结果
-
二次元风格的登录界面，也只是用html和css来写的，大家可以来看看！ 给大家带来比较具有二次元风格的登录界面，也只是用html和css来写的，大家可以来看看！HTML部分既然是制作登录界面我们可以使用表单元素，会比盒子更加简单一些，个人相信大家应该可以明白里头的啥意思吧！！！这边就介绍一下CSS部分吧<div class="shell"> <div id="img-box"> <img src="./a34a7810c48ee409750f92812023beb0-1.jpg" alt=""> </div> <form action="" method="post"> <div id="form-body"> <div id="welcome-lines"> <div id="w-line-1">HI,老K</div> <div id="w-line-2">Welcome Back</div> </div> <div id="input-area"> <div class="f-inp"> <input type="text" placeholder="Email Address"> </div> <div class="f-inp"> <input type="password" placeholder="Password"> </div> </div> <div id="submit-button-cvr"> <button type="submit" id="submit-button">LOGIN</button> </div> <div id="forgot-pass"> <a href="#">Forgot password?</a> </div> </div> </form> </div>...CSS部分还是给我们先清除内外边距然后这个ountline：none；的意思是鼠标点击文本框的时候，文本的边框焦点会被去除掉还是设置一个背景颜色，这里我们使用的是渐变色：然后在需要让盒子来正中间，需要使用弹性布局感觉下面都挺简单的，我就着重讲一下这个伪元素吧placeholderplaceholder 是HTML5 中新增的一个属性。placeholder可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。比如：我们在登录时需要输入用户名和密码，它会提示你什么地方输入用户名，什么地方输入密码，这个就是使用的placeholder属性。* { padding: 0; margin: 0; outline: none; } body { background: linear-gradient(45deg, #fbda61, #ff5acd); display: flex; justify-content: center; align-items: center; height: 100vh; } .shell, form { position: relative; } .shell { display: flex; justify-content: center; } form { width: 562px; height: 520px; background-color: #fff; box-shadow: 0px 15px 40px #b6354e; border-radius: 15px; display: flex; justify-content: center; align-items: center; } #img-box { width: 330px; height: 520px; } #img-box img { height: 100%; margin-left: -175px; border-radius: 20px; } #form-body { width: 320px; display: flex; justify-content: center; align-items: center; flex-direction: column; } #welcome-lines { width: 100%; text-align: center; line-height: 1; } #w-line-1 { color: #7f7f7f; font-size: 50px; } #w-line-2 { color: #9c9c9c; font-size: 30px; margin-top: 17px; } #input-area { width: 100%; margin-top: 40px; } .f-inp { padding: 13px 25px; border: 2px solid #6e6d6d; line-height: 1; border-radius: 20px; margin-bottom: 15px; } .f-inp input { width: 100%; font-size: 14px; padding: 0; margin: 0; border: 0; } .f-inp input::placeholder { color: #b9b9b9; } #submit-button-cvr { margin-top: 20px; } #submit-button { display: block; width: 100%; color: #fff; font-size: 14px; margin: 0; padding: 14px 40px; border: 0; background-color: #f5506e; border-radius: 25px; line-height: 1; cursor: pointer; } #forgot-pass { text-align: center; margin-top: 10px; } #forgot-pass a { color: #868686; font-size: 12px; text-decoration: 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>老K&&前端小窝</title> <style> * { padding: 0; margin: 0; outline: none; } body { background: linear-gradient(45deg, #fbda61, #ff5acd); display: flex; justify-content: center; align-items: center; height: 100vh; } .shell, form { position: relative; } .shell { display: flex; justify-content: center; } form { width: 562px; height: 520px; background-color: #fff; box-shadow: 0px 15px 40px #b6354e; border-radius: 15px; display: flex; justify-content: center; align-items: center; } #img-box { width: 330px; height: 520px; } #img-box img { height: 100%; margin-left: -175px; border-radius: 20px; } #form-body { width: 320px; display: flex; justify-content: center; align-items: center; flex-direction: column; } #welcome-lines { width: 100%; text-align: center; line-height: 1; } #w-line-1 { color: #7f7f7f; font-size: 50px; } #w-line-2 { color: #9c9c9c; font-size: 30px; margin-top: 17px; } #input-area { width: 100%; margin-top: 40px; } .f-inp { padding: 13px 25px; border: 2px solid #6e6d6d; line-height: 1; border-radius: 20px; margin-bottom: 15px; } .f-inp input { width: 100%; font-size: 14px; padding: 0; margin: 0; border: 0; } .f-inp input::placeholder { color: #b9b9b9; } #submit-button-cvr { margin-top: 20px; } #submit-button { display: block; width: 100%; color: #fff; font-size: 14px; margin: 0; padding: 14px 40px; border: 0; background-color: #f5506e; border-radius: 25px; line-height: 1; cursor: pointer; } #forgot-pass { text-align: center; margin-top: 10px; } #forgot-pass a { color: #868686; font-size: 12px; text-decoration: none; } </style> </head> <body> <div class="shell"> <div id="img-box"> <img src="./a34a7810c48ee409750f92812023beb0-1.jpg" alt=""> </div> <form action="" method="post"> <div id="form-body"> <div id="welcome-lines"> <div id="w-line-1">HI,老K</div> <div id="w-line-2">Welcome Back</div> </div> <div id="input-area"> <div class="f-inp"> <input type="text" placeholder="Email Address"> </div> <div class="f-inp"> <input type="password" placeholder="Password"> </div> </div> <div id="submit-button-cvr"> <button type="submit" id="submit-button">LOGIN</button> </div> <div id="forgot-pass"> <a href="#">Forgot password?</a> </div> </div> </form> </div> </body> </html>...最后的效果是这样子的：大家可以尝试敲一敲，这样一步步就会了解到这种类型的布局，然后自己在尝试几次就可以自己来写自己的专属登录界面然后后期通过js完善一下会更加完美哦！！ -
Mysql数据库--修改root密码的几种方法(忘记密码&知道密码) Mysql数据库--修改root密码的几种方法（忘记密码&知道密码）🔻一、知道密码情况--修改root密码⛳ 1.1 方式1：alter 命令修改⛳ 1.2 方式2：set password命令修改🔻二、忘记密码情况-修改root密码⛳ 2.1 方式1：--init-file选项启动mysql2.1.1 🎈 停止mysql服务2.1.2 🎈 创建mysql-init-file.txt文件2.1.3 🎈 init-file的权限（最好赋权一下）2.1.3 🎈 使用--init-file选项启动mysql服务2.1.4 🎈 新密码连接测试（密码：Zyl@123321）2.1.5 🎈停止init-file启动的mysql进程并正常启动2.1.5 🎈 登录之后即可在mysql命令行修改为其他常用密码（此时知道密码情况--修改root密码）⛳ 2.2 方式2：使用skip-grant-tables 参数，跳过授权验证2.2.1 🎈 停止mysql服务2.2.2 🎈 通过--skip-grant-tables 参数启动mysql服务2.2.3 🎈 或者通过my.cnf 文件配置skip-grant-tables 参数启动mysql服务🔻三、总结—温故知新🔻一、知道密码情况–修改root密码⛳ 1.1 方式1：alter 命令修改🍁 通过alter user root identified by '新密码';mysql> use mysql; mysql> alter user root@'localhost' identified by 'Zyl@123456'; Query OK, 0 rows affected (0.01 sec) mysql>...⛳ 1.2 方式2：set password命令修改🍁 通过set password for 用户名@'用户地址' = '新密码';mysql> use mysql; mysql> set password for 'root'@'localhost' = 'Zyl@123456'; Query OK, 0 rows affected (0.01 sec) mysql> ...🔻二、忘记密码情况-修改root密码⛳ 2.1 方式1：--init-file选项启动mysql2.1.1 🎈 停止mysql服务[root@db-server ~]# systemctl stop mysqld [root@db-server ~]# systemctl status mysqld ● mysqld.service - MySQL Server Loaded: loaded (/usr/lib/systemd/system/mysqld.service; enabled; vendor preset: disabled) Active: failed (Result: exit-code) since Wed 2023-06-07 11:11:00 CST; 51min ago Docs: man:mysqld(8) http://dev.mysql.com/doc/refman/en/using-systemd.html Process: 2450 ExecStart=/usr/sbin/mysqld $MYSQLD_OPTS (code=exited, status=1/FAILURE) Process: 2426 ExecStartPre=/usr/bin/mysqld_pre_systemd (code=exited, status=0/SUCCESS) Main PID: 2450 (code=exited, status=1/FAILURE) Status: "Server shutdown complete" Error: 13 (Permission denied) Jun 07 11:11:00 db-server systemd[1]: Starting MySQL Server... Jun 07 11:11:00 db-server systemd[1]: mysqld.service: main process exited, code=exited, status=1/FAILURE Jun 07 11:11:00 db-server systemd[1]: Failed to start MySQL Server. Jun 07 11:11:00 db-server systemd[1]: Unit mysqld.service entered failed state. Jun 07 11:11:00 db-server systemd[1]: mysqld.service failed. [root@db-server ~]# ...2.1.2 🎈 创建mysql-init-file.txt文件[root@db-server home]# touch init-file [root@db-server home]# vi init-file [root@db-server home]# cat init-file alter user 'root'@'localhost' identified by 'Zyl@123321'; [root@db-server home]# pwd /home [root@db-server home]# ...2.1.3 🎈 init-file的权限（最好赋权一下）[root@db-server home]# chmod 777 init-file [root@db-server home]# chown mysql:mysql init-file [root@db-server home]# ll total 4 -rwxrwxrwx 1 mysql mysql 58 Jun 7 15:56 init-file [root@db-server home]# ...2.1.3 🎈 使用–init-file选项启动mysql服务###启动命令#### mysqld --init-file=/home/init-file --user=mysql & [root@db-server ~]# mysqld --init-file=/home/init-file --user=mysql & [1] 1983 [root@db-server ~]# ...2.1.4 🎈 新密码连接测试（密码：Zyl@123321）mysql -u root -pZyl@1233212.1.5 🎈停止init-file启动的mysql进程并正常启动[root@db-server home]# ps -ef | grep mysql mysql 1983 1 1 16:28 ? 00:00:13 mysqld --init-file=/home/init-file --user=mysql root 2104 2048 0 16:50 pts/1 00:00:00 systemctl start mysqld mysql 2134 1 1 16:50 ? 00:00:00 /usr/sbin/mysqld root 2150 2048 0 16:50 pts/1 00:00:00 grep --color=auto mysql [root@db-server home]# kill -9 1983...####正常启动mysql### [root@db-server home]# systemctl start mysqld [root@db-server home]# systemctl status mysqld...2.1.5 🎈 登录之后即可在mysql命令行修改为其他常用密码（此时知道密码情况–修改root密码）🍁 通过alter user root identified by '新密码';mysql> use mysql; mysql> alter user root@'localhost' identified by 'Zyl@123456'; Query OK, 0 rows affected (0.01 sec) mysql> mysql>...🍁 通过set password for 用户名@'用户地址' = '新密码';mysql> use mysql; mysql> set password for 'root'@'localhost' = 'Zyl@123456'; Query OK, 0 rows affected (0.01 sec) mysql> ...⛳ 2.2 方式2：使用skip-grant-tables 参数，跳过授权验证--skip-grant-tables：跳过授权表认证--skip-networking：加了跳过授权表选项后所有的人都可以无密码登录，这是很不安全的，此选项不监听网络，防止恶意登录。2.2.1 🎈 停止mysql服务[root@db-server ~]# systemctl stop mysqld...2.2.2 🎈 通过--skip-grant-tables 参数启动mysql服务[root@db-server ~]# sudo mysqld --skip-grant-tables --user=mysql & [1] 2531 [root@db-server ~]# mysql Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 7 Server version: 8.0.32 MySQL Community Server - GPL Copyright (c) 2000, 2023, Oracle and/or its affiliates. Oracle is a registered trademark of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective owners. Type 'help;' or '\h' for help. Type '\c' to clear the current input statement. mysql> ...2.2.3 🎈 或者通过my.cnf 文件配置skip-grant-tables 参数启动mysql服务注：修改完密码之后，去除该参数--以便保障数据库安全性。[root@db-server ~]# vi /etc/my.cnf ####添加内容： skip-grant-tables...启动mysql[root@db-server home]# systemctl start mysqld...🍁 通过alter user root identified by '新密码';mysql> use mysql; mysql> alter user root@'localhost' identified by 'Zyl@123456'; Query OK, 0 rows affected (0.01 sec) mysql> mysql>...🍁 通过set password for 用户名@'用户地址' = '新密码';mysql> use mysql; mysql> set password for 'root'@'localhost' = 'Zyl@123456'; Query OK, 0 rows affected (0.01 sec) mysql> ...注：修改完密码之后，去除 skip-grant-tables 参数--以便保障数据库安全性。🔻三、总结—温故知新❓ 本篇文章详细介绍了在linux中忘记mysql的root用户密码修改步骤。❓ 温馨提示：不管是工作中，还是学习中，要养成备份的习惯，不要觉得太麻烦，或者觉得没必要，不要存在侥幸心理。❓ 人有的时候总觉得很多事可以偷懒，但是有时候又要为自己的偷懒付出更大的代价。
CC BY-NC-ND