您的位置：首页 > 其它

Web技术，制作简易的登录界面

2019-08-20 20:22 106 查看

登录界面

首先需要了解登录界面中分为几个部分（分板块后，设置div，方便操作），我们将其分为三个部分

第一步，制定框架：

1.首先在body部分设置出一个div模块，用于在界面中显示出一个登录的界面框；

2.在一级div中分别设置出三个子div，第二个字div中分别写入input，得到输入框，第三个子div中设置一个button按钮；

<body>

<div class="wrap">
<h1>易购商城后台管理系统</h1>
<form action="">
<div class="input-group">
<i class="icon-user fa fa-user"></i>
<input type="text" name="" class="form-control" placeholder="请输入用户名">
</div>
<div class="input-group">
<i class="icon-user fa fa-lock"></i>
<input type="password" name="" class="form-control" placeholder="请输入密码">
</div>
<div class="input-group btn-group">
<button>登录</button>
</div>
</form>
<p>&copy;软帝集团&nbsp;版权所有</p>
</div>

</body>

第二步，设置css样式

1.首先我们先写一个css文件样式来将一些系统默认的生成的样式清楚，并且设置我们需要的基础格式

/*清除内外边距*/
*{
margin:0;
padding:0;
}
a{
font-size: 12px;
text-decoration: 0;
color:#222;
}
a,
input,
button{
outline: none;
}
ul,ol,li{
list-style: none;
}
h1,h2,h3,h4,h5,h6{
font-weight: 100;
}
img{
display: block;
border: 0;
}

2.设置界面的背景颜色*

body{
background: rgba(0,0,0,0.8);
}

3.设置主div的样式

.wrap{

position:absolute;
left:50%;
top: 50%;

margin:-175px 0 0 -250px;
padding:20px;
width:500px;
height:350px;

background:rgba(255,255,255,0.8);
box-shadow: 0 0 10px rgba(255,255,255,0.5);
box-sizing: border-box;
}

4设置第一个子div的样式

h1{
height: 50px;
font-size:1.6em;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.5);
}

5.设置第二个子div的样式

.input-group{
margin:20px auto;
height:40px;
width:300px;
border:1px solid rgb(22, 160, 93);
}
i{
float:left;
width:40px;
height: 40px;
text-align: center;
line-height: 40px !important;
background:rgb(22, 160, 93);
color:#fff;
/* font-size: 22px !important; */
}
.form-control{
float:left;
padding:0 10px;
height:40px;
border:0;
width:260px;
font-size:18px;
box-sizing: border-box;
}

6设置登录按钮的样式

.btn-group{
border: 0;
margin-top:40px;
}
button{
display: block;
width: 100%;
height:40px;
font-size:1.2em;
letter-spacing: 10px;
border:1px solid rgb(22, 160, 93);
color:rgb(22, 160, 93);
background: #fff;
cursor:pointer;
}
button:hover{
color:#fff;
background: rgb(22, 160, 93);
}

7.登录按钮下的版权注释

p{
font-size: 12px;
text-align: center;
color:#888;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航