一.效果
二.具体实现
1.index.html
<!DOCTYPE html><html><head><meta charset=\"utf-8\" /><link rel=\"stylesheet\" href=\"./css/style.css\" /><link rel=\"stylesheet\" href=\"css/iconfont.css\"/><title>登录界面</title></head><body><div id=\"bigBox\"><h1>LOGIN</h1><div class=\"inputBox\"><div class=\"inputText\"><span class=\"iconfont icon-user\"></span><input type=\"text\" placeholder=\"username\" /></div><div class=\"inputText\"><span class=\"iconfont icon-password\"></span><input type=\"password\" placeholder=\"password\" /></div><input type=\"button\" value=\"LOGIN\" class=\"inputButton\" /></div></div></body></html>
2.style.css
body{margin: 0;padding: 0;background-image: url(../img/timg.jpeg);background-repeat: no-repeat;}#bigBox{margin: 0 auto;margin-top: 200px;padding: 20px 50px;background-color: rgba(0,0,0,0.8);width: 400px;height: 300px;border-radius: 10px;text-align: center;}#bigBox h1{color: white;}#bigBox .inputBox{margin-top: 50px;}#bigBox .inputBox .inputText{margin-top: 20px;}#bigBox .inputBox .inputText span{color: white;}#bigBox .inputBox .inputText input{border: 0;padding: 10px 10px;border-bottom: 1px solid white;background-color: #00000000;color: white;}#bigBox .inputBox .inputButton{border: 0;width: 150px;height: 25px;color: white;margin-top: 30px;border-radius: 20px;background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);}
3.iconfont.css
@font-face {font-family: \"iconfont\";src: url(\'iconfont.eot?t=1601708272399\'); /* IE9 */src: url(\'iconfont.eot?t=1601708272399#iefix\') format(\'embedded-opentype\'), /* IE6-IE8 */url(\'data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARUAAsAAAAACIAAAAQIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEZIQNATYCJAMMCwgABCAFhG0HORtWB8iemjwJVGYD2yABESTIaRRB/djr3nsXAlCZyKQ8vgpRAftEtuzq6tiY6gpdCSh8/xCedv10Sv8dbM5oXIoh1UA95bYvIG8HF8L5j3unf3WehfNZlssckz91AcYBBTTG9GiKFEhAHlDD2AUt8TCBdtOssI6FRCUBVckcFYibfG4+UM0YZQM1tGqaKxameAWatJbHE87jZfD5+GcrVCmaKnPi8RvBRcDvp+HzTGTvf5NzHgJE09nBllGxCUjiQqXzFCRKbkK0q0p2c2GzFMpUkf8NAqGmbt7oD68QzUxlJ6SsKspFiRwOwa+zAqhy/ctoRiu+4D+kDG6csrNzN0CHze66LJenKBSpMlny9es1tjwp5KdvIpdX9cgTCHKdwnXVKnIW2cxifXKYOZeYS8pTj3E4T1fg43jvEVnSuPbYamz2egyMj+P5y413yMxx7PL1gguyXkXswZSVKwli5lxNFjlrk5YWPoucB2vJbXKLuShGzLS6zUTRJ16Hk3FsDO97Qw6+xRzXacJmm40tN7pe2yu7IgM63h4AZW8/OvnJQRayf8iUw9pXXFPAyaXnDEDjbM/u/euBkk4bD+79b4/95UtC+i+fXRmb2iok6filY791yONvyFpkHZSvozxIY69jr/2P6Db/uBHXbXN6wkJMbytrJO+zUsLMeSZjz6xjFpKDrgHL0pQWDggMDczPsblT/S7l+RBjVcRBH7UeOtmhsGZfsElYz5ptI67RVVkt1n3N1iWFYTNMzSHdcd0gKnC/am3ibuhF4Ut1J4KLo481hQ6nQ42+aSlFmP1S77AZxnU1eqZy1NaTHCdqoc4GXf1EJAaoAdzIX9NR09/IOXezo1aTtqO2hfO6Ji3HzXnORlr+hv6abuYWTRbvsHV+6zST1BezNNSdXzura7AWg0sAGnUr4gAA9QQy/P+/42mn2c/cnp2vqiX4+sb/QxBsJOiubn07ruBvizrWpSYxTTUVoSM0XNXrlF8B8rnKP66GfveGq4c6lxNaDSVQtJiCqtUimpRNaNJhG5q1OgjtNoQu7zBADBHZhnXtAEKvTVB0+wxVrwtoUu5Ck2FvoVlvINDuRAxs2GE5+OhRMcyXwiKqoJriFzJltG2RomFlAuSWl+SL05KAngLFEn6Esrexy2dCYRkUTzFFUsF1kEppihYzpVQIOA6WlDCUUMwIYKHUhieVCj1sbemqK9kUMqUAdZQYlE8KKkIpUI3CV4hRhvaaS6GF9yeAuMqVyCduIFW5U0BiEvz2KfZs2HVAQ5VlnUi30l2iApcDKSkaD6OJMUpRQqAdKrGSDIqwup8AVEjKBm9AXMiDLWpEd1XaLK8ufb8t0M7cuUaJGikfSaBY9W6+RFLJiIsAAA==\') format(\'woff2\'),url(\'iconfont.woff?t=1601708272399\') format(\'woff\'),url(\'iconfont.ttf?t=1601708272399\') format(\'truetype\'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url(\'iconfont.svg?t=1601708272399#iconfont\') format(\'svg\'); /* iOS 4.1- */}.iconfont {font-family: \"iconfont\" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-user:before {content: \"\\e623\";}.icon-password:before {content: \"\\e75b\";}
爱站程序员基地
