查看: 193|回复: 8

网页常用代码

[复制链接]
发表于 2005-1-3 13:59:36 | 显示全部楼层 |阅读模式
简单的window.open方法
5 |" M8 z4 u- c. ~$ e: O' Y  <a href="#" onclick="javascript:window.open(’文件路径/文件名’,
. ^& z0 ^* X! q( p- C- O% N  ’listnote’,’toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,5 G; S3 Y% G9 x+ U8 B, H
  width=350,height=300’);">文字或图片3 H0 P, ^, f: S: Y* a4 U
   * @  g$ b1 @1 u8 R% q0 i
( x( }, Y; v' [4 \# P
图片随机替换
, H3 Y3 Y/ `& @# t  ^7 m  
  C7 q7 k, N0 Y% c+ {; T$ _  document.write(’’)
% A7 @0 d: c3 \7 ]  
$ J- u/ _+ p6 P3 h; j  图片文件名为0.gif 1.gif 2.gif 3.gif 4.gif
; l( U- H1 Y% S, n8 M( M/ E/ {- {! v; f3 K
设为首页 4 e& X: K, m& n, r2 O+ C# b5 G
  <a href="#" onclick="this.style.behavior=’url(#default#homepage)’;( _% K) q: h, r& n3 c" W) K
this.sethomepage(’http://cu1985.126.com’)" height="2">
& ?: ~# @* }  p, R# Y; ?% P* [: @: d" S) U; K& m" X% h
加入收藏 - y" |$ o3 [; U( p; x
  <a href="javascript:window.external.3 S% D, N  x" N
addfavorite(’http://www.wosay.net’, ’wosay中文网’)">
) r) @! L7 ?" M4 i3 ]+ v: n# s8 `! r: V2 w- C6 I
忽视右键
: d4 C4 @0 M# G0 g  
9 J# C- A- h" A% L7 L, j  e/ C  或
  X) F+ q- b; p7 k5 Q5 `  
! R5 T0 `, @; w; H. u/ B* k
4 q4 q6 h( V9 D+ G6 q自动转页   
5 E, i4 P/ S7 K3 t% b   ( S. n  s5 M/ v1 |
, |' m' ^( b' O* S9 ~
加入背景音乐
  O1 m  L1 e9 X! c3 M5 U  ie:
+ m7 }$ ]& J5 o4 \& J; O  ns:
+ ]  P3 v+ k- U: j# E% G( b$ z5 o7 l  
, i+ P  R' L3 p: o  *.mid你的背景音乐的midi格式文件 ) J% _% I. ]' Z* u$ X+ o. |

