网页常用代码

[复制链接]
查看: 712   回复: 8
发表于 2005-1-3 13:59:36 | 显示全部楼层 |阅读模式
简单的window.open方法
# [1 g. b2 _- [% B  a, c  <a href="#" onclick="javascript:window.open(’文件路径/文件名’,
- I: N3 Q) t; y  ’listnote’,’toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,: d% U1 w! e0 |
  width=350,height=300’);">文字或图片; k6 B" [+ h# t8 q
  
) r' E5 J: ]5 X/ q) p! o% U! ~; ^- @0 H/ \5 B- H% h. l
图片随机替换
8 d$ n9 I  C3 u% V8 i/ t! s/ ]# M  
- P( t% |6 w( T  document.write(’’)
3 H3 T! M% @7 X  
, I# o$ k9 s2 l! }* M. W; R& h8 u  图片文件名为0.gif 1.gif 2.gif 3.gif 4.gif
& o, |) p$ U. R+ u' v/ z( F, P
  X0 }/ p( B1 ?设为首页
/ Q' A7 Q* f+ M1 G: n- s  <a href="#" onclick="this.style.behavior=’url(#default#homepage)’;0 d) X% z) R5 b( ~8 \4 U% d
this.sethomepage(’http://cu1985.126.com’)" height="2"> $ `' e; K8 e4 P$ y% J7 p

! ]" V) k9 E, ?; ?( m1 b加入收藏 7 R- x7 ^! F' G+ K  y
  <a href="javascript:window.external.; W+ m& m# C, d) a* L4 A; Y
addfavorite(’http://www.wosay.net’, ’wosay中文网’)"> 0 F, k7 x, I+ a8 S6 V" E& e1 o0 _

2 E9 J7 F7 M6 H忽视右键
* o0 J3 G0 [# t0 {7 n/ q  
/ t6 ~3 [6 T3 P* S4 N  n  或
  o" f' C" T" t* E  
' J: E  }; D4 r1 v" K. l/ }7 v$ f3 _& m2 W0 K4 ]' z. p2 `- c& K6 D
自动转页    ( w/ K" j5 ^. U4 ~4 k
  
4 P/ [9 l9 \! ~1 X- P& X
3 O3 f) M( R3 E加入背景音乐
% G* a  o1 }3 X* |  ie:
1 Z2 y4 ]) E! T0 t  q6 L  ns:( q$ P0 i5 V: p* ?( i4 @
  ' N7 j# K3 R/ n' c( `
  *.mid你的背景音乐的midi格式文件 " \6 q) K$ B$ l. J- r: E; k% v: ?

2 w& U3 |! V& b6 b( J' N% u' E. V网页自动刷新  
2 v9 v; a) R% t  在head部记入
8 U. E4 T' Q7 c) Q$ A- R  
4 x! }1 t; H6 J; y* D. p: g- E9 m  其中20为20秒后自动刷新,你可以更改为任意值。 5 c7 n2 c9 R' C0 K
7 p$ D. `0 Q  Z
拉动页面时背景图不动    
, {; q3 D  B) @" z- `8 V  & j% v% q* X, M
  
- |- i9 F# t- g$ `  body  {background-image:url(logo.gif);
7 [& R4 w: W  z! B: C$ i    background-repeat:no-repeat; background-position:center }
$ ?7 t' X$ ]; U+ h# w  
% h2 n# }  K8 ?, `2 E6 ]   0 l7 o& A$ B2 N$ E" _/ D; k  F+ [

2 k3 }* j' f6 r/ a让浏览器在保存页面时保存失败       : `$ i+ Z$ y0 j& H* I/ B1 E! m
  5 `$ x0 A( V, ?, U) Z
  
: P1 }0 g& F1 k9 e0 P" [% m: [4 K8 Z5 t+ W  8 _3 l$ I  w0 ^
  
$ ~$ Q/ o; }/ t$ E. @  [2 p! ~% R( C6 j& n5 ^
在网页中,图片和表格接触的地方如何不留空隙?       
( b- s$ J0 b$ I! E1 F  要使图片和表格接触的地方不留空隙,仅在表格属性面板上把外框线(border)设为0是不行的,不仅仅只是表格外框,还有两个设置,即在表格的属性面板上还要把单元格的两个属性设为0(cellspacing="0" cellpadding="0")。 * L, z: u( L1 e7 h$ G2 V/ G& P* p: ?
1 t+ r: o/ L3 }* y5 s) c) A2 O* K
如何把自己放在主页上的zip或其他文件让浏览者下载(down)? # _" m; \" F( w) g+ g: a
  用dreamweaver3其实很简单,把要让浏览者下载的文件名写上,然后拖动鼠标选取这段文字,在文本的属性面板上"link"的属性输入框中写上文件名就行了。注意:若被下载的文件与该网页不在同一目录下,则文件名必须包含相对路径,否则到下载时将提示找不到文件。
; N* @9 N+ M# @' u. Z
0 X1 U( P4 w" F4 `% j+ f点击连接打开本地"我的电脑"等
' P) F9 _# q9 A% @8 _  8 w7 v" O4 ~, b7 U" b' k4 T  M
<a href="file:///::{20d04fe0-3aea-1069-a2d8-08002b30309d}" target="_blank">我的电脑
: _2 B. N6 x/ ]. H* Q; @# m0 e1 {  y  <a href="file:///::{208d2c60-3aea-1069-a2d7-08002b30309d}" target="_blank">网上邻居
3 i) t- P5 S. n; H  <a href="file:///::{645ff040-5081-101b-9f08-00aa002f954e}" target="_blank">回收站
& X: z0 S, p* H: O% D  P6 |9 x# D  <a href="file:///::{7007acc7-3202-11d1-aad2-00805fc1270e}" target="_blank">网络和拨号连接. ]7 Y' h1 u4 c1 |9 q2 s: _( R( ]3 T
  <a href="file:///::{d20ea4e1-3957-11d2-a40b-0c5020524153}" target="_blank">管理工具% q: s0 v1 U- x- |
  <a href="file:///::{2227a280-3aea-1069-a2de-08002b30309d}" target="_blank">打印机# T$ J- u( a5 W# \- w& Z5 R9 m' C
  <a href="file:///::{d6277990-4c6a-11cf-8d87-00aa0060f5bf}" target="_blank">计划任务
