CSS3扁平风格浮动标签用户登录

新建html文档。

准备好需要用到的字体图标。

书写hmtl代码。

书写css代码。button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }button, input { line-height: normal; }button, select { text-transform: none; }button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }button[disabled], html input[disabled] { cursor: default; }input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}button::-moz-focus-inner, input::-moz-focus-inner {border:0;padding:0;}textarea { overflow: auto; vertical-align: top; }table { border-collapse: collapse; border-spacing: 0; }

代码整体结构。

查看效果。