网页常用代码

[复制链接]
查看: 660   回复: 8
发表于 2005-1-3 13:59:36 | 显示全部楼层 |阅读模式
简单的window.open方法
9 h2 J$ y% T! i* l  <a href="#" onclick="javascript:window.open(’文件路径/文件名’,
! q# s: {+ d, B( y: G  ’listnote’,’toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,
& e- J) v  K, o! U3 @: J2 {) H  width=350,height=300’);">文字或图片
( B  i1 l, |" e+ `  
. c# B, N( A1 h+ ]- z% q$ S. w' l& |( S+ `! S+ S
图片随机替换 4 R/ i7 Q9 f# i! I7 k% j
  
# {2 ^! \7 `( C  document.write(’’)
% p) d% C, L# N1 I/ W* R! G% V  
- U7 z* i# Z2 f1 @8 K* M! z! |: l  图片文件名为0.gif 1.gif 2.gif 3.gif 4.gif
6 S. g) N6 H0 q2 ?# v4 `/ j6 J; R
+ F( D! C6 @2 d1 B设为首页 8 K& i3 Q% H7 Y9 _
  <a href="#" onclick="this.style.behavior=’url(#default#homepage)’;- a3 n4 h* |5 l& r
this.sethomepage(’http://cu1985.126.com’)" height="2">
" P5 M+ o0 R0 ~
+ t- N& V, b9 o' S: |1 {0 R; ~8 ?加入收藏 - Q2 E$ t" f+ W* u3 s* c
  <a href="javascript:window.external.5 a% v; L! b' V5 Q5 A: N8 v& Q/ ?: J
addfavorite(’http://www.wosay.net’, ’wosay中文网’)"> % U+ z  V5 a6 v7 A3 i" M0 T$ n
8 }! x$ p8 F& J! q
忽视右键 0 b3 b0 s8 c  q2 m3 Z) b
  
0 s7 U/ p/ G; a, Z) [) H) b  或) e  ]! q1 N$ Z- w# z( q
  
, i8 U' _; K9 ?* A! K" v' @/ l1 c8 f, G. e# n% d& E/ w) p5 \
自动转页    - ?* y' W4 U/ _6 D
   / f0 `3 ?; v; F  p6 x" C5 q

7 {8 o& f5 C" w4 [* ?" I, b: o! E) J- {加入背景音乐
8 x: K1 |( c: Z! d5 U+ x  ie:2 u1 O' H( q( R; }& i: X8 z* E
  ns:' ?6 @/ N$ Y7 i7 a) p" C: }
  
( W5 a# k* n+ D. ]" L# ]' J* w  *.mid你的背景音乐的midi格式文件 , f( Z7 K& n4 [1 H9 u* }3 ^
1 E/ k' ^- ~; E  }
网页自动刷新  # t/ i# D" q$ C
  在head部记入
; [: c. g; U0 X3 m. V  
6 x& G1 U0 l& N# e1 v% a( o  其中20为20秒后自动刷新,你可以更改为任意值。
% P7 j# N/ v3 n) E
$ z, [9 |9 E! C7 a拉动页面时背景图不动    
% P. B6 ~. p4 _' m# y2 E$ y  . X4 Y1 u  j1 v* {& x# l1 `
  
