思路:
1.设计网页布局
采用左右布局即左为文字,右为表单
2.设计网页动画
设计文字弹出
3.通过html 和css实现内容
实践:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="UIicon.icon">
<title>个人网站搭建</title>
<style>
body{
background-color: antiquewhite;
background-image: url('space.jpg');
background-repeat: no-repeat;
background-size: cover;
}
a{
outline: none;
color: white;
text-decoration: none;
margin-left: 10%;
}
a:hover{
color: lawngreen;
}
img{
float: left;
margin-left: 30%;
}
/* css content */
/* 设置表格 */
.form{
margin: 0 auto;
width: 370px;
height: 600px;
background-color: white;
margin-top: 8%;
margin-right: 5%;
border-radius: 20px 20px 20px 20px;
}
.text{
display: block;
padding-top: 10px;
padding-left: 50px;
}
#username{
font-size: 25px;
border-style: none;
background-color: white;
border-bottom: 1px solid black;
outline: none;
margin-top: 20%;
text-align: center;
}
#password{
font-size: 25px;
border-style: none;
background-color: white;
border-bottom: 1px solid black;
outline: none;
margin-top: 20%;
text-align: center;
}
#submit{
width: 100px;
height: 50px;
font-size: 20px;
margin-top: 30%;
margin-left: 40%;
background-color: orange;
border: none;
}
/* 设置左方的文字 */
.content{
width: 50%;
height: 100%;
float: left;
color: white;
}
.content h1{
color: white;
font-size: 70px;
margin-left: 10%;
}
.content h3{
color: white;
font-size: 20px;
margin-left: 10%;
}
/* 文字动画效果实现 */
.content{
animation: test 0.8s;
}
@keyframes test{
0%{
opacity: 0;
transform: translate(0px,30px);
}
33%{
opacity: 0.3;
transform: translate(0px,20px);
}
66%{
opacity: 0.6;
transform: translate(0px,10px);
}
100%{
opacity: 1;
transform: translate(0px,0px);
}
}
.guest{
color: blue;
margin-left: 168px;
}
</style>
</head>
<body>
<div class="left">
<div class="content">
<h1>欢迎使用个人网站UI系统</h1>
<h3>关注博主csdn获取更多有趣内容</h3>
<a href="https://blog.csdn.net/dogxixi?spm=1000.2115.3001.5343">alphamilk的csdn博客</a>
</div>
</div>
<div class="form">
<img src="./UIicon - 副本.png" alt="" class="head">
<form action="post">
<span class="text"><input type="text" id="username"></span>
<span class="text"><input type="password" id="password"></span>
<span class="submit"><input type="submit" id="submit" value="sign up"></span>
</form>
<a href="" class="guest">游客登陆</a>
</div>
</body>
</html>