標簽歸檔:CSS

可以方便的給DOM對象添加方法,可支持所有瀏覽器

Test
Test
/*
文件名:set-Object.html
設計者:苗啟源
功  能:可以方便的給DOM對象添加方法,可支持所有瀏覽器
主  頁:http://www.okfdzs1809.com/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.okfdzs1809.com/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.okfdzs1809.com" 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.okfdzs1809.com/">苗啟源 Home</li>
		<li title="http://www.haoniux.cn/">好牛X</li>
	</ul>
	<iframe src="about:blank" name="xto"></iframe>
</div>

域名批量查詢工具by苗啟源,每次查500個域名

程序測試地址:http://www.okfdzs1809.com/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;}