" x! W# N% D* C. B, H网页自动刷新  
4 @8 n: l) z. f  在head部记入+ p+ c2 ~/ ]1 @. T" V. _
  6 W. g; [8 i0 P/ d
  其中20为20秒后自动刷新,你可以更改为任意值。 0 c. \0 d6 Y! M/ \0 y/ E" [1 _
& f" z# ~  {7 U! @4 k8 q
拉动页面时背景图不动    # ]0 I0 _' h0 c( z' Z* _0 j
  8 N  l8 O/ _' r4 Y
  
) D- |( j  y- {7 b1 D( \( f( ]  body  {background-image:url(logo.gif);# r  C6 u( ^8 ?
    background-repeat:no-repeat; background-position:center }) b: W; k( d' |. q1 R
  
" p$ ~+ c- K" L* D+ O  
& }: _( b0 }, c" b) W8 ?8 e0 z# {7 Y; D) `/ H1 u9 {
让浏览器在保存页面时保存失败       
0 N: X$ K# i- n4 P% A  0 o- D) J( w8 Q* o- X8 L; g+ c0 A
  
8 T' R7 P# g: f4 T; I. |6 T    ~& F% a  t) T/ B& y
  
( O  n, K6 b7 F8 \1 r; E& N5 Q+ X) l' F+ z; x( x* C
在网页中,图片和表格接触的地方如何不留空隙?       
  a8 [+ X. D0 @  要使图片和表格接触的地方不留空隙,仅在表格属性面板上把外框线(border)设为0是不行的,不仅仅只是表格外框,还有两个设置,即在表格的属性面板上还要把单元格的两个属性设为0(cellspacing="0" cellpadding="0")。
7 U& Y8 Y) s- d; @/ h' @; e0 o
0 H: V5 h6 W# ]# F, M如何把自己放在主页上的zip或其他文件让浏览者下载(down)? 2 T, l1 z2 Z# n/ U& k$ n) }
  用dreamweaver3其实很简单,把要让浏览者下载的文件名写上,然后拖动鼠标选取这段文字,在文本的属性面板上"link"的属性输入框中写上文件名就行了。注意:若被下载的文件与该网页不在同一目录下,则文件名必须包含相对路径,否则到下载时将提示找不到文件。 # s6 d% y, n% j& P. T+ {

$ T0 K' g, Q7 B- O# U# E点击连接打开本地"我的电脑"等
7 T! \) X3 [" o& m1 p) o  
% F" }8 y; [* z. i<a href="file:///::{20d04fe0-3aea-1069-a2d8-08002b30309d}" target="_blank">我的电脑
# u# q- H3 Y1 m9 D: @- T" b; ?  <a href="file:///::{208d2c60-3aea-1069-a2d7-08002b30309d}" target="_blank">网上邻居) v7 q2 q( ^/ g8 g) a2 x8 L; ~
  <a href="file:///::{645ff040-5081-101b-9f08-00aa002f954e}" target="_blank">回收站) r+ n* ~/ Q5 `) a3 f" F& f- Q/ F. P
  <a href="file:///::{7007acc7-3202-11d1-aad2-00805fc1270e}" target="_blank">网络和拨号连接
/ s! R- ?8 v8 C  <a href="file:///::{d20ea4e1-3957-11d2-a40b-0c5020524153}" target="_blank">管理工具# w/ j6 y+ I( y2 I3 N4 q
  <a href="file:///::{2227a280-3aea-1069-a2de-08002b30309d}" target="_blank">打印机
3 [* F% v3 k3 v4 K& K  <a href="file:///::{d6277990-4c6a-11cf-8d87-00aa0060f5bf}" target="_blank">计划任务
& n  U; [& l# h  <a href="file:///::{d20ea4e1-3957-11d2-a40b-0c5020524152}" target="_blank">字体
3 `* k8 X9 Q6 o
5 h  J9 a# D, @4 @+ x. A% G* }简单的页面加密  
3 g5 ?0 l! x* J9 D  ]+ d7 o   <script language="javascript">
/ y& R% E* ]  Z! _: y8 N   3 C7 F2 x: q+ w$ f  s* N
    
