网页常用代码

[复制链接]
查看: 594   回复: 8
发表于 2005-1-3 13:59:36 | 显示全部楼层 |阅读模式
简单的window.open方法
- \5 i4 ]/ n4 T9 n2 X; Z; C  <a href="#" onclick="javascript:window.open(’文件路径/文件名’,
- Z0 A/ G3 m7 D2 @* h( s! ~9 q  ’listnote’,’toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,
) O4 t6 d- ]6 S) n  width=350,height=300’);">文字或图片" d" m) D- L- ^4 b% @6 k( g
   , l0 @' R' c( a. r* `  l0 Q
# g8 |: C! Q4 d# h& ?
图片随机替换 # x5 j) _4 y  u0 y# i' Z. f
  
1 \6 l& F5 o8 L  document.write(’’)+ |3 L1 ?  O" Z: u/ M; y* e
  
+ u; y  T. W1 P2 V( I8 x  图片文件名为0.gif 1.gif 2.gif 3.gif 4.gif 7 E) o4 m7 l! K; f( Q
  w+ L# Q) |/ t7 b/ ~
设为首页 - d6 g; u0 j5 i1 e3 A# O" W+ E8 i
  <a href="#" onclick="this.style.behavior=’url(#default#homepage)’;
5 T! D( g6 [7 wthis.sethomepage(’http://cu1985.126.com’)" height="2"> ) @# y5 ^, \/ F$ ?' j4 l
( Y- T- w! G/ @
加入收藏 - A$ a: T" n1 P; s1 k4 p# @
  <a href="javascript:window.external.
8 V0 h0 _& H7 x5 F) B8 p" F5 g! Haddfavorite(’http://www.wosay.net’, ’wosay中文网’)">
" w+ C' T/ B$ P' v8 X# F" F5 Y% E- F; d) H& ]
忽视右键 ! v: ~; U$ T9 t9 ^/ a( p
  
/ ?9 _1 b) n, Z  P) [2 S  或
! }, r' F6 [0 Y+ Y# `7 R# N  W3 s   + l8 j- [7 o$ N- R
$ n' O; `1 l% D6 v9 ]1 j
自动转页    * H, P  q6 w5 H* W
  
: u. L, M% s/ Y6 q/ A. C
0 W+ f4 e$ i, V2 i# a, f) c加入背景音乐
$ a9 V1 L+ K/ N; d* }' C5 V: g  ie:
% c5 E% V5 n! E% E) W. W  ns:( E- r2 A" r5 s
  
4 J; O# L, M1 G9 u3 b  *.mid你的背景音乐的midi格式文件
; s/ {3 p4 V- E0 V7 ~$ }$ {/ W, w. c
网页自动刷新  # v# l% m. f8 q& r# U
  在head部记入
' _- Q; I7 ]( m3 O2 y  , [; |- t2 |' D# {9 w% a
  其中20为20秒后自动刷新,你可以更改为任意值。 & D2 M3 l  x% C. F
0 ^- W+ M! n+ K, k3 G& G/ J
拉动页面时背景图不动    / c* i8 A- b: Q, [" l- \
  ( q7 u7 d. `/ @& `: A+ X4 s
  * q& u5 G* c8 U" B$ s+ Y0 k+ v
  body  {background-image:url(logo.gif);
  `% B7 s, [3 T' _# x    background-repeat:no-repeat; background-position:center }$ {% {2 J" f! N! n1 C
  6 `% j  ]2 P1 d; Z# a' g2 K
  
( h4 `) T4 z. `0 P# i2 W) n1 w' e( ^  C% V0 g
让浏览器在保存页面时保存失败       0 J; S! ^% j4 e( M1 S" G0 ^9 u; b8 f
  7 i8 g# Z0 a3 P
  
# O5 ~2 b$ r! c/ i, `5 ]  % p% E; l* A- R1 z+ X
   - G0 S& A- l% X- }
" V' v- d- r2 W- H# {( g- G/ V2 `
在网页中,图片和表格接触的地方如何不留空隙?       
/ j7 z) h) T+ l0 P  要使图片和表格接触的地方不留空隙,仅在表格属性面板上把外框线(border)设为0是不行的,不仅仅只是表格外框,还有两个设置,即在表格的属性面板上还要把单元格的两个属性设为0(cellspacing="0" cellpadding="0")。 ; X; n5 |! V- J5 W: w

3 A. D7 N! G1 o: b, Q( u如何把自己放在主页上的zip或其他文件让浏览者下载(down)? . X  B& s' g! z. t/ G
  用dreamweaver3其实很简单,把要让浏览者下载的文件名写上,然后拖动鼠标选取这段文字,在文本的属性面板上"link"的属性输入框中写上文件名就行了。注意:若被下载的文件与该网页不在同一目录下,则文件名必须包含相对路径,否则到下载时将提示找不到文件。 9 V5 P0 U7 P! e0 i/ a
& W+ {6 U6 `/ g- f# M& Q
点击连接打开本地"我的电脑"等
, W" l* H. I# W( O* i  c  ' a  G' e8 B$ q2 ^5 f/ D. ?9 {
<a href="file:///::{20d04fe0-3aea-1069-a2d8-08002b30309d}" target="_blank">我的电脑! Q9 \$ T, x) R' |  S
  <a href="file:///::{208d2c60-3aea-1069-a2d7-08002b30309d}" target="_blank">网上邻居
' H0 ~( _: q" ]  <a href="file:///::{645ff040-5081-101b-9f08-00aa002f954e}" target="_blank">回收站5 B) R7 i  Q/ \& O! q: u' r
  <a href="file:///::{7007acc7-3202-11d1-aad2-00805fc1270e}" target="_blank">网络和拨号连接# g4 D+ Z" H* K5 H$ {
  <a href="file:///::{d20ea4e1-3957-11d2-a40b-0c5020524153}" target="_blank">管理工具! \/ z- W9 i1 I
  <a href="file:///::{2227a280-3aea-1069-a2de-08002b30309d}" target="_blank">打印机7 c' N) L* K" H
  <a href="file:///::{d6277990-4c6a-11cf-8d87-00aa0060f5bf}" target="_blank">计划任务" \/ d2 d( J5 Z! d( G
  <a href="file:///::{d20ea4e1-3957-11d2-a40b-0c5020524152}" target="_blank">字体
& ]; w8 E8 t( k$ X# Q
* R) w, Y# M7 q5 ^3 J% E3 E0 t简单的页面加密  0 u9 n5 u* f; n+ c) q$ B0 }
   <script language="javascript">' V4 J8 l  k0 X( M1 _1 V
  
* `$ i( ?; @2 _    
& u/ R+ z4 g8 t1 w; F8 `! F
& {% s/ O4 ?0 x/ D网页自动关闭       . r2 w; f$ @3 c, s- q, A
   1 D9 K* s; N7 p8 m
   4 u: V8 c7 S( }0 [
  
4 _3 A. v  D. ?2 @; j  
0 X8 r4 c, g7 u$ x   6 w( l5 M4 J3 P, e5 q' S# n
   0 ^" [" c' d4 [! |7 n
  
8 ^; Q! a" j9 _+ b( j   这个窗口会在10秒过后自动关闭,而且不会出现提示.& @: Y5 A+ @1 T2 u! p- x
    
8 ?4 B) Z9 y6 |  Y1 m  R9 o0 i( @2 A8 X5 \, I' d% K
保持layer在最前面,而不被iframe、object所覆盖   9 X4 P( D% R: V  W% H+ z
   在layer中再插iframe 或 object 设z-index值
0 A8 A# T3 I% ?# M8 D$ Y% f# 前面
# c7 p+ z# b  O) b6 F# }6 B# 后面
2 @; W  R5 m% T4 kheight=100% width=100%>$ h: V9 G( d) Y* k1 l' Z
% L/ I* F7 g0 {8 \
+ O" j4 @8 ?; [1 X% ]' m, S

5 x- p$ x( q/ k" L: |* b5 M+ r* \. L/ D' v7 m

) c% N# f5 l5 Y2 v$ |3 X* Z: d+ ?4 S: }3 M

* B& f, ^- m, v: e# \) m
# J3 z4 B" `8 j  h
. p2 |4 C& i4 U6 F
+ k: T6 o* P! A- U- H' {' ~* q" L( P, y( {! p. t
改变滚动条颜色     8 g' \# l* O3 V6 S! {! {
  
; ~" G3 @/ _+ B* J" Y   body {3 u. o; r; }* o. [
scrollbar3dlightcolor: #ff0000; /*滚动条亮边的颜色 scrollbararrowcolor: #ff0000; /*上下按钮上三角箭头的颜色 scrollbarbasecolor: #ff0000; /*滚动条的基本颜色 scrollbardarkshadowcolor: #ff0000; /*滚动条强阴影的颜色 scrollbarfacecolor: #ff0000; /*滚动条凸出部分的颜色 scrollbarhighlightcolor: #ff0000; /*滚动条空白部分的颜色 scrollbarshadowcolor: #ff0000; /*立体滚动条阴影的颜色 scrollbartrackcolor: #ff0000 /*滚动条的背景颜色
$ l9 q! E  ]$ x* P8 A% u/ N7 t   }
) M( v8 l$ C" S    
( w' P! n' `2 B# S   说明:
" L1 P3 p  @9 U, j, M1、必须是ie5.5+
. y; X0 W; [( f" e/ N( Z" B  [( @2、当页面内容超出屏幕出现移动条时,设置的箭头颜色才有效 - b2 L0 _4 L3 d! O( P6 E) _
3、母页的设置对iframe窗口的滚动条颜色无效,但是对textarea文本筐的滚动条有效
% h8 @4 }2 j! B' b- r. \& X- ~6 W. t) Z" q
如何实现定义的超级链接文字颜色?
- L8 ]5 w/ v8 ~  v  许多文章和教程都介绍过文字超级链接的颜色(包括未被访问的链接颜色、鼠标的链接上的颜色、已被访问过的链接颜色等等)可以用层叠样式表(css)定义,但真正在网页中要实现颜色按自己的意愿变化还确实不容易。下面把一些注意事项告诉你,你就能随心所欲地设置文字链接的颜色了。
4 ~; r; s8 \) D  1)超级链接的默认颜色是:未被访问的超级链接是蓝色、被访问过的超级链接是紫色;
7 m9 I, a6 L$ A; q, f" K  2)要想使css定义的颜色起作用,在超级链接的文本的颜色属性中什么都不要填;
3 t* X7 ~. |  b0 n% D- M5 M/ _& e% Q  3)若你已定义了文本的颜色,发现css中定义的超级链接颜色不起作用,你可以取消文本的颜色定义,或取消超级链接再重新定义一次,css定义的颜色就起作用了; 4 S* w4 \' k$ A$ x
  4)超级链接上各种状态下文本颜色的关系:一旦定义了被访问过的链接的颜色(a: visited),则当链接被访问过后,该链接的颜色不再改变,即定义鼠标在超级链接上的颜色(a: hover)将不起作用了。若不定义被访问过的链接的颜色(a: visited),则当鼠标在超级链接上显示a: hover 中定义的颜色,当鼠标移开时显示a 中定义的颜色。 / }4 I4 P& E" x0 y$ Y
   从上述可以看出,文本链接的颜色实际上只能在两种颜色之间变换,并没有象有些文章中讲的那样可以在多种颜色之间变换,但由于用那两种颜色可以任意,所以应该讲颜色的选择范围还是比较大的。
: F  H3 \. D) ~' o: @' I+ j5 p
! t8 A! {5 v8 B0 X; m9 F, ?有些网页的链接,原先没有下划线,你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。如何实现这种效果呢?
0 @- \+ E/ B/ }; ?# D  可用层叠样式表(css)来实现的,在dreamweaver3中编辑层叠样式表不用编写代码,具体*作方法如下: ' Y* I* ~5 i: g+ l' b2 {! s
  1)在快速启动栏中点击层叠样式表按钮(就是把鼠标放上去显示"show css styles"的那个按钮),在弹出的css styles面板上双击(none);
0 Z( y% M$ s- R% U% f  2)此时,可看到弹出的edit style sheet 面板,在该面板上按new按钮;
& N4 {7 L2 d3 x6 V% a  3)再在弹出的new style 面板上点取redefine html tag(重新定义html标记)再在tag中选择"a"(超级链接标记)标记后按ok按钮; 4 h/ `, ^# M* c
  4)这时可看到弹出的style dehinition for a 的对话框,在此对话框中可以设置超级链接的许多属性,你可以按你的意愿设置,但我们这里主要是要去掉那讨厌的下划线,所以我们在decoration 属性中选择"none",这样就把下划线去掉了;然后我们再选择颜色为:#339966。按ok按钮返回到edit style sheet 面板;
5 d$ [$ ^; O8 }9 N  5)在edit style sheet 面板上再按new按钮; + E. @/ R1 J2 M3 m8 E3 `2 l
  6)在弹出的new style 面板上点取use css selector ,再在该面板上的selector选择框中选择"a:hover"(定义当鼠标在超级链接上时链接的属性),按ok按钮;
6 A3 g9 B$ h' ^$ \7 b8 G  7)在弹出的style dehinition for a:hover 的对话框中,我们在decoration 属性中选择"underline",这样就把下划线又加上了;然后我们再选择颜色为:#ff3300。按ok按钮返回到edit style sheet 面板;
" r, e- {) V/ V: i6 \  8)在edit style sheet 面板上再按don按钮,至此所有设置结束,你在dreamweaver3的源代码检视窗中将看到在与之间如下所示的代码:
0 l" N7 K8 a( }4 b3 c    p( R3 J9 F3 n7 S
  
+ i" A& l, c' j$ B  
' t/ _, Q+ |& g3 R4 S& H+ T  有了这段代码,你在该网页上的所有文字链接在浏览器中显示时没有下划线,当你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。若你想在其它网页中也具有这种效果,你可以用上述方法设置或更简单点,直接把这段代码复制,粘贴到与之间即可。注意:若不是在a 中定义除去下划线而是在a: link中定义除去下划线,在实际使用时不能除去下划线
 楼主| 发表于 2005-1-3 14:02:04 | 显示全部楼层
在网页中实现细线边框的两种方法
* ~6 Y: [% O0 K7 G) R) E3 B" R( e4 |5 K4 n3 U5 u
很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。
1 m  v# e. S* o! B8 G8 e4 m: _7 s! O+ T* I$ V. A
  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。9 w- y$ S9 ]9 x- H% _* s; D
  
. N' r* [9 ^  e  如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表格中嵌套定义另外一个表格,背景设为全白,并且把Weight=100%。这时,两个表格是重叠的,但是,如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说,黑色的表格比白色的表格多出了一个像素的外围空间,而白色的表格又在黑色表格之上,从而达到细边框的效果。源代码如下:9 f7 ]0 F! s0 |+ Z5 E5 N
( q2 E' m* c/ f
  〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
2 m# j( B* M1 _, h$ i9 c; {
; Q; E* m+ C' X& f5 v7 e   〈tr〉 - d" I. D; g  u5 `$ x) Z

) n+ f: X% }3 {- m" \  K* q6 u   〈td〉 # j* e# z. c: e4 ?/ D$ T3 I
/ |, z1 o. W% o4 U/ J- o
   〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉' x* ^+ C0 u& W% W
2 o& i9 |6 O1 `! s
   〈tr〉
1 g* ?- G3 D( U: i! g* _* u/ S# G' m
   〈td〉& @, G, ~; w5 z& `6 G( U

! p* k8 M/ R! Y/ @& `' s4 K& M   〈/td〉
5 T( U7 T- E1 G; R4 O% r" [
; ^; V/ C2 o, S3 N: b% s   〈/tr〉4 Y, D% d8 h# F/ a6 ]% z8 c
- |. w- g+ i/ Z1 y3 u7 S, [) `' d/ n, X
   〈/table〉8 W" L, n$ ^. h. w# ^

4 _6 g6 k$ @+ ?4 C- J: p   〈/td〉, }+ C$ z' \+ s$ f

3 B3 M  G/ B0 `6 H   〈/tr〉
3 z6 a, X: X+ b
& g4 V5 b9 V( Q2 e( [* H   〈/table〉
5 w* ?: A  l1 R8 K- F( w9 C4 K' ]- |' q9 K* l( I
  第二种比较简单,那就是用CSS(层叠样式表)强制定义,但是,有些比较老的浏览器不支持CSS,可能导致无法显示你所要求的效果。不过使用CSS定义,语句非常简洁,所作网页的容量也较小。它的*作方法是,在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER-postion: black 1px solid;",其中,Postion的参数有Left、Right、Top和Bottom,分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
6 E6 h: ^, V5 g3 B( S5 J0 n: q2 Z4 T2 {) }7 w* V3 M! x
  源代码如下:
5 e; t- n7 a# I3 W5 h/ w0 k
" ^% Y# e6 G- r* z! p7 c* t1 ]9 x. y  〈table border="0" bgcolor=white〉! m8 P/ }" k% e: h

7 I; F3 M0 I. p5 P   〈tr〉
3 g5 D% @( b! v& y" B
$ d4 Z9 I( V, Q   〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉% Z# K: x5 s" f8 b8 {* E& h
; P$ e& }3 F, u3 y3 j9 W. S  w1 R
   〈/td〉( q8 P8 _0 f# m6 v0 q% o

$ n, l8 P9 h1 z) ]* }" z1 }   〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉5 y, ^1 y" D* E6 l0 n
. H# b- n9 N4 K8 X) E- i! T
   〈/td〉5 L4 r/ D! Q" N
) ~% O4 L$ s+ H9 k. c+ g
   〈/tr〉
; V; ~( ~, M+ P! g
2 I4 y, A0 H2 a6 N  E   〈tr〉 5 [  G; d' x9 [2 n) y* z" B
9 t3 V' t, W1 ^2 d" F) p) [
   〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
. x0 ~( _! P+ @# q) [! _) g: b" j3 `- \
   〈/td〉
  G* U0 l# }5 @! f+ R  T) ]& r, N) F
   〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
$ P4 c! W. _, H5 @# y$ Q
7 f" W, {# L/ u2 h7 I' W3 @- P, E) p) `8 H) N, _/ r+ H
   〈/td〉: K9 n) ?$ i. f7 _  R

. a- ^9 F9 S' J$ F' z- O   〈/tr〉
# b4 j3 f, C( ?0 E8 F1 x4 |- @4 }* l2 @; m$ S
  〈/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 | 显示全部楼层
这个是基础,很实用.不错!
回复 支持 反对

使用道具 举报

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

本版积分规则