8 V. B9 M) z" T, u1 A* r; l* j: H  <a href="file:///::{d20ea4e1-3957-11d2-a40b-0c5020524152}" target="_blank">字体
/ q1 Q2 W6 [" ]6 h8 h# v9 P
- |! H5 A" w! v# T; @7 R5 P简单的页面加密  # X9 s' W/ e. r2 D, m% R+ _( N; U
   <script language="javascript">
5 S. L* A! [5 z" w$ P   , Z- \/ {+ V6 v
    
% ~% P, W' {: {9 \9 L" ?$ t
, V( \0 }2 F. `- \$ B+ t网页自动关闭       
/ K  f  p" n- ~$ f- A5 r% x  I   ( |7 b3 |* e' Y
   2 y7 Y) K; o4 K
  
" z" l" ~! ~- |" p   % D: V1 E0 k( x& O/ x& k& h0 x
   ; [+ t# U2 B# e' R5 q
  
; d" y) r! Y# r, F$ h   2 R$ _5 g+ t% G( `  ^. [& w2 g
   这个窗口会在10秒过后自动关闭,而且不会出现提示.
+ k& [; b! Z4 b6 h8 T7 H7 F# Y1 u    4 i1 ?7 _# k4 T: H6 t

/ \  _6 |( t- m, W% J保持layer在最前面,而不被iframe、object所覆盖   
# q" f* t+ L) ~& t% I   在layer中再插iframe 或 object 设z-index值
3 I( @% y* r4 o1 h" V% G9 P# 前面
0 F3 J5 ]5 F9 D: {9 q6 a0 @: O* ~# 后面
9 L0 X$ f* B8 n! p; {height=100% width=100%>% D! W$ Q9 K" A% v
$ `6 Q& w7 x# h6 o
2 @) X1 I- {: J. a5 I6 \! y& t

: N& Q8 T* u9 y3 y+ I) [! r1 ]( e1 a4 s1 @3 @# `" A) Z- k  w4 i
6 _) z! i& }& f: E7 \3 o

4 I$ L0 s5 B5 P5 C/ y. q3 Q% a' t8 W% a% h4 x2 {1 R
2 `5 U$ X9 v; `: W; M# [: c

3 i* \# f. ?6 c4 |7 T% G3 j" @: f2 a# N/ U+ n6 N- n

' V0 @: ?0 ]& Y: H  c9 [. a' _改变滚动条颜色     
+ {7 P+ R7 K% k0 {+ R3 o     K4 y. B0 ]2 K' X' h0 N7 N
   body {
8 s) H& N7 R6 m1 K2 K' w9 ^# Lscrollbar3dlightcolor: #ff0000; /*滚动条亮边的颜色 scrollbararrowcolor: #ff0000; /*上下按钮上三角箭头的颜色 scrollbarbasecolor: #ff0000; /*滚动条的基本颜色 scrollbardarkshadowcolor: #ff0000; /*滚动条强阴影的颜色 scrollbarfacecolor: #ff0000; /*滚动条凸出部分的颜色 scrollbarhighlightcolor: #ff0000; /*滚动条空白部分的颜色 scrollbarshadowcolor: #ff0000; /*立体滚动条阴影的颜色 scrollbartrackcolor: #ff0000 /*滚动条的背景颜色: t& c  R8 s& I5 b& u
   }
6 N4 A/ e/ d% W9 Y6 O& H    
" U# L: P8 B. G: `; \0 w3 o   说明:
/ e, X. Z4 h$ }" s! U2 C1、必须是ie5.5+9 U' L) o6 I% m" e! I2 o' ]
2、当页面内容超出屏幕出现移动条时,设置的箭头颜色才有效
7 I* h, }& z% ?/ G3、母页的设置对iframe窗口的滚动条颜色无效,但是对textarea文本筐的滚动条有效" ^. q, C  T0 e. a
" \3 k) v  L' }' @6 {
如何实现定义的超级链接文字颜色? / A# h+ l/ a+ A. N7 q0 z9 U
  许多文章和教程都介绍过文字超级链接的颜色(包括未被访问的链接颜色、鼠标的链接上的颜色、已被访问过的链接颜色等等)可以用层叠样式表(css)定义,但真正在网页中要实现颜色按自己的意愿变化还确实不容易。下面把一些注意事项告诉你,你就能随心所欲地设置文字链接的颜色了。 4 q0 d$ J$ l3 Z6 V8 ~
  1)超级链接的默认颜色是:未被访问的超级链接是蓝色、被访问过的超级链接是紫色; 8 u, F" i3 }5 A
  2)要想使css定义的颜色起作用,在超级链接的文本的颜色属性中什么都不要填;
, r; G6 ?$ d. l6 v% c3 ~: x  3)若你已定义了文本的颜色,发现css中定义的超级链接颜色不起作用,你可以取消文本的颜色定义,或取消超级链接再重新定义一次,css定义的颜色就起作用了;
: d' |' P8 Z, {. Q2 x, e  4)超级链接上各种状态下文本颜色的关系:一旦定义了被访问过的链接的颜色(a: visited),则当链接被访问过后,该链接的颜色不再改变,即定义鼠标在超级链接上的颜色(a: hover)将不起作用了。若不定义被访问过的链接的颜色(a: visited),则当鼠标在超级链接上显示a: hover 中定义的颜色,当鼠标移开时显示a 中定义的颜色。 & ?# a( W9 {- ?/ o; y6 v
   从上述可以看出,文本链接的颜色实际上只能在两种颜色之间变换,并没有象有些文章中讲的那样可以在多种颜色之间变换,但由于用那两种颜色可以任意,所以应该讲颜色的选择范围还是比较大的。
