当前位置： 移动技术网 > IT编程>网页制作>CSS > 第三 课 简易登陆框

第三 课 简易登陆框

2019年01月25日  | 移动技术网IT编程  | 我要评论

一.效果图

二、.

三、源码

<!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

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网