标签归档:CSS

可以方便的给DOM对象添加方法,可支持所有浏览器

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");

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>

css技巧-经典中的经典

删除链接上的虚线框

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 属性能设置打印网页时的分页。

 

 

 

flash在网页中的关于z-index设置问题的问题

在设计wjgww.com首页时,浮动层设置z-index为何值时都被flash挡住,很是郁闷,怎么样才能让Flash动画显示在下面,而让浮动层显示在上边呢?
在网上搜了一下,找到了解决方案,把Flash插入在flash属性里加:就可以了。

下面是我在wjgww.com中加入的脚本,加入Flash时用:

<html><head><title>网页添加Flash</title>
<script type="text/javascript" src="http://www.wjgww.com/js/loadswf.js"></script>
</head>
<body>
<!--
HTML Code...
 
!!!Demo Start
-->
<div>
	<div><script type="text/javascript">myw3_swf("home.swf");</script><div>添加Flash,根据父窗口大小自动调整大小</div></div>
	<div><script type="text/javascript">myw3_swf("home.swf",100,100);</script><div>添加Flash,大小为100x100</div></div>
	<div><script type="text/javascript">myw3_swf("swfoto.swf?image=/images/uploadimg/9f1011b385500ab4d9335aac.jpg");</script><div>传递参数测试</div></div>
	<div><script type="text/javascript">myw3_swf("player.swf",,,"http://6.cn/");</script><div>加入6.cn中的player.swf</div></div>
</div>
<!--
HTML Code...
-->
</body>
</html>
function myw3_swf(s,w,h,i){
	if(!w)
		w="100%";
	if(!h)
		h="100%";
	if(!i)
		i="http://wjgww.com/template/wjgww_com/images/";
 
	document.writeln('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"  width="'+w+'" height="'+h+'" />');
	document.writeln('<param name="movie" value="'+i+s+'" />');
	document.writeln('<param name="quality" value="high" />');
	document.writeln('<param name="wmode" value="Opaque" />');
	document.writeln('<embed src="'+i+s+'" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="'+w+'" height="'+h+'" wmode="Opaque">');
	document.writeln('</embed>');
}

新写的一个CSS-Tabs

程序说明
  • 程序特点
    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的对象
