网页常用代码

[复制链接]
查看: 665   回复: 8
发表于 2005-1-3 13:59:36 | 显示全部楼层 |阅读模式
简单的window.open方法 & n' b- H6 W) u# x
  <a href="#" onclick="javascript:window.open(’文件路径/文件名’,: d  k# H5 ?/ S9 n; N
  ’listnote’,’toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,% M, K9 ~8 X: S4 G) V2 o
  width=350,height=300’);">文字或图片* {8 l6 {% T' Y1 p3 ]  J
  
" Q& ]6 d! G( ]. x& b! T$ w0 ]; G7 f9 r
图片随机替换
, I4 L( v% p! i) g" j3 u7 _8 a+ \# D  
% N2 r5 P0 n! L. D! u7 N" |' }3 ?  document.write(’’)% j" @7 i) p+ w; x2 ?
  
6 P0 F# S! ^& F+ g  图片文件名为0.gif 1.gif 2.gif 3.gif 4.gif $ ]% Y' w3 H  L6 D) E* K+ Q

2 T' ?! U* I0 z- J; `& V" q设为首页 ) R' N6 U$ m9 K$ O! l/ N
  <a href="#" onclick="this.style.behavior=’url(#default#homepage)’;
$ |, c2 Y* F- v) d8 U5 M, ?this.sethomepage(’http://cu1985.126.com’)" height="2"> 5 v8 |1 {: o- Y4 f# Q: y

0 s  w+ M: J; S加入收藏
# f& F: I( s; L# V# v  <a href="javascript:window.external.
) n$ P. `/ a6 I9 J- `addfavorite(’http://www.wosay.net’, ’wosay中文网’)">
. M7 m1 c. ?4 }+ I% B  _" D* b6 U& C7 P  g* V
忽视右键 # Y; V: t0 e6 l2 q( _* z- U9 j( f
  