( a$ f. f" C2 B8 Q' x, }" C! O" y9 z3 f; T3 Y- N( @
有些网页的链接,原先没有下划线,你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。如何实现这种效果呢?
& J) T+ b$ h4 @  可用层叠样式表(css)来实现的,在dreamweaver3中编辑层叠样式表不用编写代码,具体*作方法如下:
/ F2 o3 E8 J4 k+ [  1)在快速启动栏中点击层叠样式表按钮(就是把鼠标放上去显示"show css styles"的那个按钮),在弹出的css styles面板上双击(none);
6 D! S3 e- J) J7 K% i6 n( a- R6 W  2)此时,可看到弹出的edit style sheet 面板,在该面板上按new按钮;
. f* R: L" D( f; P: u6 h  3)再在弹出的new style 面板上点取redefine html tag(重新定义html标记)再在tag中选择"a"(超级链接标记)标记后按ok按钮;
* B9 |1 I4 j4 K+ V+ @! }  4)这时可看到弹出的style dehinition for a 的对话框,在此对话框中可以设置超级链接的许多属性,你可以按你的意愿设置,但我们这里主要是要去掉那讨厌的下划线,所以我们在decoration 属性中选择"none",这样就把下划线去掉了;然后我们再选择颜色为:#339966。按ok按钮返回到edit style sheet 面板;
) c6 E7 _9 O) x  J4 y  5)在edit style sheet 面板上再按new按钮;
' p, \- k$ o% G/ a+ \4 D2 I  6)在弹出的new style 面板上点取use css selector ,再在该面板上的selector选择框中选择"a:hover"(定义当鼠标在超级链接上时链接的属性),按ok按钮; 8 K6 F0 e3 Z, d% c$ n
  7)在弹出的style dehinition for a:hover 的对话框中,我们在decoration 属性中选择"underline",这样就把下划线又加上了;然后我们再选择颜色为:#ff3300。按ok按钮返回到edit style sheet 面板;