body{background:#FFF;margin:0px;padding:0px;font-size:14px;}
	div{padding:0px;width:50%;background:#000;float:right;height:100%}
	div	ul{overflow:hidden;list-style:none;padding:4px 2px 0px 2px;margin:20px 20px 0px 20px;background:#aaa;height:29px;width:92%;*width:100%}
	div	ul	li{padding:5px 8px;background:#eee;float:left;margin-left:4px;margin-top:2px;color:#666}
			.cu{font-size:18px;background:#fff;color:#000;border:#ccc solid 2px;border-bottom:none;margin-top:-4px;*margin-top:-5px;height:21px;}
			#lo{z-index:100;background:#ff0;float:right;margin-top:-4px;margin-right:-2px;color:#f00;height:16px;padding:2px;}
			#lo span{color:#000;}
			#lo strong{text-decoration:underline;}
		iframe{padding:0px 2px;margin:0px 20px 20px 20px;background:#fff;border:none;width:92%;*width:100%;height:88%}
	table{width:48%;height:93%;*height:94%;background:#000;margin:2% 1%;padding:0px;border:none;}
		th,.ti{font-size:18px;background:#ccc;padding:4px 0px 0px 0px;height:22px;text-align:center;color:#000}
		td{color:#fff;font-size:14px;background:#666}
		td	ul{margin-right:30px;list-style:none;margin-left:20px;padding:0px;}
		td 	li	strong{padding:0px 0px 0px 20px;font-size:20px;}
var _class;
function _Load(f){
	_class=window.ActiveXObject?"className":"class";
	window.onload=typeof window.onload != "function"?f:function(){f();}
}
function _G(o,t,p){
	if(!p)
		p=document;
	switch(t){
		case "name":return p.getElementsByName(o);
		case "tagname":return p.getElementsByTagName(o);
		default:return p.getElementById(o);
	}
}
function _L(){
	var x=_G("li","tagname",_G("div","tagname")[0]);
	for(i=0;i<x .length;i++){
		x[i].onmouseover=function(){
			this.onclick=function(){
				if(this.getAttribute("title")){
					for(j=0;j<x.length;j++){x[j].setAttribute(_class,"no")}
					this.setAttribute(_class,"cu");
					_G("lo").style.display="block";
					_G("xto","name")[0].src=this.getAttribute("title");
					_G("xto","name")[0].onload=function(){_G("lo").style.display="none";}
				}
			}
			if(_G("lo").style.display=="none"&&this.getAttribute(_class)!="cu"){
				for(j=0;j<x.length;j++){x[j].setAttribute(_class,"no")}
				this.setAttribute(_class,"cu");
				_G("lo").style.display="block";
				_G("xto","name")[0].src=this.getAttribute("title");
				_G("xto","name")[0].onload=function(){_G("lo").style.display="none";}
			}
		}
	}
	_G("span","tagname",_G("lo"))[0].onmouseover=function(){
		this.onclick=function(){
			_G("lo").style.display="none";
		}
	}
	_G("lo").style.display="none";
}
_Load(_L);
//-->
</x>
<div>
	<ul>
		<li id="lo">Loading...<span title="解除锁定">[<strong>x</strong>]</span></li>
		<li class="cu" title="#">空白页</li>
		<li title="http://www.wxcmnet.cn/">无限CMNET</li>
		<li title="http://www.miaoqiyuan.cn/">苗启源 Home</li>
		<li title="http://www.haoniux.cn/">好牛X</li>
	</ul>
	<iframe src="about:blank" name="xto"></iframe>
</div>

域名批量查询工具by苗启源,每次查500个域名

程序测试地址:http://www.miaoqiyuan.cn/products/yuming-query.html

每次可以查询500个域名,本程序可以自动生成0-9999的com,cn,net,org的域名~

JavaScript脚本部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var domain=new Array("com","cn","net","org");   /*域名生成工具*/
var num=20;   /*20,生成的域名就是20x500=10000个域名*/
 
if(location.search.replace("?","")==""){location.search="0=499=com"}
 
document.write("<form action=\"https://www.moniker.com/pub/DomainCheckBatch\" method=\"post\" target=\"_blank\"><ul class=\"right\"><li>域名查询系统< \/li></li><li><textarea name=\"domnamelist\">");
var _se=location.search.replace("?","").split("=");
var _start=_se[0];
var _end=_se[1];
var _x=_se[2];
for(k=_start;k<_end ;k++){
	document.writeln(k+"."+_x);
}
document.write("<\/textarea>< \/li><li><input type=hidden value=batch name=scope/><input type=hidden value=check name=cmd/><input type=\"submit\" value=\"立即查询\"/>< \/li>< \/ul>< \/form>");
for(i=0;i<num ;i++){
	document.write("<ol class=\"left\"><li>"+(i*500)+" To "+((i+1)*500-1)+"< \/li></li><li><ul class=\"left_0\">");
	for(j=0;j<domain .length;j++){
		document.write("<li><a href=\"?"+(i*500)+"="+((i+1)*500-1)+"="+domain[j]+"\">"+domain[j]+"< \/a>< \/li>");
	}
	document.write("< \/ul>< \/li>< \/ol>");
}
</a></domain></ul></li></num></li></_end></textarea></li></ul></form>
1
2
3
4
5
6
7
8
li{list-style:none;padding:0px;}
.left{margin:0px;padding:0px;width:650px;float:left;}
.left_0{padding:0px;margin-top:-20px;margin-left:120px;}
.left_0 li{float:left;margin-left:10px;color:#000;*margin-top:-20px;}
.right{float:right;width:200;height:500px;background:#69F;padding:0}
.right li{color:#FFF;text-align:center;padding:0px;line-height:15px;padding:5px 0px 0px 0px;}
.right textarea{width:198;height:440px;}
.right input{background:#CCC;color:#000;font-size:14px;}