- B- j( ?0 v! Y- P( `, e( t  或! m4 l  k) {, Q+ H: W- a; S
   ' u9 l2 S" d9 U1 x" j/ d
( g; W/ `) h! Z: K
自动转页   
- p( d- k' f6 X4 B( E  
/ N% _2 N* O9 J/ }; ~; m* q# k
/ A& T, j- B/ {9 ?9 u加入背景音乐
2 o+ I& d& F# Y8 F  ie:
4 c1 U$ X: A% L  y5 T! w( }  ns:% e% C* t' \( b! c2 J) G! ~+ P
  & C3 O* F; p1 |  I7 m, Y
  *.mid你的背景音乐的midi格式文件 / J$ r  d# ]$ e# t  S% {: _. d
3 n4 `, X4 f0 f% }" m
网页自动刷新  - ?# G0 X$ k# Q  K
  在head部记入
' B8 s. u+ D  W+ _  : ^0 Y* {9 f, P  P
  其中20为20秒后自动刷新,你可以更改为任意值。
2 d, A: I7 I( E0 j, H( E4 Y% c. o" `; n9 I, g
拉动页面时背景图不动    
+ Z6 |9 q* L$ C  
& e$ D* u0 ~; A' n6 X( S  9 @' i: H6 t3 E3 `
  body  {background-image:url(logo.gif);
# _7 v! y; Z1 |% O: d! Y    background-repeat:no-repeat; background-position:center }
7 a* j; {5 _+ h. v. @2 y  ( ~! y* n! s. p4 E
   0 ]3 e" Z, A; y5 e8 a5 a# J
- ]& V7 _8 R0 Q. S- J5 M
让浏览器在保存页面时保存失败       ) ^2 v- n5 d7 }! a; y* s2 S
  
. ~, b* @4 n5 r  
# b% ?) u4 m# n3 O. p7 y& X, O" }  
- E8 A3 ?7 C6 D  }; e4 S8 e   . h3 K+ @3 q3 S2 j1 `

# t( R( y# j. H8 o9 V0 R在网页中,图片和表格接触的地方如何不留空隙?       
$ u1 ?: @! n3 [8 v  要使图片和表格接触的地方不留空隙,仅在表格属性面板上把外框线(border)设为0是不行的,不仅仅只是表格外框,还有两个设置,即在表格的属性面板上还要把单元格的两个属性设为0(cellspacing="0" cellpadding="0")。 6 h: ?0 R- S% E: b

/ B5 Y5 d! ^5 [- k& o如何把自己放在主页上的zip或其他文件让浏览者下载(down)? 7 F& H/ A% `- @" T% ?, l& @7 }
  用dreamweaver3其实很简单,把要让浏览者下载的文件名写上,然后拖动鼠标选取这段文字,在文本的属性面板上"link"的属性输入框中写上文件名就行了。注意:若被下载的文件与该网页不在同一目录下,则文件名必须包含相对路径,否则到下载时将提示找不到文件。
5 T, B( W5 }. v+ P" E, R: D3 \/ L* P/ O8 Z! L
点击连接打开本地"我的电脑"等
$ J' c- c7 R& g! m* g  $ v, n5 q0 L, X; N2 O; t" c6 |
<a href="file:///::{20d04fe0-3aea-1069-a2d8-08002b30309d}" target="_blank">我的电脑7 P: h' E( [- F* r" H0 i% y
  <a href="file:///::{208d2c60-3aea-1069-a2d7-08002b30309d}" target="_blank">网上邻居
8 r( u- ~  c0 N/ @* s7 `, Y  <a href="file:///::{645ff040-5081-101b-9f08-00aa002f954e}" target="_blank">回收站" \/ G$ R& }" }6 t/ h6 F& T7 t2 f0 p
  <a href="file:///::{7007acc7-3202-11d1-aad2-00805fc1270e}" target="_blank">网络和拨号连接
, R5 H' ]- n( v8 g2 W  <a href="file:///::{d20ea4e1-3957-11d2-a40b-0c5020524153}" target="_blank">管理工具  [  N  ~- g1 a8 @) x+ @" C
  <a href="file:///::{2227a280-3aea-1069-a2de-08002b30309d}" target="_blank">打印机
; _8 _- q- f$ `- z5 C3 ~  <a href="file:///::{d6277990-4c6a-11cf-8d87-00aa0060f5bf}" target="_blank">计划任务4 ^$ N  `3 F. k! q4 E0 k
  <a href="file:///::{d20ea4e1-3957-11d2-a40b-0c5020524152}" target="_blank">字体
6 ~8 c3 [/ [% O$ k% M+ I
5 v- F/ c2 ]* m* Y8 ?简单的页面加密  7 ^0 R9 ^) x9 N9 E. l. V/ q
   <script language="javascript">
) m* l4 l- J* t- _6 E6 u   + Y& e* ^2 u5 e" A2 V+ Y* e5 j
    
, U* o  c4 f5 A2 n% E2 T
, h% D$ s+ L& M6 d, ^& ]4 l0 N网页自动关闭       
/ s; I* C; v: t9 K% @  
! G. `: R0 ^& Y, V6 q$ a   ! r9 S. H8 |+ L* v! S7 R7 O4 H. n0 Y
   1 T$ B& n5 F6 E/ V
  
; ]+ {: O+ F4 F7 s1 }# Y0 [1 B   5 i( \' H' \: `( F9 ^. K
   3 {. e) v( Q. H' ]5 t
  
* b7 U* C8 A; p8 i   这个窗口会在10秒过后自动关闭,而且不会出现提示.
) [& @. h3 H4 L$ g* d4 a    
/ \; \9 o$ ]: E7 B' H4 |; b3 q$ t& f, v1 r" m& J* i* Z
保持layer在最前面,而不被iframe、object所覆盖   
( g. x3 c# Z2 @2 M   在layer中再插iframe 或 object 设z-index值$ r& C* `7 Z8 f% |+ l$ k5 A- S
# 前面' G) t, z" [* R
# 后面1 f1 L- F2 U# f* T+ E) U( ?3 d
height=100% width=100%>
  c" a; o+ n. w, P( J* u+ R* e$ _9 O+ [) I" J! S
3 r: c7 Z6 v3 B/ {
7 J( \. K! |7 T8 i

6 c0 b  [: _. r! T$ A* d% M0 x8 x2 D& g
; c- }4 t* ~9 F: L( G0 i# s; k- ?
5 F( I) S; F% r

% V! j, p, Z/ I! |- \' y( F+ k
* l1 S" U( H. Y9 Q( {1 u- K. l1 M0 x6 w) T, E: X% J
# }  {: b3 D9 c; o+ \' _, C
改变滚动条颜色     
4 {" N1 [! I" Y  z7 z& {  
  `* G0 B; r. s( U6 h: D! f5 h! O   body {
) g, d3 V$ B- g0 w1 t' e5 n7 Z$ qscrollbar3dlightcolor: #ff0000; /*滚动条亮边的颜色 scrollbararrowcolor: #ff0000; /*上下按钮上三角箭头的颜色 scrollbarbasecolor: #ff0000; /*滚动条的基本颜色 scrollbardarkshadowcolor: #ff0000; /*滚动条强阴影的颜色 scrollbarfacecolor: #ff0000; /*滚动条凸出部分的颜色 scrollbarhighlightcolor: #ff0000; /*滚动条空白部分的颜色 scrollbarshadowcolor: #ff0000; /*立体滚动条阴影的颜色 scrollbartrackcolor: #ff0000 /*滚动条的背景颜色
- H( r  r6 R  W   }
: ]# F: h: e) X" u+ V) ^9 b, m, Q+ Q    - Y# X9 E2 D! K# x1 g! Y" q1 e
   说明:
+ @/ w/ s' W6 e. l5 J1、必须是ie5.5+( e% {& A/ C8 E$ b$ Q# d% y% T
2、当页面内容超出屏幕出现移动条时,设置的箭头颜色才有效 8 `  ?+ |8 W& @8 k( A% d4 A7 k
3、母页的设置对iframe窗口的滚动条颜色无效,但是对textarea文本筐的滚动条有效
8 c6 y1 P- W+ G+ V) O
9 |* a! j: U( z4 \. s) j* X$ z如何实现定义的超级链接文字颜色?
9 X8 _! k9 V8 P6 f  ~6 J7 O  许多文章和教程都介绍过文字超级链接的颜色(包括未被访问的链接颜色、鼠标的链接上的颜色、已被访问过的链接颜色等等)可以用层叠样式表(css)定义,但真正在网页中要实现颜色按自己的意愿变化还确实不容易。下面把一些注意事项告诉你,你就能随心所欲地设置文字链接的颜色了。 5 o& P1 q- C; t/ w& W
  1)超级链接的默认颜色是:未被访问的超级链接是蓝色、被访问过的超级链接是紫色;
  r9 ^9 }: m' R! U/ N2 B  2)要想使css定义的颜色起作用,在超级链接的文本的颜色属性中什么都不要填;   V: Y, N! l0 u$ s0 m, }
  3)若你已定义了文本的颜色,发现css中定义的超级链接颜色不起作用,你可以取消文本的颜色定义,或取消超级链接再重新定义一次,css定义的颜色就起作用了;
4 O  k4 l6 U& _" i& Q; a+ a  4)超级链接上各种状态下文本颜色的关系:一旦定义了被访问过的链接的颜色(a: visited),则当链接被访问过后,该链接的颜色不再改变,即定义鼠标在超级链接上的颜色(a: hover)将不起作用了。若不定义被访问过的链接的颜色(a: visited),则当鼠标在超级链接上显示a: hover 中定义的颜色,当鼠标移开时显示a 中定义的颜色。 % t9 V* W6 H7 N5 y8 P: `
   从上述可以看出,文本链接的颜色实际上只能在两种颜色之间变换,并没有象有些文章中讲的那样可以在多种颜色之间变换,但由于用那两种颜色可以任意,所以应该讲颜色的选择范围还是比较大的。 . x: F$ o6 v* m

7 U- P0 j# u; `3 V# n; A7 L有些网页的链接,原先没有下划线,你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。如何实现这种效果呢? 5 M) F+ G) D1 |
  可用层叠样式表(css)来实现的,在dreamweaver3中编辑层叠样式表不用编写代码,具体*作方法如下:
3 o& H5 U0 R$ P4 x0 H7 y; Y; k  1)在快速启动栏中点击层叠样式表按钮(就是把鼠标放上去显示"show css styles"的那个按钮),在弹出的css styles面板上双击(none);
% K2 _5 d! V- C* J+ }0 X* b  2)此时,可看到弹出的edit style sheet 面板,在该面板上按new按钮;
5 }, V/ N" k+ K  T0 c  3)再在弹出的new style 面板上点取redefine html tag(重新定义html标记)再在tag中选择"a"(超级链接标记)标记后按ok按钮;   x! B2 n& @2 k+ u" T
  4)这时可看到弹出的style dehinition for a 的对话框,在此对话框中可以设置超级链接的许多属性,你可以按你的意愿设置,但我们这里主要是要去掉那讨厌的下划线,所以我们在decoration 属性中选择"none",这样就把下划线去掉了;然后我们再选择颜色为:#339966。按ok按钮返回到edit style sheet 面板;