! d; k6 Y: D) g  8)在edit style sheet 面板上再按don按钮,至此所有设置结束,你在dreamweaver3的源代码检视窗中将看到在与之间如下所示的代码:
& L3 m% H0 n  b' \) j  
% n  R9 s9 s' ?9 |$ A1 V6 W$ G  
* q5 ^% t& v1 m/ w1 ?; J7 L; ~  
; A% D* h* |' O' I# w+ ]  有了这段代码,你在该网页上的所有文字链接在浏览器中显示时没有下划线,当你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。若你想在其它网页中也具有这种效果,你可以用上述方法设置或更简单点,直接把这段代码复制,粘贴到与之间即可。注意:若不是在a 中定义除去下划线而是在a: link中定义除去下划线,在实际使用时不能除去下划线
 楼主| 发表于 2005-1-3 14:02:04 | 显示全部楼层
在网页中实现细线边框的两种方法+ i7 y% s( b! q8 b' }( C
0 T! m0 i5 N& g  ^. }! z
很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。: n" v' r! u; V5 \" [
1 l0 ]# `; U- e! T  K- H7 A
  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。) l$ [& t5 x5 n* P2 S- {
  
3 H. R  T) ]; n  如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表格中嵌套定义另外一个表格,背景设为全白,并且把Weight=100%。这时,两个表格是重叠的,但是,如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说,黑色的表格比白色的表格多出了一个像素的外围空间,而白色的表格又在黑色表格之上,从而达到细边框的效果。源代码如下:6 g! H! R. o3 i5 W/ O$ C, T8 w& ]

