界面效果图
1…HTML的勤茶
！ doctypehtmlhtmlheadmetacharset=' utf-8 ' titleloginui/titlelinkrel=' style sheet ' href=' log in.CSS '/headbodydiv H2 formdivclass=' inputbox ' input type=' text ' name=' ' required=' label用户名/label/divdivclass=' iid
body{ margin:0； padding: 0； 字体故障： sans-serif； ackground:URL(login.jpg )； 备份大小： cover； }.box{ position: absolute； top: 50%； left: 50%； transform:translate(-50%、-50%； width:400px； padding: 40px； background : rgba (0，0，0，8)； 盒- sizing :盒； box-shadow :015 p x25 px rgba (0，0，0，5)； border-radius: 10px； /*登录窗口圆角cmd lm//.box H2 { margin :0030 px； 垫：0； color:#fff； 文本照明3360中心； }.box.inputbox { position : relative； }.box.inputbox input { width :100 %； padding: 10px 0； 字体：16 px； color: #fff； 间隔： 1px； 边距- bottom :30 px； /*输入框中输入yjddqz/border:none； border-bottom:1px solid #fff； outline:none； background :传输； }.box.inputbox label { position : absolute； top: 0； left: 0； padding: 10px 0； 字体大小： 16px； color: #fff； pointer-events: none； transition:5s； }.box.inputbox input : focus至label， box.inputbox input 3360 valid至label { top :-18px； left: 0； color: #03a9f4； 字体大小： 12px； }.box input [ type=' submit ' ] { background : transparent； border: none； outline: none； color: #fff； background: #03a9f4； padding: 10px 20px； cursor: pointer； border-radius: 5px； }
背景图像：