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

来源：互联网发布：带着淘宝混异界腐书编辑：程序博客网时间：2024/05/17 04:11

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

0 0