查看: 230|回复: 8

网页常用代码

[复制链接]
发表于 2005-1-3 13:59:36 | 显示全部楼层 |阅读模式
简单的window.open方法
: P1 |# C$ g/ H5 `( R6 {  <a href="#" onclick="javascript:window.open(’文件路径/文件名’,
9 v5 @( c- ^9 s+ W  ’listnote’,’toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,
$ ?$ t4 R0 ?" Y9 v* ~  width=350,height=300’);">文字或图片
; x  g: R: J/ f% j- G/ m   ) I/ z' F( l0 L, P
! v" S! V& |# P5 k* A& w$ p/ v
图片随机替换
; Q  h% _' Y+ q  
6 k, `3 I3 k5 @$ G  document.write(’’)$ K  m* Q& h9 d$ }  p
  
9 i6 l1 V# L5 |; i4 g( v  图片文件名为0.gif 1.gif 2.gif 3.gif 4.gif 3 Y6 V% @7 [0 [

# R5 ?, i9 v. I: u4 z2 Z. P设为首页
/ n5 a8 V; C0 Y/ X( Z& N$ r5 D  <a href="#" onclick="this.style.behavior=’url(#default#homepage)’;
: s$ ?3 h6 E- cthis.sethomepage(’http://cu1985.126.com’)" height="2"> ) W; u0 c  z- r

* \. C4 U4 j* L0 h  T; s加入收藏 4 j& n8 z3 A0 }* z6 j+ ~% ^% g
  <a href="javascript:window.external.
: t! o% h" e' P! T) g+ V. [7 raddfavorite(’http://www.wosay.net’, ’wosay中文网’)">
. `) T' n2 w4 m& o$ [0 q9 X
9 k; e0 l; C; V. x  [忽视右键
% f+ f6 i0 W$ {* u+ T  " A7 A: x2 g  m) C. A6 P; Z& d
  或6 D6 o2 Q2 c  b8 I
   + a5 J% L$ \5 y2 y1 B3 t

% @1 E3 m( v0 K0 e/ C* S自动转页   
( A7 X  g8 B5 ^! }  
3 ^9 R0 u# p4 }( o: n" Q, c' x' C1 ^, n
加入背景音乐 : {0 z2 ?: `0 L4 q& v
  ie:
; a( |$ z& G1 G" D  ns:
7 q& n3 q# Q4 @+ b! ]* }  + \( w8 S, ?8 T3 u: J3 t! i7 v
  *.mid你的背景音乐的midi格式文件   b, x9 H% ^% A* r8 ]

  P3 h. W+ v; E6 E' B9 i' k网页自动刷新    ?; T8 ]6 F2 p" r& M) I3 I( _' O
  在head部记入
/ }  i# A3 E8 ?1 M  7 Y0 x9 U* M5 e& |4 K  c  K
  其中20为20秒后自动刷新,你可以更改为任意值。 ! Q, o8 ~6 j6 h9 u* ]  V$ m4 K' u

; K7 h, r8 Q5 P# B7 H拉动页面时背景图不动    # I3 ?& N6 ]: M
  
: M% j% q# C  e0 t2 h5 q5 Z# n  - m/ P( o$ V: z
  body  {background-image:url(logo.gif);
' `; T5 K; i! l# _    background-repeat:no-repeat; background-position:center }
2 n+ F" v, O  ?0 d( @, F' V/ a  
1 A7 u: S( w! i& i   ' P) ~$ B  d4 e. e6 S8 R6 [& ^

3 J% W* K, a* _3 w' |9 h5 B让浏览器在保存页面时保存失败       
: ?! a8 Q1 F& j: J4 C* ~6 J) \  : ?: U7 j% D3 N
  2 n9 n( G0 \9 ^2 |3 q4 e# y9 D( t
  
+ B! P( U: f) d4 |, U/ Y9 X  
' d8 q) Y' }6 j, g
  P$ D, P9 ], x6 o在网页中,图片和表格接触的地方如何不留空隙?       
; H+ X5 u% A2 s* D0 A! w  要使图片和表格接触的地方不留空隙,仅在表格属性面板上把外框线(border)设为0是不行的,不仅仅只是表格外框,还有两个设置,即在表格的属性面板上还要把单元格的两个属性设为0(cellspacing="0" cellpadding="0")。
+ \5 t+ L" @; H: p, Y3 z9 L, I
/ q: M6 `- t, \% G+ h7 |# G, s如何把自己放在主页上的zip或其他文件让浏览者下载(down)? & d2 {; F/ w% e" e. ]% _
  用dreamweaver3其实很简单,把要让浏览者下载的文件名写上,然后拖动鼠标选取这段文字,在文本的属性面板上"link"的属性输入框中写上文件名就行了。注意:若被下载的文件与该网页不在同一目录下,则文件名必须包含相对路径,否则到下载时将提示找不到文件。
+ K$ Z6 [- ?4 }& }; Y* |5 i: U/ g$ S+ F5 w# X4 l" `6 S! a4 j2 u* {' L9 \
点击连接打开本地"我的电脑"等 9 g5 l9 R1 p4 S) ^* u
  
" D, A) u) N  R) F- g2 L7 t<a href="file:///::{20d04fe0-3aea-1069-a2d8-08002b30309d}" target="_blank">我的电脑( P9 x# G( W; O, w! c
  <a href="file:///::{208d2c60-3aea-1069-a2d7-08002b30309d}" target="_blank">网上邻居# M% Y9 D; c' y/ r0 F
  <a href="file:///::{645ff040-5081-101b-9f08-00aa002f954e}" target="_blank">回收站7 E% `+ y( ^" X6 Y6 [+ s
  <a href="file:///::{7007acc7-3202-11d1-aad2-00805fc1270e}" target="_blank">网络和拨号连接/ b7 m( ~6 O; f3 S
  <a href="file:///::{d20ea4e1-3957-11d2-a40b-0c5020524153}" target="_blank">管理工具6 O8 P. ]5 ?# \0 d: s
  <a href="file:///::{2227a280-3aea-1069-a2de-08002b30309d}" target="_blank">打印机
. |; r% O; |. Z' h  <a href="file:///::{d6277990-4c6a-11cf-8d87-00aa0060f5bf}" target="_blank">计划任务7 h& h  k, S1 f. G7 q
  <a href="file:///::{d20ea4e1-3957-11d2-a40b-0c5020524152}" target="_blank">字体" l5 E0 x8 b6 [6 A7 G

6 n( R4 h8 i/ d. l' l简单的页面加密  9 t! Q$ t( V- M( T; I4 Z" ~4 t3 N( @- P
   <script language="javascript"># o9 e, K, f- b9 d: q" q! W
  
  R- P+ D6 I$ Q& L* p) }    8 _9 y- i( [9 S3 k; u7 j
$ N/ W, f' S- |
网页自动关闭       , u! v0 n# B* o7 P$ B* H/ b
   0 J; x/ U' {2 C+ U5 O+ h, i
     [) y9 S  x: H" ~3 J& L
   ( G: e5 I" @+ t0 ~. ?
  
) s) Y  d/ c9 t# E   ( Z& n; l* T  P8 A7 Z; c6 S) g5 w
  
% N% w+ ?* {9 C  
8 [9 m' q" R. M# }, C   这个窗口会在10秒过后自动关闭,而且不会出现提示.* }0 j: d9 s' V8 K
    
* M. M6 h6 N" w( X' }4 v% o: @
2 q# v6 w: ~" K" U$ G8 ?保持layer在最前面,而不被iframe、object所覆盖   2 l, a) I& L2 q  ?- }
   在layer中再插iframe 或 object 设z-index值
% \$ t7 I7 ?/ r3 o1 S# 前面
$ k: D: l6 w$ @: I* C. `# 后面
( D$ c1 |4 Y+ m+ k/ `: n4 Nheight=100% width=100%>; m7 M$ Z4 |- L: B! w: j' F
* c, c4 Z. C  Z5 J
5 ?$ ^/ j& |. w# |. J

8 s: C) J; Z" d2 z; {3 b3 d- @0 d% _0 I! V
' q6 g4 z, ^6 S- U

5 I7 \" J; ^" }+ _" I# e! p& l$ R$ R" }! i0 G

) i1 `+ [! X3 z! F
+ b, [. [: {9 w6 K6 r
3 f9 l* `8 J( `' z
, n4 B9 A  |* l) S改变滚动条颜色     5 U4 l7 f5 m6 f+ k, y' Z0 W+ X
  
' E7 ~% t! m, Y9 z9 z3 j- V   body {, e, d- L; p% |2 ]! U& w3 T8 H: L
scrollbar3dlightcolor: #ff0000; /*滚动条亮边的颜色 scrollbararrowcolor: #ff0000; /*上下按钮上三角箭头的颜色 scrollbarbasecolor: #ff0000; /*滚动条的基本颜色 scrollbardarkshadowcolor: #ff0000; /*滚动条强阴影的颜色 scrollbarfacecolor: #ff0000; /*滚动条凸出部分的颜色 scrollbarhighlightcolor: #ff0000; /*滚动条空白部分的颜色 scrollbarshadowcolor: #ff0000; /*立体滚动条阴影的颜色 scrollbartrackcolor: #ff0000 /*滚动条的背景颜色# O$ o  S' D3 |7 N7 F, w& C. x1 H
   }# ~, m9 e8 d' v: t' I8 r6 [5 ?5 K
    
5 H  K% Q4 q, ?5 M( L   说明:$ Z9 H- i8 K- w+ l
1、必须是ie5.5+
2 [4 t7 L. C/ F( M1 K: ?; o2、当页面内容超出屏幕出现移动条时,设置的箭头颜色才有效
8 }2 z$ f0 y- ^' T3、母页的设置对iframe窗口的滚动条颜色无效,但是对textarea文本筐的滚动条有效
) Q5 o: S( i5 `6 u- L1 Q" |6 N, w9 |3 _
如何实现定义的超级链接文字颜色?   K, U; b0 {7 [2 Y; g
  许多文章和教程都介绍过文字超级链接的颜色(包括未被访问的链接颜色、鼠标的链接上的颜色、已被访问过的链接颜色等等)可以用层叠样式表(css)定义,但真正在网页中要实现颜色按自己的意愿变化还确实不容易。下面把一些注意事项告诉你,你就能随心所欲地设置文字链接的颜色了。 - @5 I  E9 q  R) _" M0 T
  1)超级链接的默认颜色是:未被访问的超级链接是蓝色、被访问过的超级链接是紫色; ; |  I2 w, L1 q8 F% `9 N7 i2 Q
  2)要想使css定义的颜色起作用,在超级链接的文本的颜色属性中什么都不要填;
" S) F: {: i% K  T  3)若你已定义了文本的颜色,发现css中定义的超级链接颜色不起作用,你可以取消文本的颜色定义,或取消超级链接再重新定义一次,css定义的颜色就起作用了; . u+ @! A7 W( J8 N6 l7 b  H
  4)超级链接上各种状态下文本颜色的关系:一旦定义了被访问过的链接的颜色(a: visited),则当链接被访问过后,该链接的颜色不再改变,即定义鼠标在超级链接上的颜色(a: hover)将不起作用了。若不定义被访问过的链接的颜色(a: visited),则当鼠标在超级链接上显示a: hover 中定义的颜色,当鼠标移开时显示a 中定义的颜色。 # A. V" t  b% o
   从上述可以看出,文本链接的颜色实际上只能在两种颜色之间变换,并没有象有些文章中讲的那样可以在多种颜色之间变换,但由于用那两种颜色可以任意,所以应该讲颜色的选择范围还是比较大的。
- i4 F8 ]+ A! f0 B# x) w
2 \* `% ^7 l; K$ S% i有些网页的链接,原先没有下划线,你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。如何实现这种效果呢? . q. [9 q' e1 w! o  G
  可用层叠样式表(css)来实现的,在dreamweaver3中编辑层叠样式表不用编写代码,具体*作方法如下: 7 ]- g) G8 u) T0 n- N
  1)在快速启动栏中点击层叠样式表按钮(就是把鼠标放上去显示"show css styles"的那个按钮),在弹出的css styles面板上双击(none);
( C1 k+ ~2 |: ?- |. J  2)此时,可看到弹出的edit style sheet 面板,在该面板上按new按钮;
: n5 A$ u+ C5 S3 `' r0 `  3)再在弹出的new style 面板上点取redefine html tag(重新定义html标记)再在tag中选择"a"(超级链接标记)标记后按ok按钮; 9 L6 y- @' ]4 d6 N* R3 B* b- F: O- |
  4)这时可看到弹出的style dehinition for a 的对话框,在此对话框中可以设置超级链接的许多属性,你可以按你的意愿设置,但我们这里主要是要去掉那讨厌的下划线,所以我们在decoration 属性中选择"none",这样就把下划线去掉了;然后我们再选择颜色为:#339966。按ok按钮返回到edit style sheet 面板;
3 n0 ~) m* G' [5 l: v1 h  5)在edit style sheet 面板上再按new按钮;
2 X/ o8 h( w. y  ^0 X! r0 U' z. K  6)在弹出的new style 面板上点取use css selector ,再在该面板上的selector选择框中选择"a:hover"(定义当鼠标在超级链接上时链接的属性),按ok按钮;
! S; H' R( _( {: D5 R( O# w  7)在弹出的style dehinition for a:hover 的对话框中,我们在decoration 属性中选择"underline",这样就把下划线又加上了;然后我们再选择颜色为:#ff3300。按ok按钮返回到edit style sheet 面板;
& i! E9 N5 @& k2 j2 k* A3 C  8)在edit style sheet 面板上再按don按钮,至此所有设置结束,你在dreamweaver3的源代码检视窗中将看到在与之间如下所示的代码:/ [1 k4 d3 g' |) g
  
6 r* i% A- N7 ~' ~) G# w9 `  
. ]& r' u' H' w% _  
; V! N, K! D1 U8 E/ I! W% H  有了这段代码,你在该网页上的所有文字链接在浏览器中显示时没有下划线,当你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。若你想在其它网页中也具有这种效果,你可以用上述方法设置或更简单点,直接把这段代码复制,粘贴到与之间即可。注意:若不是在a 中定义除去下划线而是在a: link中定义除去下划线,在实际使用时不能除去下划线
 楼主| 发表于 2005-1-3 14:02:04 | 显示全部楼层
在网页中实现细线边框的两种方法
1 t+ I6 T% E, T7 I+ {# g9 f6 g+ }; Q4 B8 ?0 M5 Y
很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。
: j7 l/ d8 C$ y4 P6 ]5 [
. Z  q5 l( u( _  _. I  \; }  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。
! x: }9 Q6 ^  I' r  
& X7 L- x+ K+ T  如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表格中嵌套定义另外一个表格,背景设为全白,并且把Weight=100%。这时,两个表格是重叠的,但是,如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说,黑色的表格比白色的表格多出了一个像素的外围空间,而白色的表格又在黑色表格之上,从而达到细边框的效果。源代码如下:8 j! p. n2 l- d& ~0 }

$ s9 k6 Y+ Z. L2 v/ A8 f4 i" E$ p9 z. W  〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
$ X5 f6 L: S/ T4 l2 b$ e5 i* e& b7 G, }; w' B) g; ]. U. j6 D4 U
   〈tr〉   A) z# a  l$ T0 u/ O
/ u9 ^  N7 ^" ]* g& |, p+ v
   〈td〉
0 ^" w  o8 B: z7 c4 V2 e8 {9 T8 [! ~5 F7 ^! Z( z
   〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
& B7 k' n& N5 x1 K) B/ E1 u$ B$ c+ ~) O
   〈tr〉
+ ]* t, `. c/ s% G$ G; A: t5 G' B3 d( `# B6 O- v
   〈td〉9 R' t7 W2 z# A% D) C' A

