网页常用代码

[复制链接]
查看: 687   回复: 8
发表于 2005-1-3 13:59:36 | 显示全部楼层 |阅读模式
简单的window.open方法
6 _! Z3 |( _2 {7 ^  e  <a href="#" onclick="javascript:window.open(’文件路径/文件名’,
2 r5 X6 i7 E: @# R  ’listnote’,’toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,7 u3 A' u, s8 r8 J1 X2 C; ?' z
  width=350,height=300’);">文字或图片
) ]4 l1 f! R6 r5 U+ U$ ~5 i   4 q4 v5 D) I. h3 S; W5 p
# d9 _: i, U8 ?
图片随机替换 7 w1 r0 ?9 r/ k
  3 ]. m3 N/ A# h" D! Y' k
  document.write(’’), Z$ `. s: ]) b/ `  ^
  
7 n6 f$ l' w7 M) O6 v  图片文件名为0.gif 1.gif 2.gif 3.gif 4.gif
  O3 e# W" `* J( B1 O
$ i1 ]/ u+ l2 H. s* ~& ]  Z设为首页
* V/ b3 t/ {$ T" d) a  <a href="#" onclick="this.style.behavior=’url(#default#homepage)’;
6 K5 T# j7 Q& _8 cthis.sethomepage(’http://cu1985.126.com’)" height="2">
8 Y3 T$ T  j' A" V
2 k% N5 F4 q1 Y( B; ?3 X. U7 i加入收藏 % u6 g2 J8 |# L9 V4 ^8 u9 o) V* a
  <a href="javascript:window.external.
+ _. Q6 h! ?# R3 `1 ^( faddfavorite(’http://www.wosay.net’, ’wosay中文网’)"> $ ~: L$ V  f9 W" ^1 z: a' o

8 ^' ~. I- k  H0 G0 X忽视右键 % V3 }" J" L- ^# z+ r# e
  # L! M' z# f4 o7 Y0 ^* Y
  或+ s8 v7 u  l- D: }! }, i: P
   5 ]: G" `3 l% ^+ ?* {- P* J

2 L7 R" w' Y+ {9 d: F# X自动转页   
- a! a; e' L8 l8 ]' B9 B2 [3 {  
% F9 O: Y% A1 D2 F; U: G5 z! M* g0 g4 T& A
加入背景音乐 ( W6 O. Y/ F; X
  ie:6 A3 {, L: J" _* Q2 q
  ns:" k0 T( X1 r$ D. J. F% ?/ x' m
  
8 P. k) V% i; }0 |! u  *.mid你的背景音乐的midi格式文件
7 M% p& q* \4 J) j5 N
$ _7 E+ @1 N; D网页自动刷新  
: }5 O4 R9 l; s; X* T7 _  在head部记入, K6 G$ A$ z1 x  o
  1 t5 P% O  C/ f3 b+ o" l
  其中20为20秒后自动刷新,你可以更改为任意值。 8 P' W  r2 e# z, s
; y, _8 W0 e4 X2 ?
拉动页面时背景图不动    ' ^+ r- }0 r* G) k8 i# {; o
  
