使用CSS控制表单样式/示例演示
生活随笔
收集整理的這篇文章主要介紹了
使用CSS控制表单样式/示例演示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、具體需求與樣式
二、代碼與注釋
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>CSS控制表單樣式</title><style>*{margin: 0; padding: 0; border: none;/*清除默認樣式，內外邊距與默認邊框效果*/}form{width: 300px;height: 120px;background: #63D3D8;margin: 50px auto;padding-top: 30px;/*設置form表單域的寬度高度上邊距以及背景與居中效果*/}form,input,span,p{font-size: 12px; /*定義所有元素的字體大小*/}.btn{width: 87px;height: 24px;background: url("5.jpg") no-repeat center center;margin-left: 120px;margin-top: 10px;/*定義按鈕的效果*/}p input{width: 180px;border: 1px solid;background: #FFF url("1.jpg") left center no-repeat;padding-left: 20px;margin-bottom: 10px;}.one span{margin-left: 10px;}.two span{margin-left: 40px;}.one input{color: #999;}.two input{background: #FFF url("2.jpg") left center no-repeat;}</style> </head><body><form action="#" method="post" name="list"><p class="one"><span>賬號/號碼</span><input type="text" value="請輸入賬號"></p><p class="two"><span>密碼</span><input type="password"></p><input type="button" class="btn"></form> </body> </html>三、效果展示
//歡迎加我VX進群交流 vx賬號：-Sep07總結
以上是生活随笔為你收集整理的使用CSS控制表单样式/示例演示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux DSA 开发上手笔记(一)
- 下一篇： CSS表单样式