# G# y4 R2 O6 ^3 j6 V; O! d3 T9 Y
' {; J' m, D1 X4 s4 u) d7 X$ A4 V网页自动关闭       ) j: p) N, y- J$ l( C
  
5 t  Y: R" H8 G: H& Y$ |9 _  
# t7 o. `" r  r# `& o  
" _1 @# o! F) @8 J6 O8 k   . S$ {2 ^! f$ x7 e3 S
   - j" R/ k( b* m/ s9 A8 d; ^% B
  
2 j# k7 A1 @4 n, ]) U. l  
3 e0 [/ L- x$ s3 _2 p   这个窗口会在10秒过后自动关闭,而且不会出现提示.. R* A! M0 W/ n; P% p. {& d, t
    5 j: N. @8 f5 A* O
# j: B: }( s  V5 H
保持layer在最前面,而不被iframe、object所覆盖   
8 {9 ?8 ~% Y& C  y1 }   在layer中再插iframe 或 object 设z-index值  t" n9 O7 d9 [
# 前面
9 s% q+ t" k- V: r1 g1 }' J# 后面2 K3 q* o" Y4 _
height=100% width=100%>% R8 K$ P) @( o( ^6 a/ R4 D

& X* z0 `6 ]) y9 q' o0 C/ U; Y% O/ r# f0 p$ P
* d6 `7 P0 `! _) y7 P6 u; {
* j) y6 X- M" F; T  d
* O4 v  R; B4 z1 |4 k! p
( }! O1 Q2 Z$ g

6 ~- m0 t" r1 [2 r: M* m1 r: S8 J; N4 K  D
, x4 q4 @4 T1 ~9 O

0 V; D  x$ m. E! F+ u0 ~
" T6 T% H& G2 x9 `. h改变滚动条颜色     3 U8 Q. I/ A" L
   : r" ~0 o" A) p/ I+ a
   body {
# Q* k5 B/ n+ s: i4 f, }  Tscrollbar3dlightcolor: #ff0000; /*滚动条亮边的颜色 scrollbararrowcolor: #ff0000; /*上下按钮上三角箭头的颜色 scrollbarbasecolor: #ff0000; /*滚动条的基本颜色 scrollbardarkshadowcolor: #ff0000; /*滚动条强阴影的颜色 scrollbarfacecolor: #ff0000; /*滚动条凸出部分的颜色 scrollbarhighlightcolor: #ff0000; /*滚动条空白部分的颜色 scrollbarshadowcolor: #ff0000; /*立体滚动条阴影的颜色 scrollbartrackcolor: #ff0000 /*滚动条的背景颜色
( Y; B; j$ N8 i/ V/ }7 b   }/ x3 \. ?4 V9 Y( u/ |& Y
    
5 Z  j; R: j8 c  }' s2 s   说明:' ?( q% _# B8 z7 E
1、必须是ie5.5+& P- g9 r8 F; B# l/ N
2、当页面内容超出屏幕出现移动条时,设置的箭头颜色才有效 1 I& q& A) b) K1 @) b$ Q: N3 t: ^5 h
3、母页的设置对iframe窗口的滚动条颜色无效,但是对textarea文本筐的滚动条有效
# a- U% q6 n" e0 B1 k: W' r. T  x2 ?
如何实现定义的超级链接文字颜色? . O3 i$ {5 {2 j, J+ N
  许多文章和教程都介绍过文字超级链接的颜色(包括未被访问的链接颜色、鼠标的链接上的颜色、已被访问过的链接颜色等等)可以用层叠样式表(css)定义,但真正在网页中要实现颜色按自己的意愿变化还确实不容易。下面把一些注意事项告诉你,你就能随心所欲地设置文字链接的颜色了。
" X! s' d& Z7 E& D. k3 q  1)超级链接的默认颜色是:未被访问的超级链接是蓝色、被访问过的超级链接是紫色;
0 U( x9 R+ m. g4 I  2)要想使css定义的颜色起作用,在超级链接的文本的颜色属性中什么都不要填;
, |/ R1 H# Z0 W  G, X" H* O  3)若你已定义了文本的颜色,发现css中定义的超级链接颜色不起作用,你可以取消文本的颜色定义,或取消超级链接再重新定义一次,css定义的颜色就起作用了; 0 A( ?3 a% p1 o; L6 m
  4)超级链接上各种状态下文本颜色的关系:一旦定义了被访问过的链接的颜色(a: visited),则当链接被访问过后,该链接的颜色不再改变,即定义鼠标在超级链接上的颜色(a: hover)将不起作用了。若不定义被访问过的链接的颜色(a: visited),则当鼠标在超级链接上显示a: hover 中定义的颜色,当鼠标移开时显示a 中定义的颜色。 : |/ W+ T" f# X0 ~' ]* E7 a3 m
   从上述可以看出,文本链接的颜色实际上只能在两种颜色之间变换,并没有象有些文章中讲的那样可以在多种颜色之间变换,但由于用那两种颜色可以任意,所以应该讲颜色的选择范围还是比较大的。 1 a; _; ^. g) M& j$ A
( \) r( j5 P) c7 P5 p
有些网页的链接,原先没有下划线,你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。如何实现这种效果呢?
! ]$ t4 o4 M7 h% G  U7 p  可用层叠样式表(css)来实现的,在dreamweaver3中编辑层叠样式表不用编写代码,具体*作方法如下:
6 S. e% t  ]! i0 c% N8 N  1)在快速启动栏中点击层叠样式表按钮(就是把鼠标放上去显示"show css styles"的那个按钮),在弹出的css styles面板上双击(none);
2 K; r( i: Q( `  l  2)此时,可看到弹出的edit style sheet 面板,在该面板上按new按钮;
" k$ G& q" c1 V7 w* ^0 z; E! D, q, e  3)再在弹出的new style 面板上点取redefine html tag(重新定义html标记)再在tag中选择"a"(超级链接标记)标记后按ok按钮; % J3 S1 U$ U- L0 O; s$ C  Z, C
  4)这时可看到弹出的style dehinition for a 的对话框,在此对话框中可以设置超级链接的许多属性,你可以按你的意愿设置,但我们这里主要是要去掉那讨厌的下划线,所以我们在decoration 属性中选择"none",这样就把下划线去掉了;然后我们再选择颜色为:#339966。按ok按钮返回到edit style sheet 面板;
# N6 H2 v+ Z7 G. j( p  5)在edit style sheet 面板上再按new按钮; 5 t6 S4 O: h- s0 X  E
  6)在弹出的new style 面板上点取use css selector ,再在该面板上的selector选择框中选择"a:hover"(定义当鼠标在超级链接上时链接的属性),按ok按钮; + C, n9 n- h+ }% t
  7)在弹出的style dehinition for a:hover 的对话框中,我们在decoration 属性中选择"underline",这样就把下划线又加上了;然后我们再选择颜色为:#ff3300。按ok按钮返回到edit style sheet 面板;
" I, V) Z( ~& ~7 `4 G% G  8)在edit style sheet 面板上再按don按钮,至此所有设置结束,你在dreamweaver3的源代码检视窗中将看到在与之间如下所示的代码:
9 Q/ m: C( A6 E; Q$ P, K; ^& |* V  3 h+ M' `: u* s7 V5 ~. f
  ) c% V. H* J) b3 `) `% b
   3 r' M7 e5 K, P# w- P: r  N
  有了这段代码,你在该网页上的所有文字链接在浏览器中显示时没有下划线,当你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。若你想在其它网页中也具有这种效果,你可以用上述方法设置或更简单点,直接把这段代码复制,粘贴到与之间即可。注意:若不是在a 中定义除去下划线而是在a: link中定义除去下划线,在实际使用时不能除去下划线
 楼主| 发表于 2005-1-3 14:02:04 | 显示全部楼层
