网页常用代码

[复制链接]
查看: 597   回复: 8
发表于 2005-1-3 13:59:36 | 显示全部楼层 |阅读模式
简单的window.open方法
( J! l0 ]$ k! L  <a href="#" onclick="javascript:window.open(’文件路径/文件名’,5 E" d2 y$ }# N) S  W  X$ p3 }$ I
  ’listnote’,’toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,
0 L5 ?( K* F& G  width=350,height=300’);">文字或图片4 D& J) v2 F6 @& I: E& X% I
   0 O, X( P8 j2 s

5 ]$ d+ j+ p: J1 y* J* T) G图片随机替换
# d, p" g3 }% J1 A* Z, x# ^6 \( F  + L( r4 Z1 J5 X( Z
  document.write(’’)9 s8 N# c" q, M9 e2 [" p" |4 X
  
) o3 V) e/ w4 R  y) c  图片文件名为0.gif 1.gif 2.gif 3.gif 4.gif / {. ^; {& `. p2 Q
! l5 n$ q  g7 H) N/ L
设为首页
( Q* ^: x; Y4 ?  r+ q% H  <a href="#" onclick="this.style.behavior=’url(#default#homepage)’;  X! H$ v8 r2 F9 P6 b/ e
this.sethomepage(’http://cu1985.126.com’)" height="2">
& L+ ?% z: p' Y+ F+ B/ Z* s, `, W; o" ~
加入收藏
; m" r2 m3 U+ R7 Z' d  <a href="javascript:window.external.( c2 w2 @- |, P5 V
addfavorite(’http://www.wosay.net’, ’wosay中文网’)">
( r+ i1 D" s) ]8 w: x  I( \9 j5 D5 ^+ Z
忽视右键
6 g: {( ^& |1 G" g4 ~! b1 ~9 t  
% x& f6 X- |2 H9 _7 }( `: _  或
; z& p( {. N# ?' o; y( o  
7 t$ J& d0 X) x! D/ L2 ^0 N0 ^/ o7 \, ~8 O- \+ A+ \4 K  [
自动转页   
' N  e9 \& D, ?! W2 {  
& C+ W2 O+ N& u" w8 [) f+ _. L+ A5 B7 L. E
加入背景音乐 ; I  f: L$ l/ H2 y( T8 k- T6 J3 g
  ie:
3 A1 F$ Z$ {2 u) q0 \! j4 y% ^0 x  ns:0 ~; [9 d( w' D
  
5 [4 B! k/ \7 Q  *.mid你的背景音乐的midi格式文件
2 ]/ l7 ^. z- K
8 K3 n+ h! u2 D+ K3 p网页自动刷新  
  k7 `$ E8 ]4 J  J  在head部记入0 B2 F2 u0 ~( l- h0 a5 b) `
  3 _& `( w! v% ?0 g" ]
  其中20为20秒后自动刷新,你可以更改为任意值。 5 D$ w  j" H$ }, C1 {' j) Q* d- _& b
8 Z9 H4 i0 K1 U. d' ]7 o
拉动页面时背景图不动    & U0 S- W# _6 F5 r0 b; r: ^
  % f( s: p$ o5 K% b# S7 s' q9 l# t
  
) o7 b' P1 E" [* ?/ L$ y" W  body  {background-image:url(logo.gif);4 d1 r9 I2 {! ?. I4 {: U
    background-repeat:no-repeat; background-position:center }
: M& y# Z( E1 y  {+ K5 q5 O  
+ ?: A! a+ K& W+ b  R/ f  
. y2 ^# X$ D2 r5 u& L* U% B2 K  Z7 a7 o* j7 P
让浏览器在保存页面时保存失败       
! c* X% i' ]/ P( K  ' ^8 b, g: g2 }
  
' v$ e6 s1 q7 u/ E  q) F  
" q+ v  r: K- h& s! i   $ P. x1 e# _" ~0 e8 z; H
. b7 N# h/ \) `0 d% d/ Z; l4 M
在网页中,图片和表格接触的地方如何不留空隙?       + m8 Q, Y! k2 g% k
  要使图片和表格接触的地方不留空隙,仅在表格属性面板上把外框线(border)设为0是不行的,不仅仅只是表格外框,还有两个设置,即在表格的属性面板上还要把单元格的两个属性设为0(cellspacing="0" cellpadding="0")。
$ V# Z( R1 w& C( \' Y7 _/ P  K/ \% k3 a0 r2 V, K4 p6 B
如何把自己放在主页上的zip或其他文件让浏览者下载(down)? $ e' n" W( B  g" Q" t
  用dreamweaver3其实很简单,把要让浏览者下载的文件名写上,然后拖动鼠标选取这段文字,在文本的属性面板上"link"的属性输入框中写上文件名就行了。注意:若被下载的文件与该网页不在同一目录下,则文件名必须包含相对路径,否则到下载时将提示找不到文件。
6 ^. T, b/ G3 j3 V) [0 m% O$ C9 k7 F$ z) i
点击连接打开本地"我的电脑"等 ; V, w; F" E( C
  
& J  g6 D6 k/ U4 S# A<a href="file:///::{20d04fe0-3aea-1069-a2d8-08002b30309d}" target="_blank">我的电脑( c+ e9 f7 G8 ^/ k% U; k& N
  <a href="file:///::{208d2c60-3aea-1069-a2d7-08002b30309d}" target="_blank">网上邻居
! j- e0 f' [3 @* b  <a href="file:///::{645ff040-5081-101b-9f08-00aa002f954e}" target="_blank">回收站
0 ^4 a  k* z8 q! _8 f  <a href="file:///::{7007acc7-3202-11d1-aad2-00805fc1270e}" target="_blank">网络和拨号连接
9 M& t0 T  i5 B! l% V  <a href="file:///::{d20ea4e1-3957-11d2-a40b-0c5020524153}" target="_blank">管理工具
0 L; J. y- K% x8 L) @5 n  <a href="file:///::{2227a280-3aea-1069-a2de-08002b30309d}" target="_blank">打印机
  R& j& c- q& o- j! P, _  <a href="file:///::{d6277990-4c6a-11cf-8d87-00aa0060f5bf}" target="_blank">计划任务- d1 B' L$ Y  B7 y1 n0 t
  <a href="file:///::{d20ea4e1-3957-11d2-a40b-0c5020524152}" target="_blank">字体
% y# ^0 v. W6 v+ t% `- m9 B9 y+ w. p- T( u2 a. ]
简单的页面加密  
! u5 ]4 b5 N9 S2 K+ E; ]   <script language="javascript">7 C9 Q5 j9 \1 T! g3 U3 s9 q' B
  
2 g( L" h4 U1 N    9 H; R5 Y% o" B, H6 \( t, [  ^. W
0 _3 E5 {* n" B$ Q  e$ k
网页自动关闭       
8 I* w: g& U0 Y* y/ N   ' a) y; v: a+ u% m/ W& @7 U
  
( n# D6 s$ [9 H4 N) F  
( N) U1 \4 \3 C$ r7 `! T   3 ~4 C4 B) ]% k, \! {9 b# J: O, o
  
: k  G. z, A6 Y9 `" G7 f  
6 m( L2 v+ H' Z  Y5 y  
3 M$ Q* ^, _+ z8 ?" m   这个窗口会在10秒过后自动关闭,而且不会出现提示.
& I- r$ @1 X, x+ _+ E    ( `, G5 \# c- z6 L6 R

0 n0 C" J/ ]8 J- R保持layer在最前面,而不被iframe、object所覆盖   
/ `% o% y4 m2 h$ X5 v   在layer中再插iframe 或 object 设z-index值
, J/ v# ~4 t: i% {- Z! |# 前面4 b* y9 r0 ?0 r6 x
# 后面
" S- a8 f; @$ R5 t8 Z5 pheight=100% width=100%>
! w. i) o# ~: d6 P
' b' J6 ^& U: v9 S3 l5 t7 s$ @+ J' f6 z9 n( d

. ?% S$ B' c: X0 O
: w. R/ F. K9 d2 Y9 }3 [% s8 t5 f) {: n

' o( |% k% d" `! _1 \2 S0 D# K2 F- w6 N% U) x8 R
, ?) p  ^9 W6 |2 |

0 w( k& h6 J8 G2 m- X" \% u/ @3 j  ]( K% r1 S* I! z. h9 Z
/ O2 _$ |; k1 G% ~0 R) R3 |
改变滚动条颜色     + c/ B* V5 _0 `  V- ~+ m- N) C
   & H2 [0 A  ]7 j2 y) ]( `/ P4 n
   body {- ~9 T) a& D, \
scrollbar3dlightcolor: #ff0000; /*滚动条亮边的颜色 scrollbararrowcolor: #ff0000; /*上下按钮上三角箭头的颜色 scrollbarbasecolor: #ff0000; /*滚动条的基本颜色 scrollbardarkshadowcolor: #ff0000; /*滚动条强阴影的颜色 scrollbarfacecolor: #ff0000; /*滚动条凸出部分的颜色 scrollbarhighlightcolor: #ff0000; /*滚动条空白部分的颜色 scrollbarshadowcolor: #ff0000; /*立体滚动条阴影的颜色 scrollbartrackcolor: #ff0000 /*滚动条的背景颜色
) w$ [6 R' }+ p8 y, Y   }4 o& o- U' S! w# V
    0 E' M' u9 N" |( K  a
   说明:. O7 B% q( u# u& v
1、必须是ie5.5+8 w& L. r( A) Q
2、当页面内容超出屏幕出现移动条时,设置的箭头颜色才有效 5 X0 J& r6 l6 x/ a* E4 _' E& G
3、母页的设置对iframe窗口的滚动条颜色无效,但是对textarea文本筐的滚动条有效
) e) w1 t. [- s. m9 N; ~
' Y& W. T( h1 O/ R1 {" z7 U4 Q4 ~如何实现定义的超级链接文字颜色? ! `& ?9 W( d1 @# @  M$ |: H4 o
  许多文章和教程都介绍过文字超级链接的颜色(包括未被访问的链接颜色、鼠标的链接上的颜色、已被访问过的链接颜色等等)可以用层叠样式表(css)定义,但真正在网页中要实现颜色按自己的意愿变化还确实不容易。下面把一些注意事项告诉你,你就能随心所欲地设置文字链接的颜色了。 * g, y2 N; b' G
  1)超级链接的默认颜色是:未被访问的超级链接是蓝色、被访问过的超级链接是紫色;
, E- t; m4 w1 {& I' U  2)要想使css定义的颜色起作用,在超级链接的文本的颜色属性中什么都不要填; ; m3 Q4 b6 Y* P. g& X& ]5 O6 N
  3)若你已定义了文本的颜色,发现css中定义的超级链接颜色不起作用,你可以取消文本的颜色定义,或取消超级链接再重新定义一次,css定义的颜色就起作用了; 7 L2 q) A$ N/ k
  4)超级链接上各种状态下文本颜色的关系:一旦定义了被访问过的链接的颜色(a: visited),则当链接被访问过后,该链接的颜色不再改变,即定义鼠标在超级链接上的颜色(a: hover)将不起作用了。若不定义被访问过的链接的颜色(a: visited),则当鼠标在超级链接上显示a: hover 中定义的颜色,当鼠标移开时显示a 中定义的颜色。
1 s5 u! l& R* Q7 s; T   从上述可以看出,文本链接的颜色实际上只能在两种颜色之间变换,并没有象有些文章中讲的那样可以在多种颜色之间变换,但由于用那两种颜色可以任意,所以应该讲颜色的选择范围还是比较大的。
1 @* k9 p4 g( P
/ f: @% i" Z6 `' }' f有些网页的链接,原先没有下划线,你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。如何实现这种效果呢?
: Q, x3 d0 A0 G. }  可用层叠样式表(css)来实现的,在dreamweaver3中编辑层叠样式表不用编写代码,具体*作方法如下:
7 l$ a! @6 s9 A/ u  1)在快速启动栏中点击层叠样式表按钮(就是把鼠标放上去显示"show css styles"的那个按钮),在弹出的css styles面板上双击(none);
# B* q& N" }  E  2)此时,可看到弹出的edit style sheet 面板,在该面板上按new按钮; 0 m' s7 j7 S' w! _0 O" Q% W2 h
  3)再在弹出的new style 面板上点取redefine html tag(重新定义html标记)再在tag中选择"a"(超级链接标记)标记后按ok按钮; * `6 R" _7 T9 S3 c
  4)这时可看到弹出的style dehinition for a 的对话框,在此对话框中可以设置超级链接的许多属性,你可以按你的意愿设置,但我们这里主要是要去掉那讨厌的下划线,所以我们在decoration 属性中选择"none",这样就把下划线去掉了;然后我们再选择颜色为:#339966。按ok按钮返回到edit style sheet 面板; 6 n6 b3 U# _3 X" U4 `
  5)在edit style sheet 面板上再按new按钮; 3 W6 e  z" c+ [  v
  6)在弹出的new style 面板上点取use css selector ,再在该面板上的selector选择框中选择"a:hover"(定义当鼠标在超级链接上时链接的属性),按ok按钮; # p2 @/ o" C9 {  b+ s" z
  7)在弹出的style dehinition for a:hover 的对话框中,我们在decoration 属性中选择"underline",这样就把下划线又加上了;然后我们再选择颜色为:#ff3300。按ok按钮返回到edit style sheet 面板;