1 f. N$ {7 b) U9 O  body  {background-image:url(logo.gif);  x, U: z1 {+ R! O
    background-repeat:no-repeat; background-position:center }
- F7 f: W7 N2 x# |: D3 c  
& R9 s% @1 x# c. P* {   5 b) X  @, A% x( i! w) T7 p7 y+ J

; \3 u8 u; U& {, r! q让浏览器在保存页面时保存失败       ) n' G* c6 k/ ?  N
  
5 Z* N" t% t2 y/ I% i6 b- o0 |! L  # ~/ F/ C- O" S/ k4 H  m* X9 b
  9 p$ N# A# T0 A. ]  j
  
+ `) E: D' Z6 i) J8 D) G$ g+ O& J+ A+ D, T
在网页中,图片和表格接触的地方如何不留空隙?       4 @2 G6 O- E  d, }
  要使图片和表格接触的地方不留空隙,仅在表格属性面板上把外框线(border)设为0是不行的,不仅仅只是表格外框,还有两个设置,即在表格的属性面板上还要把单元格的两个属性设为0(cellspacing="0" cellpadding="0")。 $ W" x: F" B9 M7 z' g" [3 F

8 i, Q& u* T7 ?2 B0 Z如何把自己放在主页上的zip或其他文件让浏览者下载(down)?
  j( t- P5 J: m, f; Q  用dreamweaver3其实很简单,把要让浏览者下载的文件名写上,然后拖动鼠标选取这段文字,在文本的属性面板上"link"的属性输入框中写上文件名就行了。注意:若被下载的文件与该网页不在同一目录下,则文件名必须包含相对路径,否则到下载时将提示找不到文件。 " G  s# i6 o: P; d7 |: \/ U
8 I# y2 q" w% Z' c
点击连接打开本地"我的电脑"等
; V! P6 y5 c& }  3 |* U' s# x# W6 E
<a href="file:///::{20d04fe0-3aea-1069-a2d8-08002b30309d}" target="_blank">我的电脑4 |' }& J: y; C4 H7 k
  <a href="file:///::{208d2c60-3aea-1069-a2d7-08002b30309d}" target="_blank">网上邻居
! x4 W8 c( ]7 z, F3 }# B  <a href="file:///::{645ff040-5081-101b-9f08-00aa002f954e}" target="_blank">回收站# D) Z5 o5 V4 _0 R& r# ?  C4 k4 r, _  H. m
  <a href="file:///::{7007acc7-3202-11d1-aad2-00805fc1270e}" target="_blank">网络和拨号连接
7 x: X0 J! I; ~6 X1 |  <a href="file:///::{d20ea4e1-3957-11d2-a40b-0c5020524153}" target="_blank">管理工具
. ^# _/ j- V1 ?* F4 _' @  <a href="file:///::{2227a280-3aea-1069-a2de-08002b30309d}" target="_blank">打印机" i$ W8 U* g' d
  <a href="file:///::{d6277990-4c6a-11cf-8d87-00aa0060f5bf}" target="_blank">计划任务
6 S6 Y3 Y& ]+ o  L  <a href="file:///::{d20ea4e1-3957-11d2-a40b-0c5020524152}" target="_blank">字体4 ?, [' i. c3 ]

6 S" }  A$ L8 E简单的页面加密  ( Y( M' W! M/ C6 v8 r
   <script language="javascript">
' ]$ N* e/ s6 E. j- Y# n0 O  
5 e& E: G9 b, @& M    
, I6 ^7 Z; a! f: D8 w0 w6 o" Q# e" \
网页自动关闭       
- o% z8 R8 @6 R" [( D  
% W, w+ g/ h" i, F9 g/ E1 d   & e( m2 h5 e& m+ |6 H+ O; k$ a
  
) N: P, j9 z2 a; m   6 p) D4 G2 D  P
   8 P8 z" W# W" U6 I5 ~/ N8 a3 i
  
0 \* P; w/ [2 c! z0 @# g, ]  O  
2 N3 r" O: `+ _   这个窗口会在10秒过后自动关闭,而且不会出现提示.* R) U  d9 H  M2 I% y* L
    % t8 E- y6 `7 l2 S. d

0 F4 |8 v- M% g; c! ^- s4 c) @) [保持layer在最前面,而不被iframe、object所覆盖   
6 }" [1 W! |& q1 K" i   在layer中再插iframe 或 object 设z-index值
$ s% b, j+ k0 i0 A7 Y# 前面
5 t# N) b8 @& j* B. ^4 P" A2 D$ D) J# 后面+ i3 N2 I# h3 A& X) U
height=100% width=100%>8 D' E9 }) V7 j6 T

$ c7 I! ^" S7 k! J  u" N  E
% S6 H/ A: J% v: O. }7 X  c' F
, |: T) `* o7 E
& f3 U9 S4 g/ O5 N( F8 O9 y8 c7 M4 n0 H9 ~& `" R
  _- L1 t9 t% j
$ k4 t7 X! [! n- |$ U

) v' a, d. |9 C" u: k; B8 J: S/ S
& [  d9 \: ]4 c9 i% @2 i- C/ L
0 @- s( \( Q6 i1 _: q
+ {- g8 M8 F, e! @3 u' u改变滚动条颜色     9 D' Z/ U  _1 S
  
! g' i$ l# `6 L. L# g$ U   body {
6 \0 F! T( H- f! nscrollbar3dlightcolor: #ff0000; /*滚动条亮边的颜色 scrollbararrowcolor: #ff0000; /*上下按钮上三角箭头的颜色 scrollbarbasecolor: #ff0000; /*滚动条的基本颜色 scrollbardarkshadowcolor: #ff0000; /*滚动条强阴影的颜色 scrollbarfacecolor: #ff0000; /*滚动条凸出部分的颜色 scrollbarhighlightcolor: #ff0000; /*滚动条空白部分的颜色 scrollbarshadowcolor: #ff0000; /*立体滚动条阴影的颜色 scrollbartrackcolor: #ff0000 /*滚动条的背景颜色# x3 G$ K7 k; F  S( U
   }2 W$ ]' w9 a0 T# Z- a
    ! P# [5 {/ P7 o2 Z; _
   说明:
  j& v, \0 I# e: @1 @5 w1、必须是ie5.5+
