前言

本文主要是通过设计一个用户登录界面来熟悉CSS样式的设计，博主也是在b站看up主学的，如果有错误，欢迎指正。

一、最终效果

渐变红蓝真的yyds

二、html页面设计

通过表单设计出用户名和密码输入框，登录按钮，同时对每个部分起名字，用于css的样式设计。

<!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"><link rel="stylesheet" href="css/style.css"><title>login</title>
</head>
<body>
<div class="box"><div class="left"></div><div class="right"><h4>登录</h4><form action = ""><input class = "acc" type ="text" placeholder="用户名"><input class = "acc" type ="password" placeholder="密码"><input class = "submit"type ="submit" value="login" ></form><div class = "find"><a href ="javascript:;">注册账号</a><a href ="javascript:;">找回账号</a></div></div>
</div>
</body>
</html>

三、CSS样式设计

CSS样式设计主要牵扯到每个小盒子和小盒子内部的模块设计，语法很容易学，主要是对每种功能的组合和设计，主要是要熟练使用，代码如下

*{margin: 0;padding : 0;box-sizing:border-box;
}
html{font-size: 15px;
}
html::before{content: '';width: 100%;height: 100%;position: fixed;z-index: -1;background-image: linear-gradient(120deg,#e0c3fc 0%, #8ec5fc 100%);
}
.box{display: flex;overflow: hidden;width: 80rem;height: 50rem;background-color: rgba(255, 255, 255, 60%);border-radius: 1.5rem;margin: 10% auto;box-shadow:0 0 1rem 0.2rem rgb(0 0 0 / 10%);
}
.box .left{position:relative;width: 35%;height:100%;background-color: skyblue;
}
.box .left::before{content: '';position: absolute;width: 100%;height: 100%;background-image: url(../image/萝莉.jpeg);background-size: cover;opacity: 80%;
}
.box .right{display: flex;width: 65%;flex-direction: column;align-items: center;
}
.box .right h4{color :skyblue;font-size :3rem;margin-top:5rem;align-items: center;
}
.box .right form{display: flex;flex-wrap: wrap;justify-content: center;
}
.box .right form .acc{outline: none;width: 80%;height: 5rem;font-size:1.6rem;margin-top: 4rem;padding: 1rem 0 0 1.6rem;border: none;border-bottom:1px solid rgb(144,129,241);color: skyblue;background-color: rgb(0,0,0,0);
}
.right form .acc:focus{outline :none;color: rgb(144,129,241);padding:1rem 0 0 1.6rem;
}
.right .submit {width: 50%;height:5rem;color: #f6f6f6;background-image: linear-gradient(120deg,#e0c3fc 0%, #8ec5fc 100%);font-size: 1.4rem;border:none;border-radius: 0.5rem;margin: 4rem 0 0 50%;transform :translateX(-50%);
}
.right .submit:hover{box-shadow: 0 0 2rem -0.5rem rgb(0 0 0 / 10%);
}
.right .find{display: flex;justify-content: space-between;margin-top: 1rem;width:70%;
}
.right .find a{font-size: 1.3rem;margin-top: 3rem;padding:1rem 2rem;text-decoration: none;color: #666;
}
.right .find a:hover{color:rgb(144,129,241);
}

J2EE学习总结（五）------用户登录界面设计相关推荐

html科幻效果,带科幻风格的纯CSS3用户登录界面设计
这是一款带有科幻风格的纯CSS3用户登录界面设计效果.它模拟科幻电影<钢铁侠>中斯塔克工业超级电脑的登录界面.该登录界面略带金属质感,通过一条无限运动的弧线绕圆动画来制作一些神秘科技色彩. ...
html用户登录页面设计,简洁时尚的用户登录界面设计效果
这是一款简洁时尚的用户登录界面设计效果.该用户登录效果使用CSS和JS来完成,它使用元素滑动效果来制作登录表单动画,字体效果时尚大方,是非常不错的用户登录界面UI设计效果. 使用方法 HTML结构该 ...
web用户登录界面设计_UI设计师怎样做界面设计？
当你构建用户界面和网站的时候,有各种各样的关于界面设计方法和模式的信息你可以使用,对常见问题的解决方案和一般可用性的建议. 下列给出的准则可能会引导你创造一个良好的用户界面,但是究竟什么才是一个良好的 ...
ExtJs学习篇---OA系统登录界面设计
今天在网上看到了一个案例,于是就跟着练习了下,也就当作这几天学习的一个应用吧! 部署图如下: login.js //Ext.BLANK_IMAGE_URL是空白图片的地址 Ext.BLANK_IMAG ...
客户关系管理项目——用户登录模块设计
一模块需求细化登录的用户,默认情况有三个不同角色,分别为:系统管理员,前台客服,信息管理员. 用户登录后能够根据其角色来进行相关工作,进行完工作需要能够注销. 细化需求如下: 用户登录之后按角色分 ...
java图形界面的监听_非专业码农 JAVA学习笔记用户图形界面设计与实现-所有控件的监听事件...
用户图形界面设计与实现-监听事件 System.applet.Applet (一)用户自定义成分 1.绘制图形 Public voit piant(Ghraphics g){ g.drawLine等 ...
web登录界面设计_出色的Web界面设计的7条规则
web登录界面设计 When you work on a website or on the design of web pages, remember that their success is n ...
请你根据微信登录界面设计测试用例
请你根据微信登录界面设计测试用例参考回答: 一.功能测试 1.输入正确的用户名和密码,点击提交按钮,验证是否能正确登录. 2.输入错误的用户名或者密码,验证登录会失败,并且提示相应的错误信息. 3. ...
Android之登录界面设计
Android之登录界面设计这篇文章主要讲述Android开发中常用的APP开发界面–登录界面的开发(由于博主是初学安卓,可能有些小伙伴会感到简陋,我会继续努力学习新知识的,大家一起加油). (1) ...
舒服的网页登录界面设计灵感
登录注册就是"一扇门",一扇让产品和用户真正互通的门,让产品可以给用户体现出更多价值的门. 所以这个门一定要: 够宽.门槛够低.一直开着.记忆每次进出- 设计师交流社区集设网 w ...

J2EE学习总结（五）------用户登录界面设计

文章目录

前言

一、最终效果

二、html页面设计

三、CSS样式设计

J2EE学习总结（五）------用户登录界面设计相关推荐

最新文章

热门文章