百度网址大全网址导航,一个新网站怎么做seo,做网站的分辨率要多大,wordpress 时间轴主题今天还是继续坚持写博客#xff0c;然后今天给大家带来比较具有二次元风格的登录界面#xff0c;也只是用html和css来写的#xff0c;大家可以来看看#xff01; 个人名片#xff1a; #x1f60a;作者简介#xff1a;一名大一在校生#xff0c;web前端开发专业 然后今天给大家带来比较具有二次元风格的登录界面也只是用html和css来写的大家可以来看看 个人名片 作者简介一名大一在校生web前端开发专业 个人主页几何小超 座右铭懒惰受到的惩罚不仅仅是自己的失败还有别人的成功。 **学习目标: 坚持每一次的学习打卡掌握更多知识虽然都说前端已死但是就算不靠这个吃饭学一点东西总比啥也不知道的 HTML部分
既然是制作登录界面我们可以使用表单元素会比盒子更加简单一些个人相信大家应该可以明白里头的啥意思吧
这边就介绍一下CSS部分吧
div classshelldiv idimg-boximg src./a34a7810c48ee409750f92812023beb0-1.jpg alt/divform action methodpostdiv idform-bodydiv idwelcome-linesdiv idw-line-1HI,xiaochao/divdiv idw-line-2Welcome Back/div/divdiv idinput-areadiv classf-inpinput typetext placeholderEmail Address/divdiv classf-inpinput typepassword placeholderPassword/div/divdiv idsubmit-button-cvrbutton typesubmit idsubmit-buttonLOGIN/button/divdiv idforgot-passa href#Forgot password?/a/div/div/form/div
CSS部分
还是给我们先清除内外边距
然后这个ountlinenone的意思是鼠标点击文本框的时候文本的边框焦点会被去除掉
还是设置一个背景颜色这里我们使用的是渐变色然后在需要让盒子来正中间需要使用弹性布局
感觉下面都挺简单的我就着重讲一下这个伪元素吧placeholder
placeholder 是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 langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title小超前端小窝/titlestyle* {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
/headbodydiv classshelldiv idimg-boximg src./a34a7810c48ee409750f92812023beb0-1.jpg alt/divform action methodpostdiv idform-bodydiv idwelcome-linesdiv idw-line-1HI,xiaochao/divdiv idw-line-2Welcome Back/div/divdiv idinput-areadiv classf-inpinput typetext placeholderEmail Address/divdiv classf-inpinput typepassword placeholderPassword/div/divdiv idsubmit-button-cvrbutton typesubmit idsubmit-buttonLOGIN/button/divdiv idforgot-passa href#Forgot password?/a/div/div/form/div
/body/html
最后的效果是这样子的 大家可以尝试敲一敲这样一步步就会了解到这种类型的布局然后自己在尝试几次就可以自己来写自己的专属登录界面然后后期通过js完善一下会更加完美哦
看到这别忘三连加关注爱你们