- m- ]9 d+ C6 e" G  8)在edit style sheet 面板上再按don按钮,至此所有设置结束,你在dreamweaver3的源代码检视窗中将看到在与之间如下所示的代码:
  O9 F4 Z) S$ B+ |2 Z+ m" w  
8 E8 G, \/ k% w0 M# W2 l  5 j0 k6 Q9 l& k4 u
  
! n+ a& \* C  ~& ^8 k' [5 k  有了这段代码,你在该网页上的所有文字链接在浏览器中显示时没有下划线,当你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。若你想在其它网页中也具有这种效果,你可以用上述方法设置或更简单点,直接把这段代码复制,粘贴到与之间即可。注意:若不是在a 中定义除去下划线而是在a: link中定义除去下划线,在实际使用时不能除去下划线
 楼主| 发表于 2005-1-3 14:02:04 | 显示全部楼层
在网页中实现细线边框的两种方法
4 @5 G$ c6 d1 c3 f" q
& o  u" j  k) v: a, `4 K/ H( L- j很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。
3 u* m" c) s+ Z0 m. f2 y0 C. d1 n3 [( m* k9 k7 s. Z8 z
  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。
  _9 O- X% M  z2 k4 O* c+ W   ' F" K2 x9 H# `$ G" s# G
  如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表格中嵌套定义另外一个表格,背景设为全白,并且把Weight=100%。这时,两个表格是重叠的,但是,如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说,黑色的表格比白色的表格多出了一个像素的外围空间,而白色的表格又在黑色表格之上,从而达到细边框的效果。源代码如下:5 H8 ]/ E$ a' e$ U

