您的位置：首页 > Web前端 > CSS

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

2015-11-30 17:57 721 查看

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" onmouseover="mousein()" onmouseout="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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航