5 N+ P# N) t* }  : K  G' q+ X( E/ \  R4 o$ x
  body  {background-image:url(logo.gif);
& n2 q  M& p9 D" w+ g1 Q9 g    background-repeat:no-repeat; background-position:center }
/ l+ s- {9 B# q: w& r  
6 P! x8 k/ _' ~$ d3 _! U* t  
# M; Q; q, b' ?  {  e4 f3 W1 O5 z5 W3 T2 f3 D9 j5 f1 N, H# d9 u
让浏览器在保存页面时保存失败       ( b- O# G  H8 n& d7 Z+ w4 H
  
" J$ \) `+ ^0 w- a( ]  
) P2 q. P. c9 b  
, V& w" U1 N3 Q6 x7 k+ l  
6 @2 `2 `2 f" S  C& V8 p. Q! z& X- w4 \. T: Y7 b, v
在网页中,图片和表格接触的地方如何不留空隙?       
/ N: ?8 v4 Q4 G: S! U4 k  \- G% m' ^  要使图片和表格接触的地方不留空隙,仅在表格属性面板上把外框线(border)设为0是不行的,不仅仅只是表格外框,还有两个设置,即在表格的属性面板上还要把单元格的两个属性设为0(cellspacing="0" cellpadding="0")。
/ i  h  a( M$ X3 H3 J0 a) S9 _1 l
如何把自己放在主页上的zip或其他文件让浏览者下载(down)?
( {1 e; i: Q0 B3 \/ C  用dreamweaver3其实很简单,把要让浏览者下载的文件名写上,然后拖动鼠标选取这段文字,在文本的属性面板上"link"的属性输入框中写上文件名就行了。注意:若被下载的文件与该网页不在同一目录下,则文件名必须包含相对路径,否则到下载时将提示找不到文件。 # {( _; l! T) K  X1 E) D. ]; Y

+ f0 G  O+ E- R$ q3 r, W点击连接打开本地"我的电脑"等 & h' r/ O! P7 v, ~# d
  
* \* \: R5 c. o4 W2 M<a href="file:///::{20d04fe0-3aea-1069-a2d8-08002b30309d}" target="_blank">我的电脑2 d- y7 e9 m) g8 o- g) J
  <a href="file:///::{208d2c60-3aea-1069-a2d7-08002b30309d}" target="_blank">网上邻居
7 C! g; c% o! }  <a href="file:///::{645ff040-5081-101b-9f08-00aa002f954e}" target="_blank">回收站4 P$ e" [- ^) K" {( a8 ?3 t5 v0 b
  <a href="file:///::{7007acc7-3202-11d1-aad2-00805fc1270e}" target="_blank">网络和拨号连接
5 a4 k1 {2 W$ |* P6 ^4 j  <a href="file:///::{d20ea4e1-3957-11d2-a40b-0c5020524153}" target="_blank">管理工具
9 }# l) k, {) R/ h" S  }4 e8 s- n  <a href="file:///::{2227a280-3aea-1069-a2de-08002b30309d}" target="_blank">打印机. `! C1 {: J) j* x- S* d6 _
  <a href="file:///::{d6277990-4c6a-11cf-8d87-00aa0060f5bf}" target="_blank">计划任务
. O8 w  z- K: V8 t% e  z2 b! }- l  <a href="file:///::{d20ea4e1-3957-11d2-a40b-0c5020524152}" target="_blank">字体# L' I/ U" A' o
8 p0 l. ?, o: \; v" G' y
简单的页面加密  
3 t3 u9 j& w- X9 ]* m0 \   <script language="javascript">- O" J$ f% k$ H6 d" m* i3 i
   % \+ `; B: l/ n; z7 l
    - H$ p1 o+ |: N* b( a: g8 ?6 j4 _
, i, Q0 W3 r4 B, B" f. [5 T
网页自动关闭       
1 C1 S; |7 u0 S& ?. |2 f   - \4 E9 v2 p+ b0 S7 s
   % B4 l. p6 f% H6 H# F8 R% j
     ]) n' }0 l, x, D7 B7 U8 v
   6 Z( i( K# W. e9 i
   4 C3 }* p- h: V) h+ F$ g) z
  
8 l, k# A: F9 _  
5 ~4 l$ Z( b' M- q   这个窗口会在10秒过后自动关闭,而且不会出现提示.
) a7 I- N! l" B( ?6 w      D' c. ?# X2 Z
' T" _0 I# S! g/ M# H
保持layer在最前面,而不被iframe、object所覆盖   - K1 Q/ O) a: I  e2 X8 S
   在layer中再插iframe 或 object 设z-index值
0 h+ X8 w& A  S( g# 前面6 e: r' L4 C6 J  q8 G& J; @! h" f
# 后面
- h' G% P8 y5 i( E. Zheight=100% width=100%>8 P7 U9 q( g- l4 {% o  |: d

3 ]6 _1 H1 j) u8 |( z$ B) C6 B; Y. h
5 ~$ \: {  O% ^; Q: Y9 q! n9 I' _/ Z5 @4 b8 e9 U* M5 ^0 r
2 I% t+ e' e# w0 @
3 \" Q! p3 }6 ^, ]

, x8 {$ d6 G1 ?6 z
% b' r' q% W8 x0 Y8 z: g
- G: O  n* {0 [6 u7 {9 k7 B7 G6 W/ l8 x, G8 v+ n
6 |8 Q9 V. |+ H+ C& [& C7 C$ f

( L# M$ ~0 c% V8 h2 W8 x6 @" A改变滚动条颜色     
1 x# s7 \5 P. [0 n$ k2 S   + A  Y% {) H& D% z9 k$ A
   body {
8 r# A! u% E6 D$ m3 L$ Yscrollbar3dlightcolor: #ff0000; /*滚动条亮边的颜色 scrollbararrowcolor: #ff0000; /*上下按钮上三角箭头的颜色 scrollbarbasecolor: #ff0000; /*滚动条的基本颜色 scrollbardarkshadowcolor: #ff0000; /*滚动条强阴影的颜色 scrollbarfacecolor: #ff0000; /*滚动条凸出部分的颜色 scrollbarhighlightcolor: #ff0000; /*滚动条空白部分的颜色 scrollbarshadowcolor: #ff0000; /*立体滚动条阴影的颜色 scrollbartrackcolor: #ff0000 /*滚动条的背景颜色4 R6 I5 q; B  v2 S
   }
% ]$ l/ @* h# X1 E, U    6 r5 K/ w% l  W$ Z7 @, l9 R, k
   说明:; N1 R7 ~( m" f! n: e
1、必须是ie5.5+! D/ f4 L! {( R
2、当页面内容超出屏幕出现移动条时,设置的箭头颜色才有效
; \: K: s2 ^4 ^/ R3、母页的设置对iframe窗口的滚动条颜色无效,但是对textarea文本筐的滚动条有效: m8 ?, @% s  J$ w& z

% y3 b4 ^  P% W: H4 Q7 L如何实现定义的超级链接文字颜色? 0 l9 R* Q1 n  n  y2 R/ U+ _
  许多文章和教程都介绍过文字超级链接的颜色(包括未被访问的链接颜色、鼠标的链接上的颜色、已被访问过的链接颜色等等)可以用层叠样式表(css)定义,但真正在网页中要实现颜色按自己的意愿变化还确实不容易。下面把一些注意事项告诉你,你就能随心所欲地设置文字链接的颜色了。
7 B5 _" ?' L3 H' Q$ H9 I  1)超级链接的默认颜色是:未被访问的超级链接是蓝色、被访问过的超级链接是紫色;
) C! _/ y/ V) k  I) v9 y; D  2)要想使css定义的颜色起作用,在超级链接的文本的颜色属性中什么都不要填; 4 O& g2 {% U; x% B) g7 J$ j
  3)若你已定义了文本的颜色,发现css中定义的超级链接颜色不起作用,你可以取消文本的颜色定义,或取消超级链接再重新定义一次,css定义的颜色就起作用了;
" b. @: o+ i  [) K" g. ]# Z  4)超级链接上各种状态下文本颜色的关系:一旦定义了被访问过的链接的颜色(a: visited),则当链接被访问过后,该链接的颜色不再改变,即定义鼠标在超级链接上的颜色(a: hover)将不起作用了。若不定义被访问过的链接的颜色(a: visited),则当鼠标在超级链接上显示a: hover 中定义的颜色,当鼠标移开时显示a 中定义的颜色。
9 F9 p# x% t1 B) F! E& M  A   从上述可以看出,文本链接的颜色实际上只能在两种颜色之间变换,并没有象有些文章中讲的那样可以在多种颜色之间变换,但由于用那两种颜色可以任意,所以应该讲颜色的选择范围还是比较大的。 ; w: @% w- @8 v. z
3 r1 X. t( J* \' n
有些网页的链接,原先没有下划线,你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。如何实现这种效果呢?
/ r; W. j/ C* o) c) B  可用层叠样式表(css)来实现的,在dreamweaver3中编辑层叠样式表不用编写代码,具体*作方法如下:
' l9 q  n: N) V3 [  D/ n  1)在快速启动栏中点击层叠样式表按钮(就是把鼠标放上去显示"show css styles"的那个按钮),在弹出的css styles面板上双击(none); * U( Q: P% f5 q4 c
  2)此时,可看到弹出的edit style sheet 面板,在该面板上按new按钮;
! u6 U5 v" ~  _+ S" ^& }3 e  3)再在弹出的new style 面板上点取redefine html tag(重新定义html标记)再在tag中选择"a"(超级链接标记)标记后按ok按钮;   v) k8 D9 `; i) X  x
  4)这时可看到弹出的style dehinition for a 的对话框,在此对话框中可以设置超级链接的许多属性,你可以按你的意愿设置,但我们这里主要是要去掉那讨厌的下划线,所以我们在decoration 属性中选择"none",这样就把下划线去掉了;然后我们再选择颜色为:#339966。按ok按钮返回到edit style sheet 面板; 4 l3 M4 r  A0 _/ D9 ^0 f7 c2 Y
  5)在edit style sheet 面板上再按new按钮; , N* r: f8 N% {: L) F6 c; h
  6)在弹出的new style 面板上点取use css selector ,再在该面板上的selector选择框中选择"a:hover"(定义当鼠标在超级链接上时链接的属性),按ok按钮;