在网页中实现细线边框的两种方法
) Z$ I- X5 L: r+ N# ^! L" x- x  U/ Z: a9 }
很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。" }. x7 V  K! x+ t1 X1 Z
: _0 _8 Y/ Z' k( i% S
  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。2 P7 S9 y/ K+ w9 j7 |
  
+ v7 ^9 F% q; Y* z. n5 N6 }. L  如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表格中嵌套定义另外一个表格,背景设为全白,并且把Weight=100%。这时,两个表格是重叠的,但是,如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说,黑色的表格比白色的表格多出了一个像素的外围空间,而白色的表格又在黑色表格之上,从而达到细边框的效果。源代码如下:& h! @9 Y' K, e( f% Q! ^$ D

! B, p, O" b& E' n0 U2 H5 r  〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉% n4 z( @1 i: W: b; V
2 e& C$ G2 ~& l4 `, V% p
   〈tr〉
+ @3 i& d5 d! q+ e# G
! u2 r: i3 A* k: d, [6 S) V   〈td〉
5 b: M) ?' [9 y4 W2 m) T; H+ |! c( l% ~, \$ v; G; A7 _. C, c
   〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉/ R! z5 W( F/ ^. Z

' L) B# o! B* f1 {   〈tr〉
9 T6 _- y/ J2 ?; W4 D: E# f- R$ E) L$ z' ^1 A8 d! p
   〈td〉
# B* B3 N% G! f. [( ?0 M  k0 B: y2 q' p9 a; X$ [$ ]
   〈/td〉: Z0 G- U) J9 a
: ]7 X1 `" ^5 w0 b0 [, Y' V( t
   〈/tr〉" v9 p+ \) K$ y' Q0 P

  v3 G& m+ ]! N+ X3 g& X2 Y   〈/table〉
