CSS範例

chapter 1--介紹

主要結構

<html>

<head>

</head>

<body>

網頁的主要部份

</body>

</html>

chapter 2--正文版式

橫線<hr align=left/right/center size=數字px width=數字px/% noshade/>

下一行<br />...

下一段<p>...</p>

大小字<h 數字>...</h>

置中<center>...</center>

chapter 3--文字控制

字型<font size=1-7 color=顏色名/#RRGGBB face"字體名">歡迎光臨</font>

粗體<b>歡迎光臨</b>

斜體<i>歡迎光臨.</i>

底線<u>歡迎光臨</u>

刪除線<s>歡迎光臨</s>

字有底色

字左右移動

字向上移動

字有底線

外層色字

右下陰影字

左下陰影字

右上陰影字

實影字

閃閃彩字--更改,100( 數字越大閃爍速度越慢 )

雙底色字

chapter 4--圖片控制

圖片<img src="圖片網址" width=數字px/% height=數字px/% vspace=數字px hspace=數字px border=數字px

align = left/right/center alt"名"/>

由右至左

移動<marquee scrollamount=2><img src="圖片網址"/></marquee>

由左至右移動

左右移動

淡圖變清

function makevisible(cur,daisy){

if (daisy==0)

cur.filters.alpha.opacity=100

else

cur.filters.alpha.opacity=50

}

</script>

透明圖片

灰階圖片

滑鼠指換圖

圖片面打字

<tr>

<br /><font color=#996666 size=1 face="Verdana">Halo<p>歡迎大家光臨</p><p>

有空要多來囉~!</p></font><br /><br /></td></tr></table>

chapter 5--背景

背景<body background=圖片網址 bgcolor=顏色名/#RRGGBB text=顏色名/#RRGGBB </body>

固定背景位置--自行更改right.left.center.top.bottom.right bottom等

<!--

body{

background-image:url(圖片網址);

background-position:right bottom/right/center等;

background-attachment:fixed;

background-repeat:no-repeat/repeat;}

-->

</style>

圖圖漫遊

<img src="圖片網址" name="daisy" "

style="position:absolute;left:250; top: 0"/><object id="pth2"

classid="clsid:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"

align="baseline" border="0" width="14" height="14"><param name="autoStart" value="-1"/><param name="repeat"

value="-1"/><param name="bounce" value="-1"/><param name="duration" value="30"/><param name="shape"

value="Polygon(4,550,100,30,300,500,100,500,400)"/><param name="target" value="daisy"/></object>

chapter 6--連結

連結<a href="網址">...</a>

圖片連結<a href="網址"><img src=圖片網址/></a>

電郵連結<a href="mailto:你的e-mail"></a>

下壓效果

<!--

a:hover{position:relative;top:+1pt;left:1pt;}

--></style>

粗體字

<!--

