使用html5+css3的漂亮的win7界面

主要的界面的代码:

——————————————————————————————

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<title>CSS3制作仿win7界面 | 前端开发网(W3Cfuns.com)</title>
<link href=”win7.css” rel=”stylesheet” type=”text/css” />

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){
$(‘#startmenu’).hide();
$(‘#startbtn2′).hide();
$(‘.title’).hide();
$(‘#tiphide’).hide();
$(‘.content’).hide();
$(‘#startbtn1′).click(function(){
$(‘#startmenu’).animate({opacity:”show”},”slow”);
$(this).hide();
$(‘#startbtn2′).show();
});
$(‘#startbtn2′).click(function(){
$(‘#startmenu’).animate({opacity:”hide”},”slow”);
$(this).hide();
$(‘#startbtn1′).show();
});
$(‘#tipshow’).click(function(){
$(this).hide();
$(‘.title’).slideDown(‘slow’);
$(‘#tiphide’).show();
});
$(‘#tiphide’).click(function(){
$(this).hide();
$(‘.title’).slideUp(‘slow’);
$(‘#tipshow’).show(‘fast’);;
});
$(‘#content_close_btn’).click(function(){
$(‘.content’).animate({opacity:”hide”},”fast”);
});
$(‘.click’).click(function(){
$(‘.content’).animate({opacity:”show”},”fast”);
});
});
</script>

</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<div id=”tipshow”>
>
</div>
<div id=”tiphide”>
<
</div>
<div>
<a>图书管理系统</a>
</div>
<div>
<ul>
<li><a href=”http://www.w3cfuns.com/” target=”iframe1″>
<img src=”w3cfuns_32.png” alt=”" /><br />
W3Cfuns首页 </a></li>
<li><a href=”http://www.baidu.com” target=”iframe1″>
<img src=”firefox-32.png” alt=”" /><br />
百度首页 </a></li>
<li><a href=”http://www.sina.com” target=”iframe1″>
<img src=”chrome.png” alt=”" /><br />
新浪首页</a></li>
<li><a href=”http://www.qq.com“>
<img src=”firefox-32.png” alt=”" /><br />
腾讯首页 </a></li>
<li><a href=”http://www.yugaga.com” target=”iframe1″>
<img src=”chrome.png” alt=”" /><br />
搜狐首页</a></li>
<li><a href=”http://www.yugaga.com” target=”iframe1″>
<img src=”ie.png” alt=”" /><br />
娱嘎嘎首页</a></li>
<li><a href=”http://www.yugaga.com” target=”iframe1″>
<img src=”twitter_32.png” alt=”" /><br />
凤凰首页 </a></li>
<li><a href=”http://www.baidu.com” target=”iframe1″>
<img src=”rss_32.png” alt=”" /><br />
系统设置 </a></li>
</ul>
</div>
<div>
<div>
<div id=”content_close_btn”>
</div>
</div>
<div>
<iframe name=”iframe1″ width=”880px” height=”500px” frameborder=”0″ style=”margin: 0px 10px 0px 10px;”>
</iframe>
</div>
<div>
</div>
</div>
<div id=”startmenu”>
<ul id=”programs”>
<li><a href=”http://www.yugaga.com/“>
<img src=”w3cfuns_32.png” alt=”" />W3Cfuns</a></li>
<li><a href=”#”>
<img src=”firefox-32.png” alt=”" />Mozilla Firefox</a></li>
<li><a href=”#”>
<img src=”chrome.png” alt=”" />Google Chrome</a></li>
<li><a href=”#”>
<img src=”safari.png” alt=”" />Safari</a></li>
<li><a href=”#”>
<img src=”opera.png” alt=”" />Opera</a></li>
<li><a href=”#”>
<img src=”ie.png” alt=”" />Internet Explorer</a></li>
<li><a href=”#”>
<img src=”rss_32.png” alt=”" />RSS Feeds</a></li>
<li><a href=”#”>
<img src=”twitter_32.png” alt=”" />Twitter</a></li>
<li><a href=”#”>
<img src=”delicious_32.png” alt=”" />Delicious</a></li>
<li><a href=”#”>
<img src=”chrome.png” alt=”" />Google Chrome</a></li>
<li><a href=”#”>
<img src=”safari.png” alt=”" />Safari</a></li>
<li><a href=”#”>
<img src=”opera.png” alt=”" />Opera</a></li>
</ul>
<ul id=”links”>
<li>
<img src=”images/folder.png” alt=”" /></li>
<li><a href=”#”><span>Documents</span></a></li>
<li><a href=”#”><span>Pictures</span></a></li>
<li><a href=”#”><span>Music</span></a></li>
<li><a href=”#”><span>Computer</span></a></li>
<li><a href=”#”><span>Network</span></a></li>
<li><a href=”#”><span>Connect to</span></a></li>
<li><a href=”http://www.w3cfuns.com/”><span>W3Cfuns</span></a></li>
</ul>
</div>
<div>
<div id=”startbtn1″>
</div>
<div id=”startbtn2″>
</div>
<div>
</div>
<div>
<asp:Label ID=”Label1″ runat=”server” Text=”Label” Height=”40px” Font-Size=”12px”></asp:Label>
</div>
</div>
</div>
</form>
</body>
</html>

————————————————————————————————————–

效果界面:

代码下载:http://www.cangzhang.com/wp-content/uploads/2012/08/win7ui.zip

共有 3 条评论

Top