JAVAweb+CSS实例

最新推荐文章于 2025-05-25 15:39:39 发布

原创最新推荐文章于 2025-05-25 15:39:39 发布 · 628 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#JAVAWeb+css登陆界面实例

javaweb 同时被 2 个专栏收录

10 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

本文详细介绍了使用HTML和CSS创建一个美观且响应式的登录界面的过程。登录界面包含一个欢迎信息，用户输入字段用于账号和密码，以及一个提交按钮。通过精心设计的样式，实现了界面的垂直和水平居中，背景颜色设置，以及输入框和按钮的特定样式。

登录界面

代码块


	<html>
	<head>
	<meta></meta>
	<title>登录界面</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		
		body{ color:white}
		.context{
		background:#50A3A2;
		position:absolute;
		left:0;
		top:50%;
		width:100%;
		height:400px;
		margin:-200px;
		overflow:hidden;/*隐藏滚动条*/
		}
		.container{
		max-width:600px;
		height:400px;
		padding:80px 0;/*上下 左右*/
		/*background:#666;*/
		margin:0 auto:0;/*居中显示*/
		}
		.container,h1{
		font-size:40px;
		font-weight:300;
		}
		form{
		padding:20px 0;
		}
		form input{
		border:1px solid #FFF;
		width:220px;
		padding:10ox 15px;
		display:block;
		margin:0 auto 10px auto;
		border-radius:30px:/*圆角框*/
		font-size:18px;
		font-weight:300;
		}
		form button{
			background:white;
			border:0;
			padding:10px 15px;
			color:green;
			border-radius:3px:
			width:250px;
			font-size:16px;
		}
		form button{
		background:#CCC; /*鼠标移至此处时变色*/
		}
	</head>
	</style>
	<body>
		<div class="context">
			<div class="container">
				<h1>Welcome</h1>
				<form action="" method="get">
					<input type="text" name="userId" placeolder="请输入账号"/>
					<input type="password" name="userpw" placeolder="请输入密码"/>
					<button type="submit">登&nbsp;&nbsp;陆</button>
				</form>
	</body>
	</html>