3 n" |- P% d4 {2 X% `
0 G4 z, u- H0 P2 y$ x  r( ?" H   〈/td〉4 U* A' B$ O$ H& x
' R$ R: g5 Q* o' T) P" ]
   〈/tr〉4 a2 ?! @$ E+ I8 |. m* P

% Y! R) N% w8 B   〈/table〉8 u/ U5 X4 n  I+ F

  v3 B* }; \' ?. _7 J  第二种比较简单,那就是用CSS(层叠样式表)强制定义,但是,有些比较老的浏览器不支持CSS,可能导致无法显示你所要求的效果。不过使用CSS定义,语句非常简洁,所作网页的容量也较小。它的*作方法是,在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER-postion: black 1px solid;",其中,Postion的参数有Left、Right、Top和Bottom,分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。. j  @& ?' m: H6 E, [+ C  ]
/ m" s6 A8 ]' J- T$ o& Y" R
  源代码如下:# l9 X! Z3 k: {+ O

# O" X' W: O3 P7 H+ E+ i, u  〈table border="0" bgcolor=white〉
" j% S: R: m8 q  w0 }' r" b
5 h( @: B0 m" Q7 c) A   〈tr〉
( X5 Q3 `1 ?# q9 d8 P3 W- G! D" J0 ^% F& `9 A
   〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉9 q- O- G: S9 f# p" S

1 q8 N! @2 ?! s% Y& k0 E# I9 ]% D   〈/td〉
% \. z# h: r! |- U; t0 q. S+ F; G% K1 h
   〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
- C4 F9 f  |" x! @1 R7 h! B- D7 j) L3 c3 V# d: E2 i7 V, u8 ~* `2 N  r
   〈/td〉
. }4 b  D( D1 F" Y3 I3 q& F2 y. M3 a/ \3 i! ?, C; T
   〈/tr〉
- c( j. c$ \0 [' Y% z& ?% ?0 E
/ }: x9 C0 g# Q4 l   〈tr〉 1 b8 o+ ^9 D; A0 G, R: |+ c
' A; J" U0 W& y/ f0 r8 Q/ O
   〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉7 n1 a' V/ Q6 E" L. `: X  o% h9 _

& j% i7 [& S/ Z  n2 M. \   〈/td〉9 I9 x$ J9 Y/ b4 E1 w5 U

+ X  e: U- L% O8 K! w) A0 c   〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
' X  z/ H0 @" [" f& {2 E, ^8 z, L# L# l6 |7 `5 a# o' _  @, t

1 N" Y# i  w( s+ |$ u3 a4 h   〈/td〉- W* m  h- v- c5 T
7 `5 ^0 a' l+ ?. d4 W
   〈/tr〉
% y; w8 T5 j" I6 G4 J- J3 O
; U6 y8 E  F  Z4 _! _* |3 {  〈/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 | 显示全部楼层
这个是基础,很实用.不错!
回复 给力 爆菊

使用道具 举报

您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

联系我们|Archiver|手机版|小黑屋|TGL论坛

GMT+8, 2026-9-16 00:37

Powered by iLang

Powered by Discuz! X5.0  ·  © 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表