Ideas:
1. Design the web page layout
Left and right layout is used, that is, the left is the text, and the right is the form
2. Design web animation
design text popup
3. Implement content through html and css
practice:
<!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>