; c7 X  @' ]1 X4 ^# h& Y1 V  〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
5 K# A" |; [, `9 a+ u9 u
' |4 `3 B# C& M. k   〈tr〉
+ T& _4 J* H$ W- U' J: ]' l
. g; k& |  b$ F/ E0 }   〈td〉 1 m! v4 ]( n0 a9 c4 f' u# Z% `) w) [
% w* E( e/ Y6 T$ ~8 k# P) b
   〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉2 x6 _: T4 z& {3 S/ g+ ~
' F9 W) {% w' f
   〈tr〉 ; l# q  \" k: ^/ a7 F0 u
/ s! ?1 k* R: t8 V( i* u1 P3 A
   〈td〉! z/ q4 ?5 l- u' @  J# ?8 u5 B6 ^2 S
& h4 K: s% |* o6 L2 A' q( c! T
   〈/td〉) r4 ?; h. }  p& N
# @, Y2 W2 m' o. M0 J% n
   〈/tr〉( G) }. n! B* Z0 x( H$ {0 X

. e' h: o* M5 s+ G/ u4 u   〈/table〉
4 _" ~6 a" e5 j/ T
! ?" f0 A3 J0 h% J2 S& k2 Y' N7 K   〈/td〉
, q8 G/ |6 P& r+ ^1 r8 x, `+ u8 b9 |/ U) L& n' O
   〈/tr〉5 y7 }9 J( t8 I* ~

- v2 S+ I( Q- i* L   〈/table〉
. \# @6 O3 x3 Z6 b$ p9 W: |* \+ q1 ^- t; A+ r+ E) C
  第二种比较简单,那就是用CSS(层叠样式表)强制定义,但是,有些比较老的浏览器不支持CSS,可能导致无法显示你所要求的效果。不过使用CSS定义,语句非常简洁,所作网页的容量也较小。它的*作方法是,在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER-postion: black 1px solid;",其中,Postion的参数有Left、Right、Top和Bottom,分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。0 `# g7 Y! L# J7 N9 V
7 L2 V3 t5 i7 t' R% W/ F: h* U
  源代码如下:4 O! H' [7 m# U$ g* J
; f4 p6 z9 j# Y( }6 ~0 V) q  w. a
  〈table border="0" bgcolor=white〉/ z( T0 v( v( r+ g7 f+ a
4 A3 {" B. F9 C; w1 G% N( B
   〈tr〉 8 ^8 N' U/ y' I2 p+ g" e+ Q# Z, b
6 w2 n4 |; d$ I+ i$ N8 f) |. z2 w
   〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
. M" R' \# U5 b# I2 U0 g
9 T8 M2 j0 i5 b) r   〈/td〉, ~0 c0 Z! ?* P& b( I8 l/ z2 \

7 t4 H; A! P6 m6 r: i   〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉0 l! e8 X( T  I* N+ K! Q5 R' Y

: {, \3 g& M" s5 x   〈/td〉5 X! d* L1 s# v7 `- P% d

8 a' }: B$ {% Z, F   〈/tr〉3 f% F* F# Q, J, R
8 w# o# |0 q7 }* E7 K, w8 w; {
   〈tr〉 , L( ^! M+ C' b: q" V

1 E5 S% E$ ~- P   〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉4 p. R/ j) M* L0 T
6 x8 j. |$ z& d+ ^
   〈/td〉
9 k- P0 H6 @  H8 A6 p' h' R; W7 i$ `1 ]$ g1 J, Z9 o6 ^
   〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉( \* I* J' ~7 ?* S& L# W
& ^- W7 H6 G3 ~8 l( j. s

0 D# ?+ ]1 H" d! v1 ~$ g8 o   〈/td〉
4 q; U5 a! i7 S  z, P/ B" |6 Z& T- k5 @0 s- |
   〈/tr〉: W/ _/ G6 k& U: F2 U$ v% i
* A5 Q. i) b+ e) m  O' g/ v
  〈/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 | 显示全部楼层
这个是基础,很实用.不错!
回复 支持 反对

使用道具 举报

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

本版积分规则