2 h& n# W' Q& B% G$ v  〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
/ h9 }* K9 i" v! E, R
/ R2 w3 U! H1 ?9 g7 {/ B   〈tr〉 # m% d; n( s. J( r6 S9 {
# ~% o. Q" T/ \4 M: u0 u4 n/ z. c
   〈td〉 ' \* I4 O1 U. j/ s
9 A& v. p2 @9 \/ y+ d3 A: L6 t
   〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉4 x/ K3 O6 b& ~6 G  C

7 U" ~4 N$ P. ?; r; u   〈tr〉 9 r% t( _8 d- j  p* O; e1 L
: T& \4 F) B# u7 q6 A
   〈td〉
$ P5 u8 `/ g: l+ P. s8 U( O7 L- l% [$ A
   〈/td〉
) X/ |6 `4 n8 n1 y# d5 E$ @
9 s* X% }9 F# B/ F   〈/tr〉3 j9 f& y9 `: W5 g
3 \& G& a1 Q7 _% M' `8 Z+ ]( j
   〈/table〉  h+ T4 ]6 N& ]

/ W: x! ]: Z  t4 F% L. J1 W   〈/td〉4 z# ]- V+ ?7 ]# Q
# H" j! Y# n. H8 _' r
   〈/tr〉% ]7 x% i9 B- ]0 ]5 n( c4 T
5 G3 X( P  u% x
   〈/table〉# s( Y$ D4 b2 L/ I/ D- y

' S  ^! {0 I+ q  第二种比较简单,那就是用CSS(层叠样式表)强制定义,但是,有些比较老的浏览器不支持CSS,可能导致无法显示你所要求的效果。不过使用CSS定义,语句非常简洁,所作网页的容量也较小。它的*作方法是,在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER-postion: black 1px solid;",其中,Postion的参数有Left、Right、Top和Bottom,分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
; B; X0 F1 A+ E% [  ]8 ]# t# q
, t5 z2 i- `  R1 R  源代码如下:
- x2 B  x- T" R: k( |5 Y* H
3 N% R" m% N" K& ?, M  〈table border="0" bgcolor=white〉9 y  j: R: D2 R8 z
9 H* |, Y* m% |- ^5 r- u6 J+ C% @
   〈tr〉 . w1 z8 C3 M( a* c8 ]( {/ v8 t

& C) H. j- L' V' l   〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
8 b9 @1 K8 [% j( H' \( n/ Y/ w
5 L5 u1 V$ N' A: M   〈/td〉- z7 q' K/ W+ d) u9 L( s
5 Q. h$ m; a3 X, e$ s( b6 i* \- ?
   〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
. B! W5 J. B6 ]' H# G9 T" m* h( s/ X; G- I* r7 A  f# C
   〈/td〉# k# ^6 O; I2 }6 e$ h2 _( \

2 b8 w3 {0 D6 e* l+ a   〈/tr〉# u( ~$ I- M* X/ y+ m* Y- ], l6 j
! V+ d0 P3 h7 a9 v7 N0 |
   〈tr〉
" k; j: L( e/ [: U6 @
% P$ ?: K) `; P. J; ?   〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉  @9 b# A- X6 f" ~

" K8 G. f: Q* Q3 `" s   〈/td〉
& \" `) S7 ~4 Y6 d5 n+ P: k+ S7 N) J
   〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉6 e  v2 \& e* a: W: q' i" a; F4 @2 v
0 L% E" H) i3 R$ e$ W
6 W4 J. t+ K: c( ~
   〈/td〉. A/ T6 r! f" n; l7 @8 m
3 w, s. `' A) U* [5 Z0 _% l# J
   〈/tr〉
0 }1 m# p! h  t
8 C: ]  a4 M# |& D  〈/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 | 显示全部楼层
这个是基础,很实用.不错!
回复 支持 反对

使用道具 举报

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

本版积分规则