Heim > Web-Frontend > HTML-Tutorial > html+css实现windows桌面_html/css_WEB-ITnose

html+css实现windows桌面_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:49:04
Original
1393 Leute haben es durchsucht

<strong>      <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>       <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>  </strong>
Nach dem Login kopieren

<strong>      <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>      	<div id="begin">  		<img  src="images/4.png"    style="max-width:90%" onmouseover="$('#meta').show();" onclick="$('#meta').hide();" alt="html+css实现windows桌面_html/css_WEB-ITnose" >  		<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" alt="html+css实现windows桌面_html/css_WEB-ITnose" ></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>    <strong><br> </strong>  <p></p>  <p><br> </p>  <p><br> </p> </div>
</div></strong>
Nach dem Login kopieren
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage