存档
Test
Test
/*
文件名:set-Object.html
设计者:苗启源
功 能:可以方便的给DOM对象添加方法,可支持所有浏览器
主 页:http://www.miaoqiyuan.cn/p/set-Object
*/
var $=function(id){return document.getElementById(id);}
//SetObject 设置对象属性
var setObject=function(c,d){for(p in d){c[p]=d[p];if(p==”init”)c.init();}return c;}
//扩展属性
var __isIE=function(){return window.ActiveXObject}
var __Name=function(t){if(this.tmp)this.name=this.tmp;else this.name=’Hello’}
var __setClass=function(t){if(__isIE){this.className=t}else{this.setAttribute(‘class’,t);}}
var __getClass=function(){if(__isIE){return this.className}else{return this.getAttribute(‘class’);}}
//测试对象
var ob=$(“Demo”);var ob2=$(“Demo2″);
setObject(ob,{tmp:’Demo’,init:__Name,setClass:__setClass,getClass:__getClass});
setObject(ob2,{init:__Name,setClass:__setClass,getClass:__getClass});
document.write(ob.name+”\n”);
document.write(ob2.name+”\n”);
document.write(ob.getClass()+”\n”);
document.write(ob2.getClass()+”\n”);
ob.setClass(‘newDemoClass’);
ob2.setClass(‘newDemo2Class’);
document.write(ob.getClass()+”\n”);
document.write(ob2.getClass()+”\n”);
刚写个一篇激活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>
删除链接上的虚线框
a:active, a:focus {
outline:none;
}
Firefox 默认会在链接获得焦点(或者点击时)加上条虚线框,使用上面的属性可以删除。
最简单的 CSS 重置
* {
margin: 0; padding: 0
}
不让链接折行
a {
white-space:nowrap;
}
上面的设定就能避免链接折行,不过个人建议长链接会有相应的这行(有关换行方面的讨论,参看圆心的记录)。
始终让 Firefox 显示滚动条
html {
overflow:-moz-scrollbars-vertical;
}
更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持,也可以使用
body, html {
min-height:101%;
}
使用 line-height 垂直居中
line-height:24px;
使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里。
清除容器浮动
#main {
overflow:hidden;
}
使块元素水平居中
margin:0 auto;
其实就是
margin-left: auto;
margin-right: auto;
这个技巧基本上所有的 CSS 教科书都会有说明,别忘记给它加上个宽度。Exploer 下也可以使用
body{
text-align: center;
}
然后定义内层容器
text-align: left;
恢复。
隐藏 Exploer textarea 的滚动条
textarea {
overflow:auto;
}
Exploer 默认情况下 textarea 会有垂直滚动条(不要问我为什么)。
设置打印分页
h2 {
page-break-before:always;
}
page-break-before 属性能设置打印网页时的分页。
在设计wjgww.com首页时,浮动层设置z-index为何值时都被flash挡住,很是郁闷,怎么样才能让Flash动画显示在下面,而让浮动层显示在上边呢?
在网上搜了一下,找到了解决方案,把Flash插入在flash属性里加:
就可以了。
* 程序特点
1. 当鼠标移过时只能分析是否在加载,当加载时移动事件失效。防止用户还没有看完加载的数据而转页。
2. 增加了点击事件,当用户确定本页内容无可用信息时,点击程序不判读是否自动加载而直接转页,也可点击[x]关闭Loading。
3. 支持多浏览器:IE7,IE6,IE5.5,IE5,FireFox2.0,Safari3.05,Opera(因本人美工有限Safari,Opera显示不是很理想,不过程序没有问题)
* 运行原理
1. 通过_Load(_L)以兼容的方式加载主函数_L()
2. 主函数_L()用_G获取页面中LI,当页面加载完成后,给LI增加onmouseover事件,再给LI增加onclick事件。
3. onclick:判断LI是否存在title,如果不存在则退出;存在则定义LI的onclick事件为把所有LI的class属性修改为no,把当前LI的class属性修改为cu,在框架中加载LI title对应的网页,同时显示Loading至网页加载完毕
4. onmouseover:判断是否在加载中,加载中则退出;不在加载中则把所有LI的class属性修改为no,把当前LI的class属性修改为cu,在框架中加载LI title对应的网页,同时显示Loading至网页加载完毕
5. 增加事件完毕,隐藏Loading
* 主要函数
1. _Load(f):在页面加载完成后运行函数f
2. _G(o,t,p):返回p对象中ID(TagName,Name)为o的对象
程序测试地址:http://www.miaoqiyuan.cn/products/yuming-query.shtml
每次可以查询500个域名,本程序可以自动生成0-9999的com,cn,net,org的域名~