20200303（已解决）软件登录界面随着界面变化变动代码

最新推荐文章于 2022-08-13 22:13:03 发布

yingruiyuelin86

最新推荐文章于 2022-08-13 22:13:03 发布

阅读量288

点赞数

分类专栏： javaweb 文章标签： html javascript css

本文链接：https://blog.csdn.net/weixin_39309855/article/details/104644602

版权

javaweb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>登录界面</title>
  <meta name="Author" content="klein liu">
  <script language="javascript" src="js/jquery.js"></script>
  <script language="javascript" src="js/jquery.validate.js"></script>
  <script language="javascript" src="js/file.js"></script>
  <link href="./css/file.css" type="text/css" rel="stylesheet" >
 </head>
 <body>
  <!-- 登录界面 login start -->
    <div id="login_content">
    	<div id="login_wrap" >
    		<div id="login_bg">
    		</div>
        </div>
	</div>
  <!-- 登录界面 login end -->
 </body> 
</html>

css

    @charset "utf-8";
    *{margin:0;padding:0;}/*可以有效解决不同浏览器对默认距离不同问题*/
	body {font-size:14px; font-family:"宋体";color:#fff;}/*设置整体正文界面的字体大小,字体,颜色*/
	a {text-decoration:none;}/*整体处理a标签的超链接下划线问题*/
	ul li {list-style:none;}/*整理处理无需排列中前面的小圆点*/

	/*登录界面背景*/
	#login_content {overflow: hidden;background: rgb(255;255;255);}
	#login_wrap {width:100%;height:100%;}
	#login_bg {width:100%;height:100%;background-position: center center;background-repeat: no-repeat;}

 function a(){//获得登录界面实际尺寸
  	$("#login_content").width(document.documentElement.clientWidth);
		$("#login_content").height(document.documentElement.clientHeight);
  }
 function b(){//给登录界面替换背景
 	//var url = "images/background.png";
 	//document.getElementById("login_bg").style.backgroundImage = "url('images/background.png')";
  $("#login_bg").css("background-image","url('images/background.png')");
 }
  window.onload = function(){
  	a();
  	b();
  }
  window.onresize = function(){
  	a();
  }