3 d% @2 X! X8 N& ^7 A4 z  7)在弹出的style dehinition for a:hover 的对话框中,我们在decoration 属性中选择"underline",这样就把下划线又加上了;然后我们再选择颜色为:#ff3300。按ok按钮返回到edit style sheet 面板;
; a3 R& m! C8 F' [  8)在edit style sheet 面板上再按don按钮,至此所有设置结束,你在dreamweaver3的源代码检视窗中将看到在与之间如下所示的代码:, m+ M- c; ?; f+ t, {
  
7 O$ l( f/ z5 M% e8 ~; A0 t$ V  4 w: M4 n3 x( ?( a; J! F6 s
   6 R( r+ K) I6 H
  有了这段代码,你在该网页上的所有文字链接在浏览器中显示时没有下划线,当你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。若你想在其它网页中也具有这种效果,你可以用上述方法设置或更简单点,直接把这段代码复制,粘贴到与之间即可。注意:若不是在a 中定义除去下划线而是在a: link中定义除去下划线,在实际使用时不能除去下划线
 楼主| 发表于 2005-1-3 14:02:04 | 显示全部楼层
在网页中实现细线边框的两种方法% n5 T3 a- Y* u5 ~* j3 L

0 A, h0 p3 W! l+ y很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。* t! x# y! Y  ]* q& \7 O; f
, v; S$ W. ^; B9 }% C6 H9 M
  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。2 t4 E- [) k( h+ k% x9 ^; Y
   ; [$ M1 \% X9 X1 p
  如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表格中嵌套定义另外一个表格,背景设为全白,并且把Weight=100%。这时,两个表格是重叠的,但是,如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说,黑色的表格比白色的表格多出了一个像素的外围空间,而白色的表格又在黑色表格之上,从而达到细边框的效果。源代码如下:5 C# T6 D# z( ^9 W
+ t9 J  r, e, p, x3 X
  〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
7 t" l/ Z' k* c  d. h
' K1 T( W1 ^2 q  `- ~4 i  P! \   〈tr〉 ' b9 ^9 x( Q  o8 E

5 x2 [6 T' ^" o1 b) e/ S   〈td〉
6 o% Q: _% u; s
  ]) Q3 I, x9 H: U; D* c# e& V! m5 P- W) m   〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
  V# X! m( f. h8 h# ~) Y# d. }7 s8 u/ _  O+ t9 w. i5 H/ v
   〈tr〉
0 Z$ U) b" f) x+ b$ C" I5 Y
9 t4 i- H% A: F1 X   〈td〉/ ^' n- d( F  u: F: h7 ^
9 i8 k+ }- x# G/ }! H3 Y
   〈/td〉7 F2 {% Y* r% B$ l" b" F1 @. a- @

$ ^; S$ V+ y8 h: ?1 H1 ]   〈/tr〉
9 k3 M% b' }4 n8 D2 W% v* e7 X% ]0 p6 A+ p* [& l( J# B0 O6 w
   〈/table〉3 l: d/ b: a4 x
+ p& _( b1 @5 X( l6 X
   〈/td〉* q# u8 ]' q* n" I2 U. P2 g

  w, x( \7 t; y  J. \   〈/tr〉
. D2 U9 X5 r. [" \; q7 W. Z
8 G! w& y+ V' N( B5 F   〈/table〉
6 e& R$ n& e' C9 s$ d2 c
# T3 ?3 _' \: v; `8 X3 E' ?  第二种比较简单,那就是用CSS(层叠样式表)强制定义,但是,有些比较老的浏览器不支持CSS,可能导致无法显示你所要求的效果。不过使用CSS定义,语句非常简洁,所作网页的容量也较小。它的*作方法是,在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER-postion: black 1px solid;",其中,Postion的参数有Left、Right、Top和Bottom,分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。( b! ~8 i4 ?5 C/ w* }: }! Z" w+ U: G4 S
: X; c6 O, G0 N  ?: Z, k& B
  源代码如下:2 r4 X7 G3 Y! l: s: h3 t

1 h3 V0 y, c) ?/ C; V  〈table border="0" bgcolor=white〉
" t' w, Y) o5 N/ _5 }% k$ S1 E7 v
   〈tr〉
. x2 F" c" S  U+ n3 _0 A
7 |* E" m0 Q, R   〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
9 z+ r8 A, ~; `+ Q# W+ A9 I
, z( J( ]& y+ e* t  Q% F   〈/td〉
/ R: L( `1 }% i/ N. ]9 |& r8 l5 m# p
   〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
8 m4 \9 }% Z7 q7 }* h
9 `7 k1 G" K0 e2 h" M5 b; o   〈/td〉4 x& o& }# a0 Z! N0 e

5 l. D' r7 j# c8 _   〈/tr〉
& d. K: `6 d+ z4 U+ `) E
7 J% Q8 Y7 U# P   〈tr〉
. V% j& ~6 C& G8 Z/ x' U* B8 `$ O# ]9 b2 \. M
   〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
5 f/ v% P% m+ [& b8 ^
$ ?; j7 G, ]$ ]   〈/td〉7 M) t! f+ E' W$ ?3 X

$ O& L' b5 @( j4 S0 U   〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉4 k: }0 e' [: m* f
1 P% ]  @3 ]* Q

8 X" |' Z" O0 S6 Y2 V   〈/td〉
9 m5 |  u9 p. g1 H- a+ @) C) ]+ _) T8 _& z& r4 U. P7 w) j; y
   〈/tr〉/ H" v4 A/ H# [
" H+ B, k4 j1 f* _) ^  o7 f0 `4 S" x
  〈/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 | 显示全部楼层
这个是基础,很实用.不错!
回复 支持 反对

使用道具 举报

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

本版积分规则