CSS样式表学习实例，表单文本框的简单美化

发布时间：2018-09-11 17:08:02 所属栏目：访谈来源：站长网

导读：学好了CSS，美化各类百般的表单或输入框、按钮、表格都轻松轻易，本示例就是美化表单中的输入框以及按钮的，将体系默认的灰色表单组件酿成切合你网页气魄威风凛凛可能说是你想要的气魄沤背同请先运行一下代码，赏识一下结果吧。演示： !DOCTYPE html PUBLIC -//W3C//D

　　学好了CSS，美化各类百般的表单或输入框、按钮、表格都轻松轻易，本示例就是美化表单中的输入框以及按钮的，将体系默认的灰色表单组件酿成切合你网页气魄威风凛凛可能说是你想要的气魄沤背同请先运行一下代码，赏识一下结果吧。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS样式表进修实例，表单美化</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style> form { border: 1px dotted #aaaaaa; padding: 3px 6px 3px 6px; } input.txt{ color: #00008B; background-color: #ADD8E6; border: 1px inset #00008B; width: 200px; } input.btn { color: #00008B; background-color: #ADD8E6; border: 1px outset #00008B; padding: 2px 4px 2px 4px; } </style> </head> <body> <form method="post" action="fields.html"> <p>Are you Know Liehuo.Net? <br /><input type="text" name="name" id="name" class="txt" /></p> <p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn" /></p> </form> </body> </html> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!