HTML+CSS系列:登入介面實現 - IT145.com

文章推薦指數: 80 %
投票人數:10人

具體實現 1.index.html. ... HTML+CSS系列:登入介面實現 ... DOCTYPE html>

登入介面

LOGIN

2.style.css body{ margin:0; padding:0; background-image:url(../img/timg.jpeg); background-repeat:no-repeat; } #bigBox{ margin:0auto; margin-top:200px; padding:20px50px; background-color:rgba(0,0,0,0.8); width:400px; height:300px; border-radius:10px; text-align:center; } #bigBoxh1{ color:white; } #bigBox.inputBox{ margin-top:50px; } #bigBox.inputBox.inputText{ margin-top:20px; } #bigBox.inputBox.inputTextspan{ color:white; } #bigBox.inputBox.inputTextinput{ border:0; padding:10px10px; border-bottom:1pxsolidwhite; 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(toright,#b8cbb80%,#b8cbb80%,#b465da0%,#cf6cc933%,#ee609c66%,#ee609c100%); } 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,iOS4.2+*/ url('iconfont.svg?t=1601708272399#iconfont')format('svg');/*iOS4.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"; }   相關文章 英特爾:一失足成千古恨,再回頭已「百年身」 2021-05-1214:32:11 11歲男孩日充遊戲7千多元!家長稱實名存漏洞,騰訊退費 2021-05-1214:32:00 火龍果財經:ETH、BTC有什麼不同 2021-05-1214:31:57 誰更令你心動?合資品牌銷量支柱齊換代 2021-05-1214:31:30 蘋果iPhone13Pro被截胡,國產廠商搶先一步,庫克可能也沒料到 2021-05-1214:31:20 印度工廠現大規模感染,iPhone產量被砍半!富士康母公司連續3天大跌,近600億市值蒸發 2021-05-1214:31:19 熱門文章 1win10升級後無法調整螢幕解析度怎麼辦 2Win7/8.1/10/Office啟用工具使用教學(KMSpico) 3win10下【寬頻連線錯誤813】怎麼辦? 4Excel密碼破解:開啟密碼,保護密碼,VBA密碼 5如何更改AndroidStudio的程式碼字型和顏色 6EXCEL技巧——EXCEL如何製作族譜 7AdobePhotoshopCC官方中文版安裝破解教學 8如何使用PPT製作轉盤抽獎的動畫 9excel表格怎麼設定到期日前自動提醒功能 10如何在Photoshop中開啟並使用pat格式的檔案 IT145.comE-mail:sddin#qq.com


請為這篇文章評分?