Web前端之登录表单
生活随笔
收集整理的這篇文章主要介紹了
Web前端之登录表单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
仿照書上的例子寫的
一、HTML
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>登陸表單</title><link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <form><div class="border-radius"></div><input type="text" name="name" placeholder="用戶名"><br><input type="password" name="password" placeholder="密碼"><br><input type="submit" name="submit" value="登陸" class="btn"> </form> </body> </html>二、CSS
body{/*設置背景圖片 不平鋪 水平居中 垂直居中 固定不動*/background: url("../images/1.png") no-repeat center center fixed;/*保持圖像本身的寬高比例，將圖片縮放到正好完全覆蓋定義背景的區域。*/background-size: cover;padding-top: 20px; }form{width: 343px;height: 500px;margin: 0 auto;padding: 30px;/*邊框寬度為1 直線 黑色透明度為20%*/border: 1px solid rgba(0,0,0,.2);/*盒陰影：水平和垂直偏移量都為0 陰影模糊半徑13px 陰影擴展半徑3px 黑色透明度50%*/box-shadow: 0 0 13px 3px rgba(0,0,0,.5);/*添加圓角邊框*/border-radius: 5px;overflow: hidden; } .border-radius{width: 200px;height: 200px;margin: 40px auto;border: 5px solid rgba(255,255,255,.4);border-radius: 200px;background: url("../images/2.jpg") no-repeat center center scroll;/*如果將scroll改為fixed，圖片不可見*/ } input{font-family: 'Source Sans Pro',sans-serif;font-size: 18px;width: 276px;height: 48px;/*box-sizing: border-box;*/border: 1px solid rgba(255,255,255,.4);border-radius: 4px;display: block;/*使得輸入框之間有間隙*/color: #FFF;padding-left: 45px;padding-right: 20px;margin-bottom: 20px;background: rgba(255,255,255,0.4) no-repeat 16px 16px; } /*設置 當光標放到type=submit上時 為一只小手*/ input[type=submit]{cursor: pointer; } ::-webkit-input-placeholder{color: #FFFFFF; } /*當該input元素獲得焦點時，設置背景顏色及盒陰影*/ input:focus{background-color: rgba(0,0,0,.2);box-shadow: 0 0 5px 1px rgba(255,255,255,.5);overflow: hidden; } .btn{width: 138px;height: 44px;background: #00B0DC;margin: 0 auto;padding: 10.5px 21px;border-radius: 6px;color: #e1e1e1;/*text-align: center;*/ } *當鼠標懸浮在該元素時，設置邊框、文字陰影*/ .btn:hover{border: 1px solid #253737;/*水平大小(必) 垂直大小(必) 模糊的距離 顏色，只有這四種屬性值 */text-shadow: 0 1px 0 #333333; } /*當該元素激活(在鼠標點擊與釋放之間發生的事件)時，設置外邊距、文字陰影、邊框、背景顏色 及文字顏色*/ .btn:active{margin-top: 1px;text-shadow: 0 -1px 0 #333333;border: 1px solid #253737;background: #00B0DC;color: #FFFFFF; }結果圖
總結
以上是生活随笔為你收集整理的Web前端之登录表单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS之Background-size:
- 下一篇： HTML导航页面结构