回复
前端静态页面--登录页面 原创
深处莫神
发布于 2022-7-21 16:40
浏览
0收藏
@toc
1.登录页面
1.1布局+碰到的问题
1.一张图为背景，当时碰到一个问题就是图片进行了拉伸，其大小就是保持了auto属性，一般网页的大小是1024*768，而图片的宽度大小超过了容器本身的大小，因而图片会出现偏移。
这种情况下，使用==background-size: cover==，图像将被调整大小以适合容器，++但是注意cover这个属性值则一定会保证图片的原宽高比，并保证一定会覆盖整个背景，但是由于这种原因，如果背景和图片的宽高比不一致那么会裁剪图片++
2.头像为div盒子，设置border-radius即可
3.对于Input内输入图标，我一般用背景图四件套则可完成
background-image: url(./images/user.png);
background-repeat: no-repeat;
background-position: 10px ;
background-size: 15px;
4.总结一下background-position(方便自己以后查看)
- 坐标轴属性值有两个,x和y
- 设置一个值的时候表示x轴的移动,y轴为默认居中
- 也可以直接设置center居中、left top左上角等
5.还有一个重点，中间盒子为透明，但是只是盒子透明，而盒子里的元素是不改变透明度的，因此不能用opacity,opacity会使盒子+盒子内元素一起透明。 用==background-color: rgba(255, 255, 255, 0.6);==让盒子背景透明即可。
2.代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-image: url(./images/back.jpg);
background-size: cover;
}
h1{
color:#ffffff;
text-align: center;
margin-top: 30px;
}
.box{
width: 303px;
height:400px;
background-color: rgba(255, 255, 255, 0.6);
margin: 48px auto;
border-radius: 12px;
}
.box1{
width: 302px;
height: 132px;
}
.box1 img{
border-radius: 100px;
width: 100px;
height: 100px;
/* margin: 30px auto; */
margin: 30px 100px 25px 100px;
}
input{
width: 222px;
height:26px;
border-radius:6px;
margin: 25px 40px 0px 40px;
text-indent: 29px;
border: 1px solid #aaaaaa;
outline: none;
}
#name{
background-image: url(./images/user.png);
background-repeat: no-repeat;
background-position: 10px ;
background-size: 15px;
}
#secret{
background-image: url(./images/lock.png);
background-repeat: no-repeat;
background-position: 10px ;
background-size: 15px;
}
#submit{
width: 220px;
height: 30px;
background-color: #9acd32;
color: #ffffff;
margin: 25px 40px 0px 40px;
font-size: 14px;
border-radius: 6px;
border: none;
outline: none;
}
#register{
width: 220px;
height: 30px;
background-color: #dc143c;
color: #ffffff;
margin: 25px 40px 0px 40px;
font-size: 14px;
border-radius: 6px;
border: none;
outline: none;
}
p{
font-size: 13px;
margin: 15px 40px 30px 145px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Hello! Welcome to DouZzhi-IT!</h1>
<div class="box">
<div class="box1">
<img src="./images/Boy.jpg" alt="">
</div>
<input id="name" type="text" placeholder="Username">
<input id="secret" type="text" placeholder="Password">
<button id="submit">Submit</button>
<button id="register">Register</button>
<p>Forget Password?</p>
</div>
</body>
</html>
3.相似练习
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-image: url(./images/back1.jpg);
background-size: cover;
}
h1{
color:#ffffff;
text-align: center;
margin-top: 120px;
font-size: 55px;
}
.box{
margin: 60px auto 280px ;
width: 800px;
height: 440px;
border-radius: 4px;
overflow: hidden;
}
.box1{
width: 340px;
height: 440px;
background-color: #e06965;
float: left;
}
.box11{
width: 157px;
height:140px;
margin:40px auto 100px ;
text-align: center;
}
.box11 p{
font-size: 22px;
color:#fffdf6;
letter-spacing: 10px;
}
.box2{
width: 460px;
height: 440px;
background-color: #ffffff;
float: left;
overflow: hidden;
}
.list{
color: #fbf0de;
margin-top: 90px;
margin-left: 60px;
list-style: circle;
list-style-position: inside;
}
.list li{
font-size:11px;
height: 35px;
}
.box input{
width: 400px;
height: 40px;
border: none;
border: none;
outline: none;
border-bottom: 2px solid #cecfd3;
margin: 5px 1px 10px 20px;
}
.box2 h2{
color: #d4d8d9;
font-size: 20px;
/* overflow: hidden; */
margin: 42px 200px 40px 43px;
color: #e35e59;
}
.box2 h2 span{
color: #cecfd3;
}
button{
width: 77px;
height: 35px;
border-radius: 17px;
background-color: #ffffff;
color: #e35e59;
outline: none;
border:2px solid #e35e59;
/* border: #e35e59; */
margin: 40px auto auto 20px;
}
#name,#email,#password{
background-image: url(./images/user.png);
background-repeat: no-repeat;
background-position: 380px ;
background-size: 15px;
}
</style>
</head>
<body>
<h1>Hello! Welcome to DouZzhi-IT!</h1>
<div class="box">
<div class="box1">
<div class="box11">
<img src="./images/logo1.png" alt="">
<p>Welcome</p>
</div>
<ul class="list">
<li>Simple create your calendar</li>
<li>Add content for each days</li>
<li>Share it to the world(become a rockstar)</li>
</ul>
</div>
<div class="box2">
<h2>Login <span>/ Sign Up</span></h2>
<input type="text" id="name" placeholder="Your Name">
<input type="text" id="email" placeholder="Email">
<input type="text" id="password" placeholder="Password">
<button>LOGIN</button>
</div>
</div>
</body>
</html>
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
标签
布局.zip 2.66M 26次下载
已于2022-7-21 17:31:29修改
赞
1
收藏
回复
相关推荐
