网站架构设计师工资水平,兰州app制作,网站微商城的建设,免费图片编辑工具练习#xff1a;登录界面在我们网页制作的过程中经常遇见#xff0c;所以请你编写一个界面联系一下#xff0c;这个可以增加一些动画或者是其他的效果#xff0c;当然越帅越好。请使用flex或者其他布局练习
例如#xff1a; 代码
!DOCTYPE html
html lang…练习登录界面在我们网页制作的过程中经常遇见所以请你编写一个界面联系一下这个可以增加一些动画或者是其他的效果当然越帅越好。请使用flex或者其他布局练习
例如 代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylehtml {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
/headbodydiv classcontaindiv classcontentdiv classlogoh1登录/h1/divdiv classinputdiv classinputusernamespan账号/spaninput typetext placeholder请输入账号/divdiv classinputpasswdspan密码/spaninput typetext placeholder请输入密码/divdiv classbuttonbutton登录/button/div/div/div/div
/body/html