( M% F# M7 i# `) r/ ]9 p2、当页面内容超出屏幕出现移动条时,设置的箭头颜色才有效
$ [9 N- }# g' G( @! u* ]9 S3、母页的设置对iframe窗口的滚动条颜色无效,但是对textarea文本筐的滚动条有效
* i- \' b' ^# N
# b2 h; T# {* K2 ]  Q. u- M4 o如何实现定义的超级链接文字颜色? * t1 W6 _6 G6 t
  许多文章和教程都介绍过文字超级链接的颜色(包括未被访问的链接颜色、鼠标的链接上的颜色、已被访问过的链接颜色等等)可以用层叠样式表(css)定义,但真正在网页中要实现颜色按自己的意愿变化还确实不容易。下面把一些注意事项告诉你,你就能随心所欲地设置文字链接的颜色了。 # Z6 ~4 ], \% t9 j
  1)超级链接的默认颜色是:未被访问的超级链接是蓝色、被访问过的超级链接是紫色;
8 m& t* f. V/ ^) |* k( k$ U( `) o  2)要想使css定义的颜色起作用,在超级链接的文本的颜色属性中什么都不要填; 7 l6 C! }/ C& B4 q) k5 @
  3)若你已定义了文本的颜色,发现css中定义的超级链接颜色不起作用,你可以取消文本的颜色定义,或取消超级链接再重新定义一次,css定义的颜色就起作用了; 0 T6 L! R/ G3 |+ l$ W* u! K6 r: L1 k
  4)超级链接上各种状态下文本颜色的关系:一旦定义了被访问过的链接的颜色(a: visited),则当链接被访问过后,该链接的颜色不再改变,即定义鼠标在超级链接上的颜色(a: hover)将不起作用了。若不定义被访问过的链接的颜色(a: visited),则当鼠标在超级链接上显示a: hover 中定义的颜色,当鼠标移开时显示a 中定义的颜色。 : C/ x/ u- g; S2 W! f+ K
   从上述可以看出,文本链接的颜色实际上只能在两种颜色之间变换,并没有象有些文章中讲的那样可以在多种颜色之间变换,但由于用那两种颜色可以任意,所以应该讲颜色的选择范围还是比较大的。
  Z1 [& R) |: ?) {6 r' X3 ~! z/ y5 a) l6 ~3 b3 B2 Y: {" Z/ r4 H
有些网页的链接,原先没有下划线,你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。如何实现这种效果呢? - c6 I# t2 }' T0 {  u4 P8 ^4 a
  可用层叠样式表(css)来实现的,在dreamweaver3中编辑层叠样式表不用编写代码,具体*作方法如下:
* N! v* R7 \# d  1)在快速启动栏中点击层叠样式表按钮(就是把鼠标放上去显示"show css styles"的那个按钮),在弹出的css styles面板上双击(none);
. ^- I0 Z6 d: F- m0 P4 p  2)此时,可看到弹出的edit style sheet 面板,在该面板上按new按钮; 9 J/ Q* ]- W+ x. }2 h% [% p
  3)再在弹出的new style 面板上点取redefine html tag(重新定义html标记)再在tag中选择"a"(超级链接标记)标记后按ok按钮;
9 h5 l2 o! \' s5 d8 @  4)这时可看到弹出的style dehinition for a 的对话框,在此对话框中可以设置超级链接的许多属性,你可以按你的意愿设置,但我们这里主要是要去掉那讨厌的下划线,所以我们在decoration 属性中选择"none",这样就把下划线去掉了;然后我们再选择颜色为:#339966。按ok按钮返回到edit style sheet 面板; * n8 b# G% Y  n# X/ p" V
  5)在edit style sheet 面板上再按new按钮;
6 \2 j9 P8 P% C4 L' \, n  6)在弹出的new style 面板上点取use css selector ,再在该面板上的selector选择框中选择"a:hover"(定义当鼠标在超级链接上时链接的属性),按ok按钮; , v6 b' a: {8 ?% b; z: h  D6 |- x* X
  7)在弹出的style dehinition for a:hover 的对话框中,我们在decoration 属性中选择"underline",这样就把下划线又加上了;然后我们再选择颜色为:#ff3300。按ok按钮返回到edit style sheet 面板; ( l$ X9 z. R3 W' [3 t
  8)在edit style sheet 面板上再按don按钮,至此所有设置结束,你在dreamweaver3的源代码检视窗中将看到在与之间如下所示的代码:; T# v  g& i2 G! u8 y# L0 g. T
  
5 r! I4 p( |* S2 W+ F  $ l, t. ]: B5 K4 F8 T
  
' [3 [% ^( ]# I8 V  有了这段代码,你在该网页上的所有文字链接在浏览器中显示时没有下划线,当你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。若你想在其它网页中也具有这种效果,你可以用上述方法设置或更简单点,直接把这段代码复制,粘贴到与之间即可。注意:若不是在a 中定义除去下划线而是在a: link中定义除去下划线,在实际使用时不能除去下划线
 楼主| 发表于 2005-1-3 14:02:04 | 显示全部楼层
在网页中实现细线边框的两种方法/ E6 V% ~4 g4 D

( x3 w$ \: t+ P7 M4 d! x+ b, l4 w很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。4 j* H4 H, L3 {: V
5 V* i& E5 G( w; ]
  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。: C! k4 c) m$ E/ E5 T3 [5 @) j
   4 D! D9 M7 h( D  e" ]
  如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表格中嵌套定义另外一个表格,背景设为全白,并且把Weight=100%。这时,两个表格是重叠的,但是,如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说,黑色的表格比白色的表格多出了一个像素的外围空间,而白色的表格又在黑色表格之上,从而达到细边框的效果。源代码如下:4 ^/ O0 n0 A; y8 J3 A5 t! O$ o+ |
$ z& q9 T5 x& f7 ?8 ^# A
  〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
6 i: P% e0 y* R4 ]3 `$ y& F. @. M
0 }& w/ f9 X! t9 x  i   〈tr〉 - S3 |! L1 V1 F% q5 k
" Q7 R$ \4 D* V* ]
   〈td〉
& ?7 ^$ F' ~' q2 ]9 l1 Y! _& B! N8 d$ j% E* G
   〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
