一.效果圖 二、. 三、源碼 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="keywords" content="關鍵詞"> <meta name="description" content="描述"> <title ...
---恢復內容開始---
一.效果圖
二、知識點.
1、 /*頭部顏色變換樣式，只是顯示樣式，不是實際內容，使用偽類*/
2、background-image: -webkit-linear-gradient(left,#390 0%,#390 20%,#60f 20%,#60f 40%,#3cf 40%,#3cf 60%,#f30 60%,#f30 80%,#fc3 80%,#fc3 100%);
/*-webkit: 使用谷歌內核 -linear-gradient：顏色漸變屬性，css3新屬性只適用於谷歌內核 */
3、text-indent: 20px;/* 縮進 */
4、placeholder 文本提示
5、<input type="text" class="text" placeholder="請輸入用戶名"><!-- placeholder 文本提示 -->
type=password 密碼框 type=submit 提交框
三、源碼
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="keywords" content="關鍵詞"> <meta name="description" content="描述"> <title>登陸框</title> <title>Document</title> <style> body{ margin: 0; padding: 0; } #login{ margin: 100px auto; width: 300px; height: 300px; background-color: #66ffff; border-radius: 10px; text-align: center; } #login:before{/*頭部顏色變換樣式，只是顯示樣式，不是實際內容，使用偽類*/ content: '';/*激活偽類*/ display: block;/*變為塊級元素，才能顯示出來*/ width: 100%; height: 10px; background-image: -webkit-linear-gradient(left,#390 0%,#390 20%,#60f 20%,#60f 40%,#3cf 40%,#3cf 60%,#f30 60%,#f30 80%,#fc3 80%,#fc3 100%);/* -webkit: 使用谷歌內核 -linear-gradient：顏色漸變屬性，css3新屬性只適用於谷歌內核 */ border-radius: 10px 10px 0 0; } #login h1{ color: #096; } #login input{ width: 240px; height: 40px; margin-bottom: 30px; border-radius: 5px; } .text{ border: 1px solid #333; text-indent: 20px;/* 縮進 */ } .submit{ border: none;/*清除邊框樣式*/ background-color: #2290de; } </style> </head> <body> <div id="login"> <h1>Login</h1> <input type="text" class="text" placeholder="請輸入用戶名"><!-- placeholder 文本提示 --> <input type="password" class="text" placeholder="請輸入密碼"> <input type="submit" class="submit"> </div> </body> </html>View Code
---恢復內容結束---
