<\/a><\/p>\n\u603b\u5171\u67096\u79cd\u6837\u5f0f\uff0c\u4f7f\u7528\u65f6\u6839\u636e\u4f60\u559c\u6b22\u7684\u6837\u5f0f\u9009\u62e9\u3002\u4f7f\u7528\u65b9\u6cd5\uff1a\u628a\u4e0b\u9762\u7ea2\u8272\u7684\u90e8\u5206\u66ff\u6362\u6210\u6837\u5f0f\u91cc\u9762\u7684\u540d\u79f0\u5373\u53ef\u3002<\/p>\n
\u8868\u5355\u4ee3\u7801\uff1a<\/p>\n
<form action=\"\" method=\"post\" class=\"STYLE-NAME<\/span>\">\r\n <h1>Contact Form\r\n <span>Please fill all the texts in the fields.<\/span>\r\n <\/h1>\r\n <label>\r\n <span>Your Name :<\/span>\r\n <input id=\"name\" type=\"text\" name=\"name\" placeholder=\"Your Full Name\" \/>\r\n <\/label>\r\n <label>\r\n <span>Your Email :<\/span>\r\n <input id=\"email\" type=\"email\" name=\"email\" placeholder=\"Valid Email Address\" \/>\r\n <\/label>\r\n \r\n <label>\r\n <span>Message :<\/span>\r\n <textarea id=\"message\" name=\"message\" placeholder=\"Your Message to Us\"> <\/textarea>\r\n <\/label>\r\n <label>\r\n <span>Subject :<\/span>\r\n <select name=\"selection\">\r\n <option value=\"Job Inquiry\">Job Inquiry<\/option>\r\n <option value=\"General Question\">General Question<\/option>\r\n <\/select>\r\n <\/label>\r\n <label>\r\n <span> <\/span>\r\n <input type=\"button\" class=\"button\" value=\"Send\" \/>\r\n <\/label>\r\n<\/form><\/code><\/pre>\n\u6837\u5f0f\u4e00\uff1a\u57fa\u672c\u7070\u8272\uff08basic-grey\uff09<\/h2>\n.basic-grey {\r\n margin-left:auto;\r\n margin-right:auto;\r\n max-width: 500px;\r\n background: #F7F7F7;\r\n padding: 25px 15px 25px 10px;\r\n font: 12px Georgia, \"Times New Roman\", Times, serif;\r\n color: #888;\r\n text-shadow: 1px 1px 1px #FFF;\r\n border:1px solid #E4E4E4;\r\n}\r\n.basic-grey h1 {\r\n font-size: 25px;\r\n padding: 0px 0px 10px 40px;\r\n display: block;\r\n border-bottom:1px solid #E4E4E4;\r\n margin: -10px -15px 30px -10px;;\r\n color: #888;\r\n}\r\n.basic-grey h1>span {\r\n display: block;\r\n font-size: 11px;\r\n}\r\n.basic-grey label {\r\n display: block;\r\n margin: 0px;\r\n}\r\n.basic-grey label>span {\r\n float: left;\r\n width: 20%;\r\n text-align: right;\r\n padding-right: 10px;\r\n margin-top: 10px;\r\n color: #888;\r\n}\r\n.basic-grey input[type=\"text\"], .basic-grey input[type=\"email\"], .basic-grey textarea, .basic-grey select {\r\n border: 1px solid #DADADA;\r\n color: #888;\r\n height: 30px;\r\n margin-bottom: 16px;\r\n margin-right: 6px;\r\n margin-top: 2px;\r\n outline: 0 none;\r\n padding: 3px 3px 3px 5px;\r\n width: 70%;\r\n font-size: 12px;\r\n line-height:15px;\r\n box-shadow: inset 0px 1px 4px #ECECEC;\r\n -moz-box-shadow: inset 0px 1px 4px #ECECEC;\r\n -webkit-box-shadow: inset 0px 1px 4px #ECECEC;\r\n}\r\n.basic-grey textarea{\r\n padding: 5px 3px 3px 5px;\r\n}\r\n.basic-grey select {\r\n background: #FFF url('down-arrow.png') no-repeat right;\r\n background: #FFF url('down-arrow.png') no-repeat right);\r\n appearance:none;\r\n -webkit-appearance:none;\r\n -moz-appearance: none;\r\n text-indent: 0.01px;\r\n text-overflow: '';\r\n width: 70%;\r\n height: 35px;\r\n line-height: 25px;\r\n}\r\n.basic-grey textarea{\r\n height:100px;\r\n}\r\n.basic-grey .button {\r\n background: #E27575;\r\n border: none;\r\n padding: 10px 25px 10px 25px;\r\n color: #FFF;\r\n box-shadow: 1px 1px 5px #B6B6B6;\r\n border-radius: 3px;\r\n text-shadow: 1px 1px 1px #9E3F3F;\r\n cursor: pointer;\r\n}\r\n.basic-grey .button:hover {\r\n background: #CF7A7A\r\n}<\/code><\/pre>\n\u6837\u5f0f\u4e8c\uff1a\u4f18\u96c5\u7684Aero\u6837\u5f0f\uff08elegant-aero\uff09<\/strong><\/h2>\n.elegant-aero {\r\n margin-left:auto;\r\n margin-right:auto;\r\n max-width: 500px;\r\n background: #D2E9FF;\r\n padding: 20px 20px 20px 20px;\r\n font: 12px Arial, Helvetica, sans-serif;\r\n color: #666;\r\n}\r\n.elegant-aero h1 {\r\n font: 24px \"Trebuchet MS\", Arial, Helvetica, sans-serif;\r\n padding: 10px 10px 10px 20px;\r\n display: block;\r\n background: #C0E1FF;\r\n border-bottom: 1px solid #B8DDFF;\r\n margin: -20px -20px 15px;\r\n}\r\n.elegant-aero h1>span {\r\n display: block;\r\n font-size: 11px;\r\n}\r\n \r\n.elegant-aero label>span {\r\n float: left;\r\n margin-top: 10px;\r\n color: #5E5E5E;\r\n}\r\n.elegant-aero label {\r\n display: block;\r\n margin: 0px 0px 5px;\r\n}\r\n.elegant-aero label>span {\r\n float: left;\r\n width: 20%;\r\n text-align: right;\r\n padding-right: 15px;\r\n margin-top: 10px;\r\n font-weight: bold;\r\n}\r\n.elegant-aero input[type=\"text\"], .elegant-aero input[type=\"email\"], .elegant-aero textarea, .elegant-aero select {\r\n color: #888;\r\n width: 70%;\r\n padding: 0px 0px 0px 5px;\r\n border: 1px solid #C5E2FF;\r\n background: #FBFBFB;\r\n outline: 0;\r\n -webkit-box-shadow:inset 0px 1px 6px #ECF3F5;\r\n box-shadow: inset 0px 1px 6px #ECF3F5;\r\n font: 200 12px\/25px Arial, Helvetica, sans-serif;\r\n height: 30px;\r\n line-height:15px;\r\n margin: 2px 6px 16px 0px;\r\n}\r\n.elegant-aero textarea{\r\n height:100px;\r\n padding: 5px 0px 0px 5px;\r\n width: 70%;\r\n}\r\n.elegant-aero select {\r\n background: #fbfbfb url('down-arrow.png') no-repeat right;\r\n background: #fbfbfb url('down-arrow.png') no-repeat right;\r\n appearance:none;\r\n -webkit-appearance:none;\r\n -moz-appearance: none;\r\n text-indent: 0.01px;\r\n text-overflow: '';\r\n width: 70%;\r\n}\r\n.elegant-aero .button{\r\n padding: 10px 30px 10px 30px;\r\n background: #66C1E4;\r\n border: none;\r\n color: #FFF;\r\n box-shadow: 1px 1px 1px #4C6E91;\r\n -webkit-box-shadow: 1px 1px 1px #4C6E91;\r\n -moz-box-shadow: 1px 1px 1px #4C6E91;\r\n text-shadow: 1px 1px 1px #5079A3;\r\n \r\n}\r\n.elegant-aero .button:hover{\r\n background: #3EB1DD;\r\n}<\/code><\/pre>\n\u6837\u5f0f\u4e09\uff1a\u7b80\u5355\u7eff\u8272(smart-green\uff09<\/strong><\/h2>\n.smart-green {\r\n margin-left:auto;\r\n margin-right:auto;\r\n max-width: 500px;\r\n background: #F8F8F8;\r\n padding: 30px 30px 20px 30px;\r\n font: 12px Arial, Helvetica, sans-serif;\r\n color: #666;\r\n border-radius: 5px;\r\n -webkit-border-radius: 5px;\r\n -moz-border-radius: 5px;\r\n}\r\n.smart-green h1 {\r\n font: 24px \"Trebuchet MS\", Arial, Helvetica, sans-serif;\r\n padding: 20px 0px 20px 40px;\r\n display: block;\r\n margin: -30px -30px 10px -30px;\r\n color: #FFF;\r\n background: #9DC45F;\r\n text-shadow: 1px 1px 1px #949494;\r\n border-radius: 5px 5px 0px 0px;\r\n -webkit-border-radius: 5px 5px 0px 0px;\r\n -moz-border-radius: 5px 5px 0px 0px;\r\n border-bottom:1px solid #89AF4C;\r\n \r\n}\r\n.smart-green h1>span {\r\n display: block;\r\n font-size: 11px;\r\n color: #FFF;\r\n}\r\n \r\n.smart-green label {\r\n display: block;\r\n margin: 0px 0px 5px;\r\n}\r\n.smart-green label>span {\r\n float: left;\r\n margin-top: 10px;\r\n color: #5E5E5E;\r\n}\r\n.smart-green input[type=\"text\"], .smart-green input[type=\"email\"], .smart-green textarea, .smart-green select {\r\n color: #555;\r\n height: 30px;\r\n line-height:15px;\r\n width: 100%;\r\n padding: 0px 0px 0px 10px;\r\n margin-top: 2px;\r\n border: 1px solid #E5E5E5;\r\n background: #FBFBFB;\r\n outline: 0;\r\n -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);\r\n box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);\r\n font: normal 14px\/14px Arial, Helvetica, sans-serif;\r\n}\r\n.smart-green textarea{\r\n height:100px;\r\n padding-top: 10px;\r\n}\r\n.smart-green select {\r\n background: url('down-arrow.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);\r\n background: url('down-arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));\r\n appearance:none;\r\n -webkit-appearance:none;\r\n -moz-appearance: none;\r\n text-indent: 0.01px;\r\n text-overflow: '';\r\n width:100%;\r\n height:30px;\r\n}\r\n.smart-green .button {\r\n background-color: #9DC45F;\r\n border-radius: 5px;\r\n -webkit-border-radius: 5px;\r\n -moz-border-border-radius: 5px;\r\n border: none;\r\n padding: 10px 25px 10px 25px;\r\n color: #FFF;\r\n text-shadow: 1px 1px 1px #949494;\r\n}\r\n.smart-green .button:hover {\r\n background-color:#80A24A;\r\n}<\/code><\/pre>\n\u6837\u5f0f\u56db\uff1a\u767d\u8272\u6837\u5f0f\uff08white-pink\uff09<\/strong><\/h2>\n.white-pink {\r\n margin-left:auto;\r\n margin-right:auto;\r\n max-width: 500px;\r\n background: #FFF;\r\n padding: 30px 30px 20px 30px;\r\n box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;\r\n -webkit-box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;\r\n font: 12px Arial, Helvetica, sans-serif;\r\n color: #666;\r\n border-radius: 10px;\r\n -webkit-border-radius: 10px;\r\n}\r\n.white-pink h1 {\r\n font: 24px \"Trebuchet MS\", Arial, Helvetica, sans-serif;\r\n padding: 0px 0px 10px 40px;\r\n display: block;\r\n border-bottom: 1px solid #F5F5F5;\r\n margin: -10px -30px 10px -30px;\r\n color: #969696;\r\n}\r\n.white-pink h1>span {\r\n display: block;\r\n font-size: 11px;\r\n color: #C4C2C2;\r\n}\r\n.white-pink label {\r\n display: block;\r\n margin: 0px 0px 5px;\r\n}\r\n.white-pink label>span {\r\n float: left;\r\n width: 20%;\r\n text-align: right;\r\n padding-right: 10px;\r\n margin-top: 10px;\r\n color: #969696;\r\n}\r\n.white-pink input[type=\"text\"], .white-pink input[type=\"email\"], .white-pink textarea,.white-pink select{\r\n color: #555;\r\n width: 70%;\r\n padding: 3px 0px 3px 5px;\r\n margin-top: 2px;\r\n margin-right: 6px;\r\n margin-bottom: 16px;\r\n border: 1px solid #e5e5e5;\r\n background: #fbfbfb;\r\n height: 25px;\r\n line-height:15px;\r\n outline: 0;\r\n -webkit-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);\r\n box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);\r\n}\r\n.white-pink textarea{\r\n height:100px;\r\n padding: 5px 0px 0px 5px;\r\n width: 70%;\r\n}\r\n.white-pink .button {\r\n -moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;\r\n -webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;\r\n box-shadow:inset 0px 1px 0px 0px #fbafe3;\r\n background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d) );\r\n background:-moz-linear-gradient( center top, #ff5bb0 5%, #ef027d 100% );\r\n filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d');\r\n background-color:#ff5bb0;\r\n border-radius:9px;\r\n -webkit-border-radius:9px;\r\n -moz-border-border-radius:9px;\r\n border:1px solid #ee1eb5;\r\n display:inline-block;\r\n color:#ffffff;\r\n font-family:Arial;\r\n font-size:15px;\r\n font-weight:bold;\r\n font-style:normal;\r\n height: 40px;\r\n line-height: 30px;\r\n width:100px;\r\n text-decoration:none;\r\n text-align:center;\r\n text-shadow:1px 1px 0px #c70067;\r\n}\r\n.white-pink .button:hover {\r\n background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ef027d), color-stop(1, #ff5bb0) );\r\n background:-moz-linear-gradient( center top, #ef027d 5%, #ff5bb0 100% );\r\n filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d', endColorstr='#ff5bb0');\r\n background-color:#ef027d;\r\n}\r\n.white-pink .button:active {\r\n position:relative;\r\n top:1px;\r\n}\r\n.white-pink select {\r\n background: url('down-arrow.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);\r\n background: url('down-arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));\r\n appearance:none;\r\n -webkit-appearance:none;\r\n -moz-appearance: none;\r\n text-indent: 0.01px;\r\n text-overflow: '';\r\n width: 70%;\r\n line-height: 15px;\r\n height: 30px;\r\n}<\/code><\/pre>\n\u6837\u5f0f\u4e94\uff1aBootstrap\u98ce\u683c\u6837\u5f0f<\/strong><\/h2>\n.bootstrap-frm {\r\n margin-left:auto;\r\n margin-right:auto;\r\n max-width: 500px;\r\n background: #FFF;\r\n padding: 20px 30px 20px 30px;\r\n font: 12px \"Helvetica Neue\", Helvetica, Arial, sans-serif;\r\n color: #888;\r\n text-shadow: 1px 1px 1px #FFF;\r\n border:1px solid #DDD;\r\n border-radius: 5px;\r\n -webkit-border-radius: 5px;\r\n -moz-border-radius: 5px;\r\n}\r\n.bootstrap-frm h1 {\r\n font: 25px \"Helvetica Neue\", Helvetica, Arial, sans-serif;\r\n padding: 0px 0px 10px 40px;\r\n display: block;\r\n border-bottom: 1px solid #DADADA;\r\n margin: -10px -30px 30px -30px;\r\n color: #888;\r\n}\r\n.bootstrap-frm h1>span {\r\n display: block;\r\n font-size: 11px;\r\n}\r\n.bootstrap-frm label {\r\n display: block;\r\n margin: 0px 0px 5px;\r\n}\r\n.bootstrap-frm label>span {\r\n float: left;\r\n width: 20%;\r\n text-align: right;\r\n padding-right: 10px;\r\n margin-top: 10px;\r\n color: #333;\r\n font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\r\n font-weight: bold;\r\n}\r\n.bootstrap-frm input[type=\"text\"], .bootstrap-frm input[type=\"email\"], .bootstrap-frm textarea, .bootstrap-frm select{\r\n border: 1px solid #CCC;\r\n color: #888;\r\n height: 20px;\r\n line-height:15px;\r\n margin-bottom: 16px;\r\n margin-right: 6px;\r\n margin-top: 2px;\r\n outline: 0 none;\r\n padding: 5px 0px 5px 5px;\r\n width: 70%;\r\n border-radius: 4px;\r\n -webkit-border-radius: 4px;\r\n -moz-border-radius: 4px;\r\n -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\r\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\r\n -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\r\n}\r\n.bootstrap-frm select {\r\n background: #FFF url('down-arrow.png') no-repeat right;\r\n background: #FFF url('down-arrow.png') no-repeat right;\r\n appearance:none;\r\n -webkit-appearance:none;\r\n -moz-appearance: none;\r\n text-indent: 0.01px;\r\n text-overflow: '';\r\n width: 70%;\r\n height: 35px;\r\n line-height:15px;\r\n}\r\n.bootstrap-frm textarea{\r\n height:100px;\r\n padding: 5px 0px 0px 5px;\r\n width: 70%;\r\n}\r\n.bootstrap-frm .button {\r\n background: #FFF;\r\n border: 1px solid #CCC;\r\n padding: 10px 25px 10px 25px;\r\n color: #333;\r\n border-radius: 4px;\r\n}\r\n.bootstrap-frm .button:hover {\r\n color: #333;\r\n background-color: #EBEBEB;\r\n border-color: #ADADAD;\r\n}<\/code><\/pre>\n\u6837\u5f0f\u516d\uff1a\u6697\u9ed1\u8272\u6837\u5f0f\uff08dark-matter\uff09<\/h2>\n.dark-matter {\r\n margin-left: auto;\r\n margin-right: auto;\r\n max-width: 500px;\r\n background: #555;\r\n padding: 20px 30px 20px 30px;\r\n font: 12px \"Helvetica Neue\", Helvetica, Arial, sans-serif;\r\n color: #D3D3D3;\r\n text-shadow: 1px 1px 1px #444;\r\n border: none;\r\n border-radius: 5px;\r\n -webkit-border-radius: 5px;\r\n -moz-border-radius: 5px;\r\n}\r\n.dark-matter h1 {\r\n padding: 0px 0px 10px 40px;\r\n display: block;\r\n border-bottom: 1px solid #444;\r\n margin: -10px -30px 30px -30px;\r\n}\r\n.dark-matter h1>span {\r\n display: block;\r\n font-size: 11px;\r\n}\r\n.dark-matter label {\r\n display: block;\r\n margin: 0px 0px 5px;\r\n}\r\n.dark-matter label>span {\r\n float: left;\r\n width: 20%;\r\n text-align: right;\r\n padding-right: 10px;\r\n margin-top: 10px;\r\n font-weight: bold;\r\n}\r\n.dark-matter input[type=\"text\"], .dark-matter input[type=\"email\"], .dark-matter textarea, .dark-matter select {\r\n border: none;\r\n color: #525252;\r\n height: 25px;\r\n line-height:15px;\r\n margin-bottom: 16px;\r\n margin-right: 6px;\r\n margin-top: 2px;\r\n outline: 0 none;\r\n padding: 5px 0px 5px 5px;\r\n width: 70%;\r\n border-radius: 2px;\r\n -webkit-border-radius: 2px;\r\n -moz-border-radius: 2px;\r\n -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\r\n background: #DFDFDF;\r\n}\r\n.dark-matter select {\r\n background: #DFDFDF url('down-arrow.png') no-repeat right;\r\n background: #DFDFDF url('down-arrow.png') no-repeat right;\r\n appearance:none;\r\n -webkit-appearance:none;\r\n -moz-appearance: none;\r\n text-indent: 0.01px;\r\n text-overflow: '';\r\n width: 70%;\r\n height: 35px;\r\n color: #525252;\r\n line-height: 25px;\r\n}\r\n.dark-matter textarea{\r\n height:100px;\r\n padding: 5px 0px 0px 5px;\r\n width: 70%;\r\n}\r\n.dark-matter .button {\r\n background: #FFCC02;\r\n border: none;\r\n padding: 10px 25px 10px 25px;\r\n color: #585858;\r\n border-radius: 4px;\r\n -moz-border-radius: 4px;\r\n -webkit-border-radius: 4px;\r\n text-shadow: 1px 1px 1px #FFE477;\r\n font-weight: bold;\r\n box-shadow: 1px 1px 1px #3D3D3D;\r\n -webkit-box-shadow:1px 1px 1px #3D3D3D;\r\n -moz-box-shadow:1px 1px 1px #3D3D3D;\r\n}\r\n.dark-matter .button:hover {\r\n color: #333;\r\n background-color: #EBEBEB;\r\n<\/code><\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
HTML+CSS\u7528\u6237\u7559\u8a00\u8868\u5355\uff0c\u5148\u770b\u4e00\u4e0b\u6548\u679c\uff08\u672c\u6548\u679c\u662f\u7b2c\u516d\u79cd\u6837\u5f0f\uff09 \u603b\u5171\u67096\u79cd\u6837\u5f0f\uff0c\u4f7f\u7528\u65f6\u6839\u636e\u4f60\u559c\u6b22\u7684\u6837\u5f0f\u9009\u62e9\u3002 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-2825","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/posts\/2825","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/comments?post=2825"}],"version-history":[{"count":0,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/posts\/2825\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/media?parent=2825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/categories?post=2825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/tags?post=2825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}