HTML+CSS 登录界面设计

一、界面源代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录</title><style>body {margin: 0;padding: 0;background: url(324932.jpg);}.div {width: 400px;height: 500px;/* 实现整个框居中效果 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);overflow: hidden;}.head-div {width: 100px;height: 100px;border: 1px solid #999;border-radius: 50%;margin: 0 auto 10px auto;background: url(header.jpg) no-repeat;background-size: 100px 100px;}.sign-div {width: 400px;height: 300px;text-align: center;outline: none;border: 1px solid rgb(94, 92, 233);border-radius: 8px;background-color: rgba(172, 235, 243, .2);box-sizing: border-box;}.sign-div h1 {margin-bottom: 10px;color: rgb(29, 26, 26);}input {width: 250px;height: 44px;border: none;/* 元素周围的轮廓无效 */outline: none;/* 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制 */box-sizing: border-box;display: block;padding: 0 16px;}.input-text {margin: 5px auto;border-radius: 16px;}.input-text:hover {border: 0.5px solid rgb(76, 76, 233);transition: 0.5s;border-radius: 4px;}.input-btn {margin: 30px auto 20px;border-radius: 44px;cursor: pointer;background-color: rgba(84, 175, 249, 0.8);}.input-btn:hover {color: #fff;font-size: 16;border-radius: 4px;transition: 0.5s;background-color: rgba(10, 138, 243, 0.8);}.sign-div a {text-decoration: none;color: rgb(92, 61, 112);font-size: 14px;padding: 10px;transition: 0.8s;display: block;}a:hover {color: #FFF;background: rgba(0, 0, 0, .3);border-radius: 8px;}</style>
</head><body><div class="div"><div class="head-div"></div><div class="sign-div"><form class="" action="#" method="POST"><h1>登录</h1><input class="input-text" type="text" name="username" placeholder="帐号"><input class="input-text" type="password" name="password" placeholder="密码"><input class="input-btn" type="submit" value="登录"><a href="#">忘记密码?</a></form></div></div>
</body></html>

二、界面效果展示

界面图片：

三、Github地址

https://github.com/Sunset-and-return/sign.git

HTML+CSS 登录界面设计相关推荐

html科幻效果,带科幻风格的纯CSS3用户登录界面设计
这是一款带有科幻风格的纯CSS3用户登录界面设计效果.它模拟科幻电影<钢铁侠>中斯塔克工业超级电脑的登录界面.该登录界面略带金属质感,通过一条无限运动的弧线绕圆动画来制作一些神秘科技色彩. ...
html用户登录页面设计,简洁时尚的用户登录界面设计效果
这是一款简洁时尚的用户登录界面设计效果.该用户登录效果使用CSS和JS来完成,它使用元素滑动效果来制作登录表单动画,字体效果时尚大方,是非常不错的用户登录界面UI设计效果. 使用方法 HTML结构该 ...
html5好看的注册页面设计,Material Design风格用户注册登录界面设计
这是一款Material Design风格用户注册登录界面设计效果.该设计由用户登录,用户注册和忘记密码三个界面组成.设计中的所有元素都以Material Design为基础,整体效果时尚大方. 使用 ...
18.1.1 登录界面设计——第18章 PC端项目功能开发
18.1.1 登录界面设计登录界面效果图如下图18.1-1: 图18.1-1 界面设计主要是2个输入框,2个按钮, script脚本内容暂时不去管,主要看模板文件和样式. 在views目录下创建Lo ...
登录界面设计及功能实现
文章目录 1 登录界面设计 1.1 登录界面设计 1.2 登录界面设计要点 1 登录界面设计 1.1 登录界面设计界面效果如下: 1.2 登录界面设计要点我们需要先将窗体设置为无边框,然后再设置窗 ...
Android之登录界面设计
Android之登录界面设计这篇文章主要讲述Android开发中常用的APP开发界面–登录界面的开发(由于博主是初学安卓,可能有些小伙伴会感到简陋,我会继续努力学习新知识的,大家一起加油). (1) ...
web登录界面设计_出色的Web界面设计的7条规则
web登录界面设计 When you work on a website or on the design of web pages, remember that their success is n ...
舒服的网页登录界面设计灵感
登录注册就是"一扇门",一扇让产品和用户真正互通的门,让产品可以给用户体现出更多价值的门. 所以这个门一定要: 够宽.门槛够低.一直开着.记忆每次进出- 设计师交流社区集设网 w ...
UI设计使用模板素材|登录界面设计
登陆注册界面在咱们APP UI设计过程当中最有可能是最先接触到的东西,因为现在对于绝大部分的APP来说都有,形式也都差不多,估计大家认为设计出来的东西也都差不多,或者没有花精力去设计. 怎样让登录界面 ...

HTML+CSS 登录界面设计

一、界面源代码

二、界面效果展示

三、Github地址

HTML+CSS 登录界面设计相关推荐

最新文章

热门文章