: c, F$ @* ]1 _' ^   〈/td〉
+ {3 s+ y. R0 q) h# m( Z& Y) ^; [5 z/ a2 D6 p
   〈/tr〉' X% F9 C; d' u, H1 K2 {
2 G$ s$ B* L  X! D* }3 e
   〈/table〉
2 X8 L/ v. _9 n+ t/ G; x5 s5 Q- M7 J4 o- @7 q
   〈/td〉& _4 P% J! k$ K  ]3 W

  p! V% G! S3 U   〈/tr〉
1 f8 G  W5 ?8 c/ K$ _# I/ h! n9 f. k4 O! ^
   〈/table〉
0 E1 z. B' E$ `( _
# Z4 a3 |* |  B9 v  第二种比较简单,那就是用CSS(层叠样式表)强制定义,但是,有些比较老的浏览器不支持CSS,可能导致无法显示你所要求的效果。不过使用CSS定义,语句非常简洁,所作网页的容量也较小。它的*作方法是,在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER-postion: black 1px solid;",其中,Postion的参数有Left、Right、Top和Bottom,分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。" v7 B; R$ n* U6 P8 N5 L9 `) M7 m9 z
5 E0 ~" |& l0 k/ L3 Z( w
  源代码如下:* N. I" B* ^' B1 F
