標籤：圖片 動畫 html html5 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" onmouseover="$('#meta').show();" onclick="$('#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>
html+css實現windows案頭
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
