css3实验登录页面

主页 M

css3实验登录页面

2020-05-25 网页编程网 网页编程网

<style> 
* {margin:0;padding:0}
html,body{
    height: 100%;/*获取浏览器100%高度*/
}
body{
    display: flex;/*弹性盒。引grid，风格布局控制2个方位，二行三列grid-row: 2;grid-column: 3;修改成一行一列即可*/
    justify-content: center;/*主轴方向居中*/
    align-items: center;/*副轴方向居中，可代替margin:0 auto*/
    background:url(1.jpg) no-repeat center/cover; 
}
.login{
    width:300px;
    height:300px;
    background-color:white;
    border-radius: 8px;
}
.login:before{
    display: block;
    content: '';/*激活伪*/
    width: 100%;
    height: 10px;
    background:linear-gradient(90deg, #27AE60 0%, #27AE60 20%,#8E44AD 20%,#8E44AD 40%,#3498DB 40%,#3498DB 60%,#E74C3C 60%,#E74C3C 80%,#F1C40F 80%,#F1C40F 100%);
    border-radius: 6px 6px 0 0;/*css3圆角属性*/
}
.title{
    line-height: 80px;
    text-align: center;
    font-size: 2em;/*默认16*2*/
    color:#096;
}
.login-content{/*默认兼容父级*/
    display: flex;
    flex-direction: column;/*改变主轴方向，变成竖直*/
    justify-content: space-around;/*居中*/
    align-items: center;
    height: 200px;
}
.login-content input{
    height: 40px;
    width: 80%;
    border: 1px solid #BBB;
    text-indent: 1em;/*首行缩进*/
    border-radius: 5px;
    outline: none;/*取消外边框*/
}
.login-content input[type="submit"]{/*css3选择器*/
    text-indent:0;
    background-color: #E74C3C;
    color: white;
}
/*
伪元素不存在dom中，不能被选中修改，性能好
inline，行为元素，不能给宽高，水
block，有width height
一张网页，只能有一个h1
*/
</style> 
</head> 
<body> 
<div class="login">
<h2 class="title">Login</h2>
<form class="login-content" action="">
    <input type="text" name="" autocomplete="off" placeholder="输入账号" />
    <input type="password" name="" placeholder="输入密码" />    
    <input type="password" name="" placeholder="验证码" />
    <input type="submit" name="submit" value="提交" />
</form>
</div>
</body>

阅读原文

阅读 4685

123 显示电脑版