#学习笔记#(3)会员管理系统登录界面HTML+CSS

最新推荐文章于 2024-08-01 12:02:26 发布

游走走

最新推荐文章于 2024-08-01 12:02:26 发布

阅读量5.2k

点赞数 1

分类专栏： web 学习笔记

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_24734285/article/details/50116545

版权

学习笔记同时被 2 个专栏收录

108 篇文章 0 订阅

订阅专栏

web

93 篇文章 1 订阅

订阅专栏

denglu.html

<html>
<head>
<title>会员管理系统登录</title>
<link rel="stylesheet" type="text/css" href="denglu.css"></link>
</head>
<body>
<center><h1>会员管理系统</h1></center>
<form class="denglukuang" id="denglukuang" οnmοuseοver="mousein()" οnmοuseοut="mouseout()">
<label>用户名：</label>
<input type="text" class="shuru"></input></br>
<label>密   码：</label>
<input type="text" class="shuru"></input></br>
<div class="fright">
<div>
<input type="checkbox"><a class="jizhumima">记住密码</a></input>
<input type="submit" value="登录" class="submit"></input>
<input type="submit" value="取消" class="quxiao"></input>
</div>
<div class="zhaohuimima">
<a>找回密码</a>
</div>
</div>
</form>
<script>
//鼠标进入离开时改变透明度——未完成
function mouseout()
{
	var form1=document.getElementById("denglukuang");
	form1.className="mouseout";
}
function mousein()
{
	var form1=document.getElementById("denglukuang");
	form1.className="mousein";
}
</script>
</body>
</html>

denglu.css

body
{
	background-image:url(imgs/bg.jpg);
	font-family:微软雅黑;
	color:white;
}
.denglukuang
{
	width:400px;
	height:250px;
	margin-top:100px;
	margin-left:460px;
	padding-left:75px;
	padding-top:50px;
	border:3px solid #5F9EA0;
	font-size:22px;
	line-height:50px;
	background-image:url(imgs/denglukuang.jpg);
	opacity:0.4;
	filter:alpha(opacity=40);
}
.mouseout
{
	width:400px;
	height:250px;
	margin-top:100px;
	margin-left:460px;
	padding-left:75px;
	padding-top:50px;
	border:3px solid #5F9EA0;
	font-size:22px;
	line-height:50px;
	background-image:url(imgs/denglukuang.jpg);
	opacity:0.4;
	filter:alpha(opacity=40);
}
.mousein
{
	width:400px;
	height:250px;
	margin-top:100px;
	margin-left:460px;
	padding-left:75px;
	padding-top:50px;
	border:3px solid #5F9EA0;
	font-size:22px;
	line-height:50px;
	background-image:url(imgs/denglukuang.jpg);
	opacity:1;
	filter:alpha(opacity=100);
}
.shuru
{
	width:200px;
}
.fright
{
	float:right;
}
.jizhumima
{
	font-size:14px;
	text-decoration:underline;
	margin-right:20px;
}
.submit
{
	width:50px;
	height:25px;
	font-family:微软雅黑;
	margin-top:50px;
	margin-right:15px;
}
.quxiao
{
	width:50px;
	height:25px;
	font-family:微软雅黑;
	margin-top:50px;
	margin-right:100px;
}
.zhaohuimima
{
	font-size:14px;
	float:right;
	margin-right:100px;
	text-decoration:underline;
}

图片文件夹 imgs