! C5 s/ E9 c6 u( F7 z. ^0 v
/ S2 m6 t- \9 T5 Y   〈tr〉
- F" A1 x& \, L: H% U
: x0 `- I) j' x! N: H, c+ ^1 c; b6 z   〈td〉
9 }) F  c6 s3 k1 ~: H$ D/ W0 y% a+ h8 N
   〈/td〉" ?/ R. @! r$ g- u# X

) r2 k5 U4 t. H# @/ W5 P   〈/tr〉8 ~# L) m" C% ?6 k$ v9 i( I
2 f+ |# I4 x0 H( g, G5 Q: B, i
   〈/table〉
! W. Q9 O2 ^9 c6 U7 T) g1 `. Q9 C) k. ~" C; U# D
   〈/td〉! D  o3 e5 ]6 W  r' b

# y( v! F3 v  ^* j   〈/tr〉5 p4 r4 j, V: H6 W0 h
0 _% A: Z5 x+ M: {$ Z! M5 _! U7 o  M
   〈/table〉* l8 l, F3 V4 t- ?9 v

: }9 z1 Y- I* g9 h) u8 C  第二种比较简单,那就是用CSS(层叠样式表)强制定义,但是,有些比较老的浏览器不支持CSS,可能导致无法显示你所要求的效果。不过使用CSS定义,语句非常简洁,所作网页的容量也较小。它的*作方法是,在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER-postion: black 1px solid;",其中,Postion的参数有Left、Right、Top和Bottom,分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。$ ?& U* k% R- m