8 z+ c6 b" B/ _: ^8 n- E* j# D  5)在edit style sheet 面板上再按new按钮;
2 i( d. ]' E$ p% y; ^  6)在弹出的new style 面板上点取use css selector ,再在该面板上的selector选择框中选择"a:hover"(定义当鼠标在超级链接上时链接的属性),按ok按钮;
( w' j7 Y. z5 O/ j" G* i  b  7)在弹出的style dehinition for a:hover 的对话框中,我们在decoration 属性中选择"underline",这样就把下划线又加上了;然后我们再选择颜色为:#ff3300。按ok按钮返回到edit style sheet 面板;
4 y# k$ M$ M- G3 w/ l! W: }$ @. X  8)在edit style sheet 面板上再按don按钮,至此所有设置结束,你在dreamweaver3的源代码检视窗中将看到在与之间如下所示的代码:- z; y/ k1 J; @; b
  , s( }& f* R7 R9 j
  
3 P  Z; B0 w- I0 {( P- M- {( v4 P: B  
% z  @5 f6 i3 e1 H  有了这段代码,你在该网页上的所有文字链接在浏览器中显示时没有下划线,当你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。若你想在其它网页中也具有这种效果,你可以用上述方法设置或更简单点,直接把这段代码复制,粘贴到与之间即可。注意:若不是在a 中定义除去下划线而是在a: link中定义除去下划线,在实际使用时不能除去下划线
 楼主| 发表于 2005-1-3 14:02:04 | 显示全部楼层
在网页中实现细线边框的两种方法
1 ?& i# N& C+ E, P- \) h3 a$ a; g- h8 ?$ v7 e! V
很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。% F) m' U# e- Q1 s- B2 u! T. v& ~

% g: O7 x; m9 J% b  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。1 B% V. I$ y& U% W3 b) v! f/ t; p
  
% g, i3 H8 w$ a  如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表格中嵌套定义另外一个表格,背景设为全白,并且把Weight=100%。这时,两个表格是重叠的,但是,如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说,黑色的表格比白色的表格多出了一个像素的外围空间,而白色的表格又在黑色表格之上,从而达到细边框的效果。源代码如下:4 K) m/ ?, z( j3 U% U7 B

. ]+ W, _7 \, `0 ]  〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
1 \7 f. r9 s+ |. X" @7 d1 J8 A6 [1 o5 ~, z  B
   〈tr〉
/ y2 b  F! j" H: w# p
5 A' O! |" e- d$ r: m   〈td〉
) u0 |6 B$ s$ J3 T6 e9 H2 t% o& F2 T, T7 ]! b
   〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
$ Q  k0 y) ]  o3 d9 f7 `5 ~" e. m% \! i% B0 o
   〈tr〉 5 x7 Y! g/ u1 ]7 G

# a0 q' ]  b7 L, w0 h3 [  E/ t( Z   〈td〉% u" _8 W2 q: S7 F1 ]0 `8 j6 B8 Z

& A) r" T, B0 p   〈/td〉8 ~2 I) @+ n; @% {$ ?
( l. u$ w0 `: u- u
   〈/tr〉
* x) V, |& c. m5 R% A% t; U6 v0 C) N
   〈/table〉
# T, @* l: Y3 E3 ~) s9 \& o& A; b- D! M. g. w5 _1 o8 ^
   〈/td〉
) L3 H% P/ Z5 R1 R- f! N  W/ b/ |' j* ^" Q) T1 L, P: A5 c: l
   〈/tr〉
6 ~( k4 c% d0 h- M  K' [% P
7 I0 f: i+ l5 e( t/ F   〈/table〉
9 A& G0 H$ c1 l7 X8 G" i1 |
7 ]  a, I/ W$ e0 m  第二种比较简单,那就是用CSS(层叠样式表)强制定义,但是,有些比较老的浏览器不支持CSS,可能导致无法显示你所要求的效果。不过使用CSS定义,语句非常简洁,所作网页的容量也较小。它的*作方法是,在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER-postion: black 1px solid;",其中,Postion的参数有Left、Right、Top和Bottom,分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。! a" [. C4 u5 G$ i3 z9 `) h
2 @9 ?0 v5 g$ K
  源代码如下:
