效果如下
声明:图片与图标来源均来源于堆糖与iconfont阿里巴巴矢量图标库
将图片放置到images中
框架如下
login.html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<link rel="stylesheet" href="../mysite/login.css">
</head>
<body>
<div class="login-box">
<h4>login</h4>
<div class="input-box">
<div class="input-text">
<span class="login-login"><img src="images/4.png"style="width: 25px;height: 25px;"></span>
<input type="text" placeholder="用户名">
</div>
<div class="input-text">
<span class="login-passwd"><img src="images/5.png" style="width: 25px;height: 25px;"></span>
<input type="password" placeholder="密码">
</div>
<div class="button">
登录
</div>
<div class="signup">
还没有账户?<a href="#">注册</a>
</div>
</div>
</div>
</body>
</html>
使用css实现图片效果
在进行实现效果之前,需要了解盒子模型,盒子模型指的是:外边距(margin)+ border(边框) + 内边距(padding)+ content(内容)。
假设div的宽高为300px,但是实际上设置的是content,之后我们又设置了padding:5px;border:1px;所以div的实际宽高为(300px+5px4+1px4)=324px
如果没有设置box-sizing:border-box,它的宽高会自动加上padding与border的值,则需要我们手动计算并调整content的值。
如果设置了box-sizing:border-box,那padding与border的值就不会影响元素的宽高。当于把padding和border的值都算在content里。
首先重置浏览器的默认样式
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
设置body,会用到flex等属性
Flex:弹性布局,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
图片来源于网络
这里我们简单说一下,flex-wrap属性
flex-wrap:
默认情况下,项目都排在一条线上。flex-wrap属性定义,如果一条轴线排不下,如何换行
可以取三个值
(1)nowrap(默认):不换行。
(2)wrap:换行,第一行在上方。
(3)wrap-reverse:换行,第一行在下方。
当使用flex布局时,常会用到以下两个属性
align-items: center; /*这种情况是垂直居中*/
justify-content: center;/*这种情况是水平居中*/
了解后,body的css如下
body{
display: flex;
justify-content: center; /*在容器中央对齐弹性项目*/
align-items: center;
width: 100%;
min-height: 100vh;
background-image:url(images/2.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
overflow: hidden;
}
接下来设置login-box
.login-box{
display: flex;
justify-content: center; /*居中排列*/
align-content:space-around;
flex-wrap: wrap; /*项目排在一条线上,换行,第一行在上方*/
width: 600px;
height: 400px;
background-color: rgba(0, 0, 0,.4);
border: 10px;
padding: 20px 50px;
border-radius: 20px;
}
设置h4标题
.login-box h4{
width: 100%;
display: flex;
justify-content: center;
color: aliceblue;
font-size: 30px;
}
设置input-box
.login-box .input-box{
display:flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
transform: translateY(-35px);
}
设置input-text与span 、input
.login-box .input-box .input-text{
width: 100%;
display: flex;
justify-content: center;
}
.login-box .input-box .input-text span{
color: aliceblue;
font-size: 18px;
margin-top: 20px;
}
.login-box .input-box .input-text input{
border: 0;
padding: 6px;
border-bottom: 1px solid white;
background-color: #ffffff00;
color: #fff;
margin-top: 20px;
}
设置button
.login-box .input-box .button{
display: flex;
justify-content: center;
align-items: center;
margin-top: 25px;
width: 145px;
height: 25px;
color: #fff;
background: linear-gradient(120deg,#a6c0fe 0%, #2E8B57 100%);
border-radius: 25px;
cursor: pointer;
}
设置signup
.login-box .input-box .signup{
width: 100%;
display: flex;
justify-content: center;
margin-top: 40px;
color: #fff;
font-size: 15px;
}
.login-box .input-box .signup a{
color: #a6c0fe;
text-decoration: none;
}
保存成功后使用浏览器访问即可
版权归原作者 bunny养成日记 所有, 如有侵权,请联系我们删除。