html+css实现windows桌面

<strong><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<style type="text/css">
  	*{margin:0px;padding:0px;}
  		a{width:64px;height:64px;background:url("images/1.png");
  			display:block;margin:120px auto;}
  		a:hover{background:url("images/2.png");}
  		a:active{background:url("images/3.png");position:relative;top:6px;}
  	</style>
  </head>
 
  <body>
  <a class="A"></a> 
  <script type = "text/javascript" src="js/jquery.js"></script>
  <script type = "text/javascript">
  	var winWidth=window.innerWidth;//获取宽度
  	var winHeight=window.innerHeight;//获取高度
  	$(".A").click(function (){
  		window.open("MyHtml2.html","newwindow",
  			"width-winWidth" , "height-winHeight")
  	});
  </script>
  </body>
</strong>

<strong><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml2.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">
	*{margin:0px ; padding:0px;}
		body{background:url("images/10o.jpg")no-repeat;
			background-size:100% 100%;height:770px;}/*建立背景*/
		#begin{height:50px;width:100%;background:rgba(183,186,251,0.5 );
		position:fixed;bottom:0px;left:0px;box-shadow:3px 2px 15px #000000;
		border-radius:10px;}/*小羽片*/
		#meta{position:absolute;bottom:75px;left:0px;width:400px;
		height:400px;display:none;}
		#stattmenu{border:1px solid #102a3e;height:400px;background:#619bb9;
		/*!--渐变--*/background:-moz-linear-gradient(top,rgba(130,148,247,0.6),
		rgba(218,223,252,0.4)50%,rgba(206,27,216,0.5));padding:10px;
		box-shadow:2px 2px 15px #000000;border-radius:7px;}
		#programs{background:#FFFFFF;border:1px solid #9900ff; 
			width:235px;height:376px;overflow:auto;border-radius:10px;
			box-shadow:3px 2px 15px #000000;float:left;}
		#programs li{list-style:none}
		#programs a{display:block;border:1px solid #ffff;
			color:#4b4b4b;text-decoration:none;width:230px;margin:3px;
			padding:4px;}
		#programs a img{border:0px;vertical-align:middle;
			margin-right:5px;}
		#programs a:hover{border:1px solid #9933ff;box-shadow:1px 1px 10px #cc00cc;
		background:-moz-linear-gradient(top,#EECC44,#FBF2A8);}
		#links{float:left;margin-left:30px;position:relative;padding-top:30px}
		#links li{list-style:none;}
		#links li a{text-decoration:none;/*取出下划线*/color:#FFFFFF;font-size:14px;
		line-height:30px;}
		#links .icon{position:absolute;right:10px ;top:-30px;}
	</style>
  <script language="javascript" src="js/jquery.js"></script>
  </head>
  <body>
  	<div id="begin">
  		<img src="images/4.png"width="60px" οnmοuseοver="$('#meta').show();"
  		οnclick="$('#meta').hide();"/>
  		<div id="meta">
  			<div id="stattmenu">
  				<ul id="programs">
  					<li><a href="#"><img src="images/firefox-32.png" alt=""/>Mozilla firefox</a></li>
  					<li><a href="#"><img src="images/Chrome.png" alt="">Goole Chrome</a></li>
  					<li><a href="#"><img src="images/safari.png" alt="">Safari</a></li>
  					<li><a href="#"><img src="images/opera.png" alt="">opera</a></li>
  					<li><a href="#"><img src="images/ie.png" alt="">Internet Explorer</a></li>
  					<li><a href="#"><img src="images/rss_32.png" alt="">RSS Feeds</a></li>
  					<li><a href="#"><img src="images/twitter_32.png" alt="">Twitter</a></li>
  					<li><a href="#"><img src="images/delicious_32.png" alt="">Delicious</a></li>
  				</ul>
  				
  				<ul id="links">
  					<li class="icon"><img src="images/folder.png"></li>
  					<li><a href="#">王琪</a></li>
  					<li><a href="#">我的控制面板</a></li>
  					<li><a href="#">我的电脑</a></li>
  					<li><a href="#">图片</a></li>
  					<li><a href="#">音乐</a></li>
  					<li><a href="#">计算器</a></li>
  					<li><a href="#">游戏</a></li>
  					<li><a href="#">打印机</a></li>
  					<li><a href="#">默认</a></li>
  				</ul>
  			</div>
  		<div>
  	</div>
  </body>
</html>
</strong>



猜你喜欢

转载自blog.csdn.net/u012651389/article/details/43941693