登录界面(flex布局练习)

练习：登录界面在我们网页制作的过程中经常遇见，所以请你编写一个界面联系一下，这个可以增加一些动画或者是其他的效果，当然越帅越好。请使用flex或者其他布局练习

例如：

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html {font-size: 14px;}body {width: 100%;height: 518px;background: url('./20200412133845_17432.jpg') no-repeat;background-size: cover;}.contain{width: 99%;height: 100%;display: flex;justify-content: center;align-items: center;}.content{display: flex;flex-direction: column;text-align: center;width: 400px;height: 300px;background-color: transparent;border-radius: 10px;box-shadow: 0 0 30px 20px rgba(0, 0, 0, .6);}.logo{flex:1;}.input{display: flex;flex-direction: column;flex:4;}.inputusername{flex:1;}.inputpasswd{flex:1;}.button{flex:1;}button{width: 200px;height: 40px;font-size: 18px;background-color: transparent;border:none;box-shadow: 0 0 10px 10px rgba(10, 163, 209, 0.4);border-radius: 5px;transition: all .5s;}button:hover{background-color: #ccc;}input{outline: none;border-radius: 5px;border:none;width: 250px;height: 40px;background-color:#cccc;padding-left: 10px;color:white;}span{color:#ccc;font-size: 20px;}</style>
</head><body><div class="contain"><div class="content"><div class="logo"><h1>登录</h1></div><div class="input"><div class="inputusername"><span>账号</span><input type="text" placeholder="请输入账号"></div><div class="inputpasswd"><span>密码</span><input type="text" placeholder="请输入密码"></div><div class="button"><button>登录</button></div></div></div></div>
</body></html>

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

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