6 A2 F3 Z: A) [% p. L  源代码如下:
2 b0 B& I2 B* A( }  m- J- E4 S) H3 d
  〈table border="0" bgcolor=white〉- H; D9 i( v! `: B$ V7 \7 \

9 P) e4 l' p4 }( \7 s   〈tr〉 + F4 l- N( @0 c0 ~. {& Y

8 O- e: y) v% Z/ @   〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉# n% P- }/ ]5 V/ B2 I$ ?( a

, k! m' G; D" f. n+ J4 I6 {& A   〈/td〉
+ l/ j. @4 }: k* [
+ `7 p+ a+ g$ |: |+ x   〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
3 a& E5 K( K8 s1 a
1 w! m9 m  X( R) w* Q6 G   〈/td〉
1 q/ h6 M( o2 [: j
: H+ C' ?0 Q" l- Q7 s) ^   〈/tr〉
# c' l- y5 W3 p  i+ s
* @% G7 i. U; H2 Z8 f+ `3 P  N! k   〈tr〉
0 L/ J& [7 L$ {# [6 ^& M, F) {% b1 B, M
   〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉+ M" k1 g4 b* t# _* v% `$ i* a
% c2 Y6 T6 r( `- E; a
   〈/td〉
: Z1 H) Q6 H, x- x- z& q9 K3 s0 S! j3 `6 v
   〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉. ]3 H! B, e: }2 m3 q

7 z9 ^) b" M* w8 j+ d  c+ p3 o. q; s  N
   〈/td〉
8 h0 h; d/ u/ z+ d0 G6 Q! O. C" t4 {8 s& U. G" h! B5 F  D
   〈/tr〉
- d0 Y4 i) l/ b0 f7 ^4 r4 F5 u, P) V, E# I* {1 O3 t* |% |* D( t
  〈/table〉
回复 支持 反对

使用道具 举报

发表于 2005-1-3 14:13:32 | 显示全部楼层
收了
回复 支持 反对

使用道具 举报

发表于 2005-1-3 15:37:36 | 显示全部楼层
这些很实用
回复 支持 反对

使用道具 举报

发表于 2005-1-3 19:49:38 | 显示全部楼层
不错,加分!
回复 支持 反对

使用道具 举报

发表于 2005-1-4 11:25:02 | 显示全部楼层
谢谢
回复 支持 反对

使用道具 举报

发表于 2005-1-4 16:19:11 | 显示全部楼层
有用的,我也收
回复 支持 反对

使用道具 举报

发表于 2005-1-4 16:21:48 | 显示全部楼层
真的不错,谢了
回复 支持 反对

使用道具 举报

发表于 2005-1-4 22:14:58 | 显示全部楼层
这个是基础,很实用.不错!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则