第三 课 简易登陆框

Posted liuxingtao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第三 课 简易登陆框相关的知识，希望对你有一定的参考价值。

一.效果图

技术分享图片

二、.

三、源码

技术分享图片 
<!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

 

以上是关于第三 课 简易登陆框的主要内容，如果未能解决你的问题，请参考以下文章

[简易的网站登录注册,注销退出操作]

第一次上机课要做什么事情？

第68课 基础图形绘制（下）

Life In Changsha College- 第三次冲刺

第三十六课文本编辑器中的功能交互

如何在Android手机中开发QQ账户登陆功能