a:hover{

{font-weight:bold}

a{text-decoration:none;}

--></style>

字變色加背景色

<!--

a:hover{color:#8B3E2F;background:#FFF0F5;}

a{text-decoration:none;}

-->

</style>

加背景色點線

<!--

a:hover{

border-bottom-width:1px;

border-bottom-style:dotted;

border-bottom-color:#004284;

border-top-width:1px;

border-top-style:dotted;

border-top-color:#004284;

background:#D9ECFF;}

a{text-decoration:none;}

-->

</style>

灰階圖連結

連結消底線"

<!--

a{ text-decoration:none;}

-->

</style>

連結加背景色

<!--

a:hover {color:#C71585;text-decoration:none; background:#FFE4E1;}

-->

</style>

連結上下線背景色

<!--

a:hover{text-decoration:underline overline; color:#00BFFF;background-color:#ccffff;position:relative ;top:1px ;left:1px;}

-->

</style>

上下點線連結

<!--

a:hover {

color:#00BFFF;

border-top:dotted 1pt;

border-top-color:#00BFFF;

border-bottom:dotted 1pt;

border-bottom-color:#00BFFF;

}

-->

</style>

連結有背景

<!--

a:hover {color:#ffffff;text-decoration:none; background-image:url(圖片網址);background-color: #FFFFFF;}

-->

</style>

隱藏字連結

<br />

內容

<br />

</div>

<p>

<br />

內容

<br />

</div>

</p><p>

<br />

內容

<br />

</div>

</p><p>

<br />

內容

<br />

</div>

指圖變清連結

function makevisible(cur,daisy){

if (daisy==0)

cur.filters.alpha.opacity=100

else

cur.filters.alpha.opacity=50

}

</script>

chapter 7---視窗

無工具列

視窗內框

透明內框

半透明內框

表格視窗內框

<tbody>

<tr>

<table style="BORDER-RIGHT: #0066ff 1px solid; BORDER-TOP: #0066ff 1px solid; BORDER-LEFT: #0066ff 1px solid; BORDER-BOTTOM: #0066ff 1px solid" height=150 cellSpacing=5 cellPadding=4 width=150

bgColor=#d1d5ff border=0>

<tbody>

<tr>

<td style="BORDER-RIGHT: #0066ff 1px dotted; BORDER-TOP: #0066ff 1px dotted; BORDER-LEFT: #0066ff 1px dotted; BORDER-BOTTOM: #0066ff 1px dotted" vAlign=center noWrap align=middle><iframe style="BORDER-RIGHT: #0066ff 1px solid; BORDER-TOP: #0066ff 1px solid; BORDER-LEFT: #0066ff 1px solid; BORDER-BOTTOM: #0066ff 1px solid" name=daisy align=middle marginWidth=5 src="網址"

frameBorder=0 width=262 scrolling=yes height=169></iframe></td></tr>

</tbody></table></td>

chapter 8--其他

要做到100%防止抄襲係冇可能既,

但係可以用d小把戲去對付d唔識破解既人。

mouse右鍵無效,highlight無效::

<body>

按右鍵會彈出警告::

if (navigator.appName.indexOf("Internet E lorer") != -1)

document.onmousedown = noSourceE lorer;

function noSourceE lorer(){if (event.button == 2 |

event.button == 10){alert(" 警告字眼 ")

;}}</script>

right click會開新視窗::

function click(){

if(event.button==2){earthquake()

alert("警告的字")

window.open("開新視窗的網址")

;}

}document.onmousedown=click

function earthquake(){

window.moveTo(1000,5000)

}

</script>

消除廣告語法

---geocities消廣告

在後面打上

再在結尾打上

<xml>

---kimo消廣

在結尾打上

</xml><xml>

---pchome消廣告

在結尾打上

</xml><xml>

網頁外框

<style>

body

{border-width:18px 18px 18px 18px;

border-style:solid;

border-color:#FF69B4 #3CB371 #7B68EE #FF7F50;}

</style>

捲軸

<!--

BODY {SCROLLBAR-FACE-COLOR: #9090b4; (拉頁框主顏色)

SCROLLBAR-HIGHLIGHT-COLOR: #6c4824; (拉頁內框亮面)

SCROLLBAR-SHADOW-COLOR: #480048; (拉頁內框暗面)

SCROLLBAR-3DLIGHT-COLOR: #6cb448; (拉頁框立體亮面色)

SCROLLBAR-ARROW-COLOR: #90d824; (拉頁框箭頭色 )

SCROLLBAR-TRACK-COLOR: #00d890; (拉頁框背景色)

SCROLLBAR-DARKSHADOW-COLOR: #906c24; (拉頁框立體暗面色)

SCROLLBAR-BASE-COLOR: #24246c} (拉頁框基底顏色)

-->

</style>

一開個網頁有小視窗彈出黎

alert("大家好");

</Script>

chapter 9---滑鼠

十字游標(<head> </head> 之內)

if (document.all&&!window.print){

leftright.style.width=document.body.clientWidth-2

topdown.style.height=document.body.clientHeight-2

}

else if (document.layers){

document.leftright.clip.width=window.innerWidth

document.leftright.clip.height=1

document.topdown.clip.width=1

document.topdown.clip.height=window.innerHeight

}

function followmouse1(){

//move cross engine for IE 4+

leftright.style.pixelTop=document.body.scrollTop+event.clientY+1

topdown.style.pixelTop=document.body.scrollTop

if (event.clientX<document.body.clientWidth-2)

topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1

else

topdown.style.pixelLeft=document.body.clientWidth-2

}

function followmouse2(e){

//move cross engine for NS 4+

document.leftright.top=e.y+1

document.topdown.top=pageYOffset

document.topdown.left=e.x+1

}

if (document.all)

document.onmousemove=followmouse1

else if (document.layers){

window.captureEvents(Event.MOUSEMOVE)

window.onmousemove=followmouse2

}

function regenerate(){

window.location.reload()

}

function regenerate2(){

setTimeout("window.onresize=regenerate",400)

}

if ((document.all&&!window.print)||document.layers)

//if the user is using IE 4 or NS 4, both NOT IE 5+

window.onload=regenerate2

</SCRIPT>

<style>

<!--

#leftright, #topdown{

position:absolute;

left:0;

top:0;

width: 1px;

height: 1px;

layer-bockground-color:#000000;

background-color:#000000;

z-index: 50;

font-size: 1px;

}

-->

</style>

跟隨滑鼠走的閃爍文字(<head></head> 之內)

FONT-FAMILY:Tahoma;

FONT-SIZE:10pt;

FONT-WEIGHT:normal;

POSITION:absolute;

TOP:-50px;

VISIBILITY:visible}</style>

尾巴滑鼠(<head></head> 之內)

var trailLength = 8 // The length of trail (8 by default; put more for longer "tail")

var path = "cursor.gif" // URL of your image

~滑鼠帶彩色字加陰影~

QUOTE:

var message="歡迎光臨我的網頁";

var x,y;

var step=28;

var flag=0;message=message.split("");var xpos=new Array();for (i=0;i<=message.length-1;i++) {xpos=-50;}var ypos=new Array();

for (i=0;i<=message.length-1;i++) {ypos=-50;}function handlerMM(e) {x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX+20;y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;flag=1;}function makesnake() {if (flag==1 && document.all) {for (i=message.length-1; i>=1; i--) {xpos=xpos[i-1]+step;ypos=ypos[i-1];}xpos[0]=x+step;ypos[0]=y;for (i=0; i<=message.length-1; i++) {var thisspan = eval("span"+(i)+".style");thisspan.posLeft=xpos;thisspan.posTop=ypos;thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;}}else if (flag==1 && document.layers) {for (i=message.length-1; i>=1; i--) {xpos=xpos[i-1]+step;ypos=ypos[i-1];}xpos[0]=x+step;ypos[0]=y;for (i=0; i<message.length-1; i++) {var thisspan = eval("document.span"+i);thisspan.left=xpos;thisspan.top=ypos;thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;}}}</SCRIPT><SCRIPT language=javascript> function pageonload() { makesnake(); window.setTimeout("pageonload();", 2); } </SCRIPT>

<SCRIPT language=javascript> for (i=0;i<=message.length-1;i++) { document.write("<span id=span"+i+" class=spanstyle>");

document.write(message); document.write("</span>"); } if (document.layers) { document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = handlerMM; </SCRIPT></xml></body></tr></tbody></p></body>

Google Sites

Report abuse