* l8 }/ X( Q  e% x5 l
" I4 ^* S9 h( ~6 L9 h) e2 t  〈table border="0" bgcolor=white〉, M1 b/ n0 ?- d/ }1 ]

* i, R! V' [2 Y/ N5 ^; F0 q   〈tr〉 1 @$ W/ u9 k1 k8 s1 W- K- T% c
+ ]! k" K! ^5 T$ n
   〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
" e' x5 i" y6 p9 @4 A+ r& L
7 P( g! i+ g; z   〈/td〉5 _; L1 R! x* U4 I; ], R* H

+ x" Z; \2 j# A; v- a   〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉: @0 h5 _' @( `/ l0 j  {) D1 z) |
, r" p) V4 b8 [  Q6 }5 j- ~4 f( X
   〈/td〉
1 K6 H) l8 `% w  X/ ~: m
$ q0 N) o9 b, b   〈/tr〉- w" p) {  {! Y" H" M9 J! L

' `! t, R) q# ]; f* t  K) z   〈tr〉
6 H/ O  W% X& h4 R8 F) A8 c! X+ F7 Z1 Z5 j
   〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉, H% r/ X" ?0 t- A0 N, @; K! k
1 h& x" m5 R) T* |
   〈/td〉1 O6 P0 g  X( c6 ?' Y% s
9 C$ [4 E6 g1 x" n
   〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
/ C# o* {9 C  ~! S' c+ j1 E0 q. l2 p# H* [7 {
" H7 {" b) A# u8 Z, ^
   〈/td〉
' Z8 P! s8 c; r# b
1 E) e/ [' ]0 w5 w: R   〈/tr〉- F4 Y/ j* z7 q! u( E
. ?/ d  \$ X( _1 n
  〈/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 | 显示全部楼层
这个是基础,很实用.不错!
回复 支持 反对

使用道具 举报

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

本版积分规则