表单美化+html+css
生活随笔
收集整理的這篇文章主要介紹了
表单美化+html+css
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
參考博客：http://www.laozuo.org/3495.html
美化結果：
美化代碼：
<!doctype html> <html class=""> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style type="text/css">.elegant-aero { margin-left:auto; margin-right:auto; max-width: 500px; background: #D2E9FF; padding: 20px 20px 20px 20px; font: 12px Arial, Helvetica, sans-serif; color: #666; } .elegant-aero h1 { font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 10px 10px 10px 20px; display: block; background: #C0E1FF; border-bottom: 1px solid #B8DDFF; margin: -20px -20px 15px; } .elegant-aero h1>span { display: block; font-size: 11px; } .elegant-aero label>span { float: left; margin-top: 10px; color: #5E5E5E; } .elegant-aero label { display: block; margin: 0px 0px 5px; } .elegant-aero label>span {float: left;width: 20%;text-align: right;padding-right: 10px;margin-top: 10px;font-weight: bold; } .elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea, .elegant-aero select { color: #888; width: 70%; padding: 0px 0px 0px 5px; border: 1px solid #C5E2FF; background: #FBFBFB; outline: 0; -webkit-box-shadow:inset 0px 1px 6px #ECF3F5; box-shadow: inset 0px 1px 6px #ECF3F5; font: 200 12px/25px Arial, Helvetica, sans-serif; height: 30px; line-height:15px; margin: 2px 6px 16px 0px; } .elegant-aero textarea{ height:100px; padding: 5px 0px 0px 5px; width: 70%; } .elegant-aero select { background: #fbfbfb url('down-arrow.png') no-repeat right; background: #fbfbfb url('down-arrow.png') no-repeat right; appearance:none; -webkit-appearance:none; -moz-appearance: none; text-indent: 0.01px; text-overflow: ''; width: 70%; } .elegant-aero .button{ padding: 10px 30px 10px 30px; background: #66C1E4; border: none; color: #FFF; box-shadow: 1px 1px 1px #4C6E91; -webkit-box-shadow: 1px 1px 1px #4C6E91; -moz-box-shadow: 1px 1px 1px #4C6E91; text-shadow: 1px 1px 1px #5079A3; } .elegant-aero .button:hover{ background: #3EB1DD; }.btrr {text-align: center; } </style> </head> <body> <div class=""> <form action="" method="post" class="elegant-aero"><h1 class="elegant-aero h1">信息完善<span class="elegant-aero h1>span">請完善下面的信息（注意：一旦提交不可更改！）</span></h1><label class="elegant-aero label"><span>用戶：</span><select name="selection" ><option value="Job Inquiry">學生</option><option value="General Question">老師</option></select></label><label class="elegant-aero label"><span>編號：</span><input id="sno" type="text" name="sno" placeholder="請輸入要綁定的學號/教職工號" /></label><table><tr class="btrr"> <td width="489"><input type="submit" class="button" value="提交" /></td> </tr></table> </form> </div> </body> </html>?
?
總結
以上是生活随笔為你收集整理的表单美化+html+css的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 即时通信聊天工具的原理与设计
- 下一篇： 3*3数字华容道