第三课简易登陆框 king

---恢复内容开始---

一.效果图

二、知识点.

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="请输入用户名">

　　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

---恢复内容结束---

第三 课 简易登陆框 king

第三课简易登陆框 king