标签归档:div

css实现层叠背景图实现多个图层叠加

刚写个一篇激活Vista的烂文,现在在此烂文截图的基础上扩展一下,Vista的界面就是漂亮,特别是窗口方面,太漂亮了。

实用该图作为背景,来写个有Vista边框的框架吧~后边的窗口直接用Iframe,前边用div,分三层,背景,iframe,前端DIV,因为实在vista中的截图,现在在win2003下,不能截图,仅有一张背景图,所以要div层叠在iframe上,而且还要实用背景图,有点难度,不过这样正好可以来练习练习CSS,好久没写了

不想写了,代码写了两三个小时,效果如下:http://www.miaoqiyuan.cn/Products/vista-bg-test.htm

直接发代码了

 

<style type="text/css">
body{background:url('vista.jpg');background-repeat:no-repeat;padding:0px;margin:0px;overflow:hidden}
div{position:absolute;z-index:999;margin-left:472px;margin-top:264px;margin-right:0px;width:534px;height:341px;background:url('vista.jpg') #333;background-position:-472px -264px;background-repeat:no-repeat;}
a{border:#FEE solid 1px;display:block;background:#F8F8F8;height:40px;margin-left:46px;margin-top:8px;line-height:40px;font-size:24px;font-family:黑体;text-indent:2em;color:#8B859F;text-decoration:none;font-weight:800}
a.s1{height:55px;line-height:55px;margin-top:118px;}
a strong{font-size:18px;font-weight:400;color:#999}
a span{display:none}
a:hover{color:#000;border:#666 solid 1px;}
a:hover strong{display:none;}
a:hover span{display:inline;padding-left:20px;font-size:16px;color:#F00;font-weight:400;font-family:宋体}
iframe{margin-left:102px;margin-top:110px;width:782px;border:none;height:497px;}
input{margin:0px;margin-top:5px;height:25px;font-size:22px;}
</style>
<body>
<div>
<a class="s1" href="About:电影@远通" onclick="this.href='ftp://www.yuantong'" onblur="this.href='About:电影@远通'" target="_blank">电影<strong>(Moives)</strong><span>点击打开电影库,可以通过迅雷下载哦</span></a>
<a href="About:软件@远通" onclick="this.href='ftp://www.yuantong/install'"  onblur="this.href='About:软件@远通'"  target="_blank">软件<strong>(Softwares)</strong><span>点击打开软件库,各类软件应有尽有</span></a>
<a href="About:资询@远通" onclick="document.getElementById('locaweb').src='http://miaoqiyuan.cn';return false;">主页<strong>(How to use?)</strong><span>点击访问飞猫主要寻找帮助信息</span></a>
<a href="About:上网@远通" onclick="return false;">上网<strong>(Internet)</strong><span><input id="url" value="请输入网址或关键字" size="28" onmouseout="this.blur();if(this.value=='')this.value='请输入网址或关键字';" onclick="this.value=''" /><input type="button" value="Go" onclick="document.getElementById('locaweb').src='loadweb.html?url='+document.getElementById('url').value;" /></span></a>
</div>
<iframe src="http://www.miaoqiyuan.cn" id="locaweb" ></iframe>
</body>