6 V1 t/ h- p9 B
  〈table border="0" bgcolor=white〉
* I0 ^5 a+ B' V- a  V1 x
( R$ q2 C" C: \  A% G   〈tr〉 5 J" F  C4 D3 {( y
% l( n/ \- `. x. g# M. Y
   〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
/ V# o; @2 X% f4 J
6 v5 u) E# @9 u0 Y+ `/ M" G' l   〈/td〉
9 E" }( }# s* H7 j5 {% _
8 ~3 M( `; i& h6 e/ R1 z   〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
/ I, b1 F6 Z$ m' x% \' g. w, a% r
   〈/td〉' x* }/ ^/ y3 ~( x
- Y9 L; E# U2 f5 k
   〈/tr〉" T& h- Q8 H2 _3 r4 u; t, O

0 }% J: ]3 u; ]: t: P   〈tr〉 ! }, V6 B" E& i2 N. o$ ~

8 K5 y& V0 D5 [! W2 b  {! {   〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
4 m! _6 i& ~! B0 ]) N/ x7 y
$ K/ s* ~: s* V& y$ n   〈/td〉5 h0 j  T4 w6 @; V. e2 r0 l
* t/ G0 T: p( T6 L* x; \" ]: V
   〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉5 R1 D0 K4 R, v3 P! u; `0 @

! b9 z1 z5 _- D  S2 Z; a
9 k/ R! u+ V/ M4 X   〈/td〉
2 M0 u3 L2 l: S/ N
( C' s/ R$ R  ~5 G4 n$ k# K4 g   〈/tr〉
* r) U% n" i8 K
8 o# t" X5 q1 P+ o1 O  〈/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-10-26 20:13

Powered by iLang

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

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