HTML设计个人网站UI

Alphamilk

已于 2023-04-19 16:56:55 修改

阅读量585

点赞数

文章标签： html ui css

于 2023-04-19 16:56:41 首次发布

本文链接：https://blog.csdn.net/dogxixi/article/details/130248152

版权

该文描述了如何设计一个个人网站，采用了左右布局，左侧为文字内容，右侧为登录表单。通过HTML和CSS实现动态效果，如文字弹出，以及背景图片和表单元素的样式设定。此外，还设置了输入框和提交按钮的样式，并添加了动画效果使文字逐渐显示。

摘要由CSDN